[NodeJS] NodeJS(express) + React 연동하기

▶NodeJS(express)랑 React랑 연동하기

저는 처음에 express와 React를 따로따로 배웠던 터라 React에서 express를 연결하는 부분에 있어서 어려움이 좀 있었는데 그 방법에 대해서 좀 정리해보려고 합니다 :)

 

클라이언트 / 서버 시점에서 살펴보려고 합니다.

 

우선 react와 express를 연결한다는 의미는 무엇인가?

express는 누군가 서버의 포트로 접속을 하면 react로 만든 파일들을 보여주는 역할을 수행하면 되는 것입니다.

 

1. Client(React)

creat-react-app ./

리액트 파일이 설치가 되었다면 이제 express와 연동하는 것을 해 봅시다.

 

우선 우리는 클라이언트를 서버와 연결할 것을 알고 있어야 합니다.

이 말은 클라이언트의 포트와 서버의 포트를 연결해야 한다는 말과 같습니다.

 

① package.json에서 proxy 추가

가장 마지막 부분에 proxy 추가

저는 서버의 포트 번호를 8080 번을 사용할 것이어서 위와 같이 입력해 주었습니다.

 

+ proxy

proxy는 클라이언트가 자기 자신 안에서 다른 네트워크 서비에 간접적으로 접근하게 해주는 것입니다.

클라이언트 → 서버 로 바로 접근할 수가 없고

클라이언트 → proxy → 서버 과정을 통해 클라이언트가 서버에 접근할 수 있게 해줍니다.

 

2. Server(express)

가장 바깥 폴더에 server.js 파일 생성

간단하게 서버 코드를 작성해 봅시다.

const express = require("express");
const app = express();

app.listen(8080, () => {
  console.log("Listening on 8080!");
});

(Rest API 통신으로 리액트와 express가 통신하는 것은 다음 글에서 알아봅시다.)

 

3. (개발)클라이언트 / 서버 각각 실행

배포를 할 때는 서버를 실행하게 되었을 때 리액트 페이지들을 같이 보내주어야겠지만

평소에 개발을 할 때에는

리액트를 localhost로 켜주고 express 서버를 localhost로 켜주고 해서 개발을 진행합니다.