React - node + Express 서버와 연동하기

기본적으로 서버와의 연동이란 서버에 react 로 만든 페이지의 요청이 들어오면 react 로 만든 index.html 을 전송해주는 것을 연동이라고 합니다.

 

먼저 간단한 express 프로젝트를 만듭니다.

 

그 다음에 react 프로젝트를 서버 프로젝트 안으로 넣습니다. ( 그전에 반드시 react 프로젝트를 빌드 해야합니다. )

 

그 다음에 server.js 라는 파일을 만들어서 아래의 코드들을 작성해줍니다.

 

그리고 터미널에 아래의 명령어를 입력하면 서버를 실행할 수 있습니다.

// nodemon 이 설치된 경우
nodemon server.js

// nodemon 이 설치되지 않은 경우
node server.js

 

근데 여기서 유저가 http://localhost:8080/detail/0 로 접속을 하면 페이지가 없다고 나올겁니다.

그 이유는 서버도 라우팅 기능을 하기 때문인데요. 지금 현재 켜져있는 서버가 react 가 아니라 다른 서버이기 때문에 url 에다가 detail 페이지를 보여달라고 요청을 하면 node 서버에게 요청을 하는 것이기 때문에 아무 라우팅 설정을 안한 상황에서는 당연히 없는게 맞습니다.

• express 서버의 라우팅 역할을 하는 코드

 

그래서 react 의 라우팅 기능을 사용하려면 아래의 코드를 코드 맨 아래쪽에 작성합니다.

app.get('*', function (request, response) {
    response.sendFile(path.join(__dirname, '/shop/build/index.html'));
});

// 이 코드의 의미는 서버상에 작성되어있지 않은 경로로의 요청이 들어오면 다시 '/shop/build/index.html'// 파일을 보여달라는 의미입니다. 이렇게 짜놓으면 리액트 라우터가 라우팅을 해주게 됩니다.

 

DB 데이터를 react 에서 보여주는 방법

html 을 서버가 만들면 server-side-rendering 이라고 하고, 클라이언트( 리액트 같은 프레임워크 )가 만들면 client-side-rendering 이라고 합니다.

 

DB 에서 꺼내온 데이터를 리액트에서 사용하고 싶으면 서버에서 아래와 같이 코드를 작성하시면 됩니다.

 

그리고나서 리액트에서 위에 적어놓은 url 경로로 get 요청을 보내면 데이터를 받을 수 있습니다.

 

추가로 ajax 통신을 잘 되게하려면 아래의 코드를 추가하셔야합니다.

• 그런데 이걸 쓰려면 라이브러리 cors 를 설치해야합니다.

npm install cors

• express.json() 은 유저가 보낸 array/object 데이터를 출력해보기 위해 필요합니다.
• cors 는 다른 도메인 주소끼리 ajax 요청을 주고받을 때 필요합니다.

 

 

리액트 코드를 수정할 때마다 build 해야하는가??

• 아닙니다. 개발할때는 그냥 서버, 리액트 프로젝트 둘다 미리보기 띄워놓고 개발하시면 됩니다.