🚀 [React + Node.js(Express)] 연동해보자

 

✋ 준비할 것

1. 우선, node.js를 설치해야 한다.

 

https://nodejs.org/en/

 

 

설치가 끝났다면, cmd에서 node -v를 타이핑하여 설치가 되었는지 확인한다.

 

 

설치가 됐다면 버전이 출력된다.

 

 

2. 다음은 React를 설치한다.

 

npm install -g create-react-app

 

설치가 완료됐다면, React 프로젝트를 생성하고 싶은 위치에서 터미널을 열고

 

create-react-app [폴더명] 을 타이핑하여 생성한다.

 

 

 

 

이후 cd [생성한 폴더명] 을 타이핑하여 디렉토리를 변경 하고나서 npm start를 타이핑하면

 

 

위와 같은 화면이 출력될 것이다. 

 

 

 

3. 이제 express를 설치할 차례이다.

 

npm i express를 입력하여 설치한 후,

 

routes의 js파일명은 원하는대로

 

위와 같이 server폴더와 server.js

src안에 routes폴더와 원하는 js파일들을 만들어준다.

👀 참고로 꼭 routes로 만들 필요는 없다.

 

 

4. 위의 과정이 끝났다면 server.js 안에 아래와 같이 작성해준다.

 

React의 PORT가 3000이기 때문에 3000만 아니면 됩니다.

 

 

그리고 서버를 업데이트하고 재가동을 편하게 하기 위해 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 안에는

{

  "exec": "babel-node /server/server.js"

}

를 babel.config.json 안에는

{

  "presets": ["@babel/env"]

}

를 작성해줍니다. 만약 추후에 작동하지 않는다면 @babel/preset-env로 변경해보길 바랍니다.

 

 

 

 

6. 거의 다 왔습니다. 이번엔 package.json으로 이동하여

 

위와 같이 dev, start:client, start:server로 작성합니다.

 

이렇게하면 npm run dev를 터미널에서 타이핑하면 React와 서버가 동시에 켜질 것이고,

 

서버의 변동사항이 생긴다면 자동으로 nodemon이 재가동을 시켜줍니다.

 

 

 

 

7. npm run dev를 이용하여 서버를 작동시키고

localhost:[작성한 포트]로 이동하여 서버가 작동이 되는지 확인해줍니다.

 

 

잘 작동한다면 끝! 수고하셨습니다.