keembloo

에러 내용 Access to XMLHttpRequest at 'http://localhost:8081/member/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. - CORS policy 정책 때문에 접근 할 수 없다.( 보안상 문제 ) 교차 출처 리소스 공유 ( Cross-origin resource sharing ) 리액트 서버의 포트 번호는 3000이다 스프링 ..

react-router-dom : 가상 돔 만들어주는 라이브러리 가상URL 쓰는 이유 html 파일은 하나이기때문에 가상 URL을 만들어야한다. 가상 http url을 정의해서 컴포넌트를 리턴하게 해주는 라이브러리이다 react-router-dom라이브러리 주요 4가지 컴포넌트 지원 import { BrowserRouter , Routes , Route , Link } from "react-router-dom"; BrowserRouter : 가상 URL관리 / 브라우저 URL 동기화 컴포넌트 Routes : 가장 적합한 path의 컴포넌트 검토하고 찾는 컴포넌트 [매핑] Route : 경로를 지정하고 반환한 컴포넌트를 지정하는 곳 , 실제 URL 경로 지정해주는 컴포넌트 Link : 페이지를 갱신하지 않..

리액트 JS 라이브러리 집합이다 리액트 사용이유(특징) 1. SPA 이다 싱글페이지 어플리케이션 싱글페이지란 HTML을 1개 사용한다 속도가 빠르다 SPA의 반댓말은 MPA 멀티페이지 어플리케이션 HTML 여러개를 사용한다 즉, 하나의 화면(html)을 쪼개어서 랜더링이 가능하다. 이를 모듈 / 컴포넌트 단위 개발이라고 한다. index.html 안에 index.js 에서 document.getElementById('root') dom객체 가져와서 root.render(컴포넌트명) 넣어주면 적용된다 // 1. index.html에 dom객체 호출 const root = ReactDOM.createRoot(document.getElementById('root')); // 2. 리액트 렌더링 (JSP -> ..

npm/ npx node.js 제공하는 외부라이브러리 빌드도구이다 둘의 차이는 ? npm 설치만해줌 npx 설치후 실행도 해줌 인텔리제이 터미널에 npx create-react-app reactapp 입력하여 설치한다 이렇게 오류날경우는 2가지이다 1. 기존 리액트 환경 존재해서 충돌일 경우 다시 삭제하는 명령어 npm uninstall -g create-react-app 2. 그래도 충돌날경우 npx , npm을 업데이트 해준다 npx update npm update 각 1번씩해준다 뭐라고 뜨면 y 눌러서 업데이트 진행해주고 다시 리액트 설치한다 Happy hacking! 뜨면 설치 완료 리액트 실행하는 방법 인텔리제이 터미널에서 생성한 폴더로 이동한뒤 npm start를 입력! 꼭 생성한 폴더로 이동..

node.js 란? JS 자체 컴파일 기능 가진 플랫폼이다. React는 node.js 기반으로 하기때문에 node.js를 먼저 설치해줘야한다 1. https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 18.18.2 버전 확인후 64bit 설치한다. + 그냥 최신버전으로 설치한다 2. node.js 설치 됐는지 CMD가서 확인해야한다 node -v 명령어 입력하고 버전 확인한다. 리액트 설치할때 npm/npx 이 필요하다. npm이 node.js에 호환된 관리자 패키지이다. (EX 자바에서 gradle(그레이들)과 비슷...) ..