[PJT] React + Springboot 토이프로젝트 - 1

[React 설치하기]

cd src/main

npx create-react-app {프로젝트명}

npx는 뭘까?

npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구이다.

위 명령어를 입력하니.

[에러발생] npx command not found 발생했다.! 

[해결] node.js 공식 사이트에서 LTS버전을 다운로드하자.

(설치 후 다시 입력하니 생성됨!)

Node.js란? 

Node.js는 Javascript로 작성된 프로그램을 운영체제상에서

일반 애플리케이션 프로그램처럼 실행시켜주는 런타임이다.

특히, 서버 프로그램을 작성하는데 많이 사용된다.

이번에 React를 사용해보기 위해서 설치해보자.

/src/main/devlogwww 경로로 이동 후

npm start 하면 실행완료. (localhost:3000)


[axios패키지 설치]

react와 spring boot api의 통신은 axios를 사용할 것이므로 패키지를 설치해준다.

프록시 설정

빌드한 뒤 서버를 실행하면 프론트, 백엔드는 같은 포트로 동작하지만,

개발 시 React Dev Server(port: 3000), Spring Server(port: 8080)로 포트가 나뉘어 실행되기 때문에,

CORS를 방지하기 위해 프록시 설정이 필요합니다.


[필요한 모듈 설치]

npm install react-bootstrap bootstrap # 부트스트랩 모듈

npm install react-router-dom --save # 라우터 모듈

npm install axios --save # 서버와 통신하기 위한 모듈

frontend/Package.json에 다음 한 줄 추가

"proxy":"http://localhost:8080 


--- 

[에러발생] 다시 깃 pull을 받아서 빌드 시 아래와 같은 에러가 발생했다.

'react-scripts'은(는) 내부 또는 외부 명령, 

실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

[해결] 터미널가서 upm update 입력 후 다시 npm start 실행하니 해결 완료.