🚀 [React + Node.js(Express)] 연동해보자
✋ 준비할 것
1. 우선, node.js를 설치해야 한다.
설치가 끝났다면, cmd에서 node -v를 타이핑하여 설치가 되었는지 확인한다.
2. 다음은 React를 설치한다.
npm install -g create-react-app
설치가 완료됐다면, React 프로젝트를 생성하고 싶은 위치에서 터미널을 열고
create-react-app [폴더명] 을 타이핑하여 생성한다.
이후 cd [생성한 폴더명] 을 타이핑하여 디렉토리를 변경 하고나서 npm start를 타이핑하면
위와 같은 화면이 출력될 것이다.
3. 이제 express를 설치할 차례이다.
npm i express를 입력하여 설치한 후,
위와 같이 server폴더와 server.js
src안에 routes폴더와 원하는 js파일들을 만들어준다.
👀 참고로 꼭 routes로 만들 필요는 없다.
4. 위의 과정이 끝났다면 server.js 안에 아래와 같이 작성해준다.
그리고 서버를 업데이트하고 재가동을 편하게 하기 위해 nodemon과 babel을 설치할 것이다.
npm i nodemon
npm i @babel/core -D
npm i @babel/cli -D
npm i @babel/node -D
npm i @babel/preset-env -D
npm i npm-run-all
를 입력하여 설치해준다.
5. 설치가 끝났다면 src폴더 안에 nodemon.json 과 babel.config.json 를 파일생성을 이용해 만들어준다.
당연히 아무 내용이 없을텐데, nodemon.json 안에는
를 작성해줍니다. 만약 추후에 작동하지 않는다면 @babel/preset-env로 변경해보길 바랍니다.
6. 거의 다 왔습니다. 이번엔 package.json으로 이동하여
위와 같이 dev, start:client, start:server로 작성합니다.
이렇게하면 npm run dev를 터미널에서 타이핑하면 React와 서버가 동시에 켜질 것이고,
서버의 변동사항이 생긴다면 자동으로 nodemon이 재가동을 시켜줍니다.
7. npm run dev를 이용하여 서버를 작동시키고
localhost:[작성한 포트]로 이동하여 서버가 작동이 되는지 확인해줍니다.
잘 작동한다면 끝! 수고하셨습니다.