Node+Express 와 React연동하기

우선 서버가 하는일은 누가 사이트에 접속하면 index.html을 보내주세요. 이렇게 html을 전송하는 기계다.

리액트는 html파일을 예쁘게 만드는 도구다.

리액트로 개발하면 html하나에 js로 여러 페이지를 갈아끼우는 구조인데, 이걸 누가 메인페이지에 접속했을 때 보내주면 연동하는 셋팅이 끝난다. 그리고 server.js라는 파일을 새로 만들어 아래의 내용을 적어주었다.

먼저, 서버를 띄우기위한 필수요소만 적으면

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

const http = require('http').createServer(app);
http.listen(8080, function () {
  console.log('listening on 8080')
});

이렇게 되고,

그리고, server.js를 잘 동작하게 하려면 express라이브러리를 설치해야한다.

1. npm init (package.json을 설치함)

2. npm install express을 하면,

라이브러리 설치가 끝났고, 서버를 간단하게 만들 수 있다.

 

그 다음, 서버실행은 node server.js를 입력하면 된다.

그다음 public폴더에 index.html을 만들고 간단하게 안녕하세요라고 써놓고

app.use( express.static( path.join(__dirname,'public') ) );
//미들웨어인데 html,css,js,img파일들 담긴 곳 명시,public폴더의 static파일들을 쓰겟다.

//public폴더의 main.html이 있는데 누가 메인페이지에 접속하면 html파일 보내는 법
app.get('/',function(요청,응답){
  응답.sendFile( path.join(__dirname, 'public/main.html') )//원하는 html을 보냄
});

이렇게, app.use 로 파일들을 쓰겠다고 명시하고, 여기서 app.use는 미들웨어인데, 미들웨어란 서버의 요청과 응답사이에 실행할 코드를 말한다.

app.get으로 해당폴더 /가 열리면 응답파라미터에 sendFile에 주소를 써주면 해당 파일이 localhost:8080에 뜬다.

이제 리액트폴더를 만들어서 해보자.

npx create-react-app react-project

이렇게 작성해서 하위폴더로 react-project라는 폴더를 만들면 된다.

리액트 폴더의 src에 작성을 하고 개발을 한 뒤, build라는걸 할 수 있는데,

npm run build

를 하면 build폴더가 생성이 되고, build폴더는 리액트로 만든 웹앱 html이 담겨있다.

app.use( express.static( path.join(__dirname,'react-project/build') ) );

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

이렇게 써주면 된다. 만약, 리액트 라우터를 사용하면,

주소창에 라우터로 지정한 URL을 입력하면 없다고 나온다. 이게 서버에 직접 요청하는 방식으로 되기 때문인데,

아래처럼 써주면 유저가 URL에 아무거나 입력하면 리액트 html을 보내달란 뜻이 된다.

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

 

실제로 node와 리액트 개발패턴을 알아보자.

list페이지를 개발한다면

/list로 접속시 ->요기에 DB에 있던 게시물 list를 보여야함 이럴때,

어떤 사람이 /list접속시 <list>컴포넌트 같은거 보여주는데, 이때 잠깐 useEffect를 써서 서버로 ajax요청을 한다.

그러면, 서버에서 어떤 놈이 ajax요청하면 DB에 있던 게시물 list 데이터 보내줄게 이렇게 된다.

 

만약, /어쩌구로 들어갔을 때 리액트 페이지를 보여주고 싶으면, 즉, /로 접속하면 메인페이지고, /react로 들어가면 리액트 페이지를 보여주고 싶다면,

app.use( '/', express.static( path.join(__dirname,'public') ) );
app.use( '/react', express.static( path.join(__dirname,'react-project/build') ) );

app.get('/',function(요청,응답){
  응답.sendFile( path.join(__dirname, 'public/main.html') )
});

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

이렇게 상단에 app.use 미들웨어를 상단처럼 적어서, 유저가 /react 포함된 URL로 요청시 요청과 응답사이에 실행할 코드가 된다. 

그리곤 하단에 두개로 적으면 각각 페이지를 나눌 수 있다. 

마지막으로, 리액트 프로젝트의 package.json에

homepage 를 /react로 적어주고 다시 npm run build를 해줘야 한다.

 

만약, 개발 중간중간 서버 API + 리액트 잘되는지 확인하려면 매번 build를 해야하는게 불편하다면

proxy를 이용하면 될 것 같다.