[React] Node+Express 서버와 React 연동하기

임시 서버를 Node.js + express로 쉽게 만들기

 

 

 

1. 리액트 프로젝트 외에 server 폴더 따로 만들기

2. npm init 해서 package.json 파일 생성

3. npm install  express 해서 exress 설치

4. server.js 파일 만들어서 아래의 코드 복붙

const express = require('express');
const path = require('path');
const app = express();

app.listen(8080, function () {
  console.log('listening on 8080')
});

 

 

5. node server.js로 서버 잘 만들어 졌는지 확인

 

 

 

 

 

리액트로 만든 HTML 전송하는 법

 

 

 

1. 리액트로 개발을 다 마친 후 build라는 작업을 해야 html 파일이 나와서 쓸 수 있음 (*React는 html 만들어주는 툴)

npm run build

 

리액트 프로젝트에 build라는 폴더가 생성되고 안에 html, css, js 파일이 생성됨

그중에 index.html이 react에서 만든 것을 보여주는 것

기본적으로 리액트 프로젝트는 SPA(Single Page Application : 단일 페이지로 구성됐다는 것)라서 html 파일 하나만 씀

누가 내 사이트 접속시 리액트로 만든 html 보내주면 됨

 

 

 

2. 리액트 프로젝트 파일을 SERVER 폴더에 넣기

 

 

 

server.js에 아래의 코드 작성

 

express.static를 쓰면 특정 폴더 안의 파일들을 static 파일로 사용자에게 잘 보내줄 수 있음(css, js, img 파일들)

' / '로 get 요청을 하면 리액트로 만든 html 보내주는 것 (index.html 파일의 경로 넣기)

이제 localhost:8080으로 접속하면 리액트 프로젝트 나옴

 

 

 

 

리액트에서 라우팅 담당하는 경우(서버 없이 라우팅으로 여러페이지 만들어 놓은 경우)

 

 

 

server.js에서

가장 하단에 아래의 코드 작성하기

app.get('*', function (요청, 응답) {
  응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));
});

 

 

 

 

DB 데이터를 리액트에서 보여주고 싶은 경우

 

 

 

ex) DB에서 글목록 데이터를 꺼내서 HTML로 보여주고 싶은 경우

리액트는 client-side rendering : 리액트가 서버에서 get 요청으로 DB데이터를 가져와서 html로 만들어서 보여주는 것

 

1. DB데이터 뽑아서 보내주는 API 작성

2. 리액트는 이 주소로 GET 요청 (*리액트는 서버와의 통신을 거의 ajax로 진행)

 

 

3. server.js파일 상단에 아래의 코드 추가해야 node.js 서버간 ajax 요청이 잘 됨

( * npm install cors 터미널에 설치)

express.json()은 유저가 보낸 array/object 데이터를 출력하기 위해 필요하고

cors는 다른 도메인 주소끼리 ajax 요청 주고 받을 때 필요

 

 

 

Q. 리액트 코드를 수정할 때 마다 build 해야되나?

→ NO! 리액트 프로젝트, 서버 프로젝트 둘다 미리보기 띄어놓고 작업하면 됨