📞 React + Node.js(Express) 연동하기 (1)

💡 Express ?

    - Express.js, 또는 Express는 Node.js를 위한 웹 프레임워크의 하나이다. javascript를 이용하여 프론트와 함께 백엔드를 구축하여 서버-클라이언트를 모두 개발할 수 있다.

참고 : Express 개념정리

Node.js, Express 개념정리하기

🕶 준비하기

    - 기본적으로 node.js가 설치되어 있어야 한다. (확인법 : Terminal에서 node -v 후 확인)

참고 : Node.js 설치하기

Node.js

    - 셋팅을 위해서는 package manager는 Yarn을 사용하여 셋팅을 할 예정이다.

참고 : Yarn 설치하기

Yarn

💾 React + Express 설치하기

    - 프로젝트를 생성할 폴더를 만든다.

    - 먼저 React에서 제공하는 CRA(create-react-app)을 이용하여 client 파일을 생성한다.

프로젝트 폴더 위치에서 명령어실행

    - yarn start 명령어를 사용하여 제대로 생성되었는지 확인한다.

client 폴더로 이동 후 실행

   

이상이없다면 React 기본 템플릿이 나오게 된다.

    - 이후 Express 설치를 위한 명령어를 실행한다.

프로젝트 폴더 위치에서 명령어실행

위의 명령어들을 실행 후 폴더구조

    - 서버관련 파일들을 위한 server 폴더를 만들고 서버가 실행될 시 찾아갈 server.js를 만든다.

    - 또한 Router 폴더와 테스트를 위한 test.js를 만든다.

    - Express 사용을 위한 기본 구조와 테스트파일을 작성한다.

    - React가 3000번 포트를 사용하기때문에 다른 포트를 사용하기 위해 5000번 포트를 사용하기로 한다.

server.js에 작성합니다.

test.js 파일

    - 최상단 폴더(프로젝트폴더)위치에서 명령어를 실행하여 제대로 실행되는지 확인한다.

만약 현재 폴더위치가 client였다면 cd .. 명령어 먼저실행

    - 명령어 실행 후 Listening on port 5000 문구가 나온다면 웹브라우저에서 http://localhost:5000/api로 접속해본다.

http://localhost:5000/api로 접속하니 hi라는 문구가 정상적으로 떠있다.

    - 추가적으로 nodemon과 concurrently를 설치해준다.

    - nodemon : 개발시 변경사항을 실시간으로 업데이트 해주기 위함이며 --dev는 개발환경에서만 적용하기 위한 모듈

    - concurrently : 리액트서버와 노드서버를 동시에 실행 시키기위한 모듈

    - concurrently 모듈 설치이후 package.json에 추가적인 설정을 해준다.

client 폴더가아닌 밖에있는 package.json에 scripts 부분을 추가해준다.

    - yarn start 명령어를 실행한 후 3000번과 5000번으로 접속하여 이상이 없는지 확인한다.

이어서 2편으로 ! 👇👇👇

2021.03.01 - [React/React + Node.js(Express)] - 🎵 React + Node.js(Express) 연동하기 (2)