1. Node.JS, CREATE React APP , Node EXPRESS FRAMWORK 설치하기
1. Node.js 설치하기.
https://nodejs.org/ko/download/releases/ 사이트에서 16.14.1 파일을 다운받는다.
윈도우10 64비트에서 진행한 실습이기에, win-64 msi 파일을 다운받았다.
cmd에서
node -v
npm -v
명령어를 통해 잘 설치됐는지 확인한다.
그다음 워크 스페이스를 생성하기 위해 c드라이브에 개인 폴더를 생성한다. 파일 경로에 한글이 포함되지 않게 한다.
2. react 설치하기.
create-react-app 프레임워크를 통해 프레임워크 서버를 구동할 것이다.
npm을 설치했기때문에 cmd에서 설치를 진행하겠다.
워크스페이스로 가서(cd ___)
npm install -g create-react-app
create-react-app client
명령어를 통해 설치한다.
설치가 완료되면
클라이언트 폴더로 가서(cd client)
dir 명령어를 통해 설치를 확인한다.
그 후 바로
npm start 명령어를 입력하면
다음과 같은 창이 뜨며 서버가 실행된다.
3. node express 설치하기.
node express는 node의 프레임워크다. 마찬가지로 npm을 통해 설치하겠다.
npm i -g express-generator
명령어를 통해 패키지 설치 후
express project101
명령어를 통해 project101이라는 프로젝트 파일을 만들고
cd project101
npm install
명령어를 통해 설치한다
npm start
명령어를 통해 실행하면, express는 자동으로 창이 뜨지 않기 때문에
브라우저에서
localhost:3000
를 입력해 직접 들어가면 된다.
이런 창이 뜨면 성공한 것이다.
- React, Node 서버 디렉터리 구조 설정_
1. 워크 스페이스 지정.
설치한 visual studio에서 open folder을 통해 생성했던 워크 스페이스를 연결한다.
그 중
node js 서버를 위해 만든 폴더(express 설치한 폴더) 내 www.js 파일을 열고, port를 '3000' 에서 '5000'으로 수정하면 다음부터 서버를 열 때 localhost:5000을 통해 접속된다.
- 프록시 설정_
1. 프록시 서버를 사용하는 이유
1) 호출 url 을 간소화할 수 있다. react와 node 서버는 별개기 때문에 로직을 실행하려면 url이 길어지는데, 프록시를 통해 url을 짧게 간소화해서 쓸 수 있다.
2) 브라우저는 포트가 다른 서버의 자원을 공유할 수 없다. react 서버 포트는 3000, node 서버 포트는 5000인데 서로 자원을 주고받을 수 없다. CORS라 해서 교차 출처 리소스 공유를 통해 데이터를 공유할 수는 있지만 관련 정보를 추가로 조작해야 하므로 그럴 필요 없이 프록시 서버를 쓰겠다.
2. 코드 짜기.
client의 app.js에 다음과 같은 코드를 추가한다.
localhost:5000/users를 바로 자동 호출하게 한다.
package.json에서 프록시 경로를 설정한다.
다시 cmd에서 서버를 구동한다.
npm start
- GET 방식, POST 방식으로 React 서버에서 Node 서버의 JSON 데이터를 가져오기
1. 워크스페이스 통합.
cmd 하나만을 이용해 두 서버를 열기 위해 node 서버 폴더 내 모든 파일을 상위 폴더로 옮기고 노드 서버 폴더는 삭제한다.
