[웹 개발] React + Express(Nodejs) 연동하기

해당 포스팅은 Window 에서 진행하였습니다.

 

1. 프론트앤드 / 백앤드가 햇갈려요!

 

많이 착각하는 부분이 React와 Express 서버에 관한 내용입니다. 만약 React 프로젝트를 생성했다면 React 서버가 따로 존재할 것이며, Express를 이용하여 Server를 따로 만든다면 Express서버가 따로 존재하게 됩니다. 개발하는 단계에서는 React와 Express 서버를 연결해줘야 합니다. 배포하는 단계에서는 npm build를 통해 하나의 서버로 합쳐주면 됩니다.

 

	React	Express
서버	Nodejs 서버 사용	Express를 이용해 커스텀마이징
작업	화면에 나타날 UI 및 로직 제작	API 제작 및 프로토콜 통신 제어

 

백앤드 공부 참고 블로그(다른분) : https://velog.io/@yssgood/%EB%B0%B1%EC%97%94%EB%93%9C-HTTP-%EC%9B%B9-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D

Http protocol 의 상호작용을 이해하면 다가가기 쉬울 것 같습니다. 

 

 

 

2. 실습

 

Nodejs, React 등... 기본 환경 설정은 했다는 가정하에 진행합니다.

 

 

1. Client( FrontEnd ) 생성

npx create-react-app client 
cd client
npm start

 

저는 proxy_middle_ware 라는 폴더를 생성하고 cd proxy_middle_ware 한 후 위 명령어를 입력하였습니다. 프로젝트를 생성한 후 추가적으로 위 명령어를 입력하면 성공적으로 실행되는 모습을 볼 수 있는데요,

저는 StudyComponent 를 먼저 제작하여 위와 같은 화면이 나왔습니다. 

 

 

2. Server 생성

일단 또 다른 cmd창을 켜주고, client 밖에 server폴더를 제작한 후 아래와 같은 명령어를 입력하였습니다.

npm init -y
npm install express

 

const express = require('express');

const app = express();


const port=5000; 
app.get('/', (req, res) => {
    res.send('Hello Express');
})
app.listen(port, ()=>{console.log(`Listening on port ${port}`)});
app.get('/hello', (req, res) => {
    res.json({ message: 'Hello from the backend!' });
  });

 

 

그리고 위 코드를 server 폴더에 server.js 에다가 작성해주면 npm start로 실행하고 localhost:5000에 접속하면 아래와 같은 모습들이 나오게 됩니다.

 

다시 언급하자면 위의 React사진에서 localhost:3000 임을 볼 수 있고 localhost:5000 은 또 다른 화면을 제공한다는 사실을 알 수 있습니다. Proxy설정을 하기 앞서 유용한 모듈(?)을 설치해보죠!

 

3. Nodemon 설치 및 설정

(server에서 진행)

npm i nodemon

 

package.json 에 추가 작성 ( script 에 test가 존재할 텐데... 그냥 start와 dev만 추가해주세요 )

  "scripts": {
    "start": "npx nodemon server.js",
    "dev": "nodemon server.js"
  }

 

제가 왠만하면 번거로워서 다른건 설치하지 않는데.. 이것만은 항상 설치합니다. ctrl + s 를 하면 서버가 reload됩니다. 이 때 주의할 점은 저는 위에서 server.js로 진행하였는데... 만약 index.js 로 진행하셨다면 위 script의 구문도 맞춰서 바꿔주세요.

 

아! 참고로 저는 cmd 창 2개를 사용하고 있습니다. ( React / Node )

 

4. Http-Proxy-MiddleWare 설정

 

일단 왜 Proxy를 연결해야 할까요..? 그냥 port만 다른것 뿐인데... axios하는데 문제가 없지 않나... 싶지만, 네.. 구~지 안해줘도 되긴 하는데... (후에 Cors 설정만 잘 하면) 매번 localhost:5000 를 입력해서 접속하기 귀찮아서.. 인데요. 그래도 간단하니깐 빨리 진행해보죠.

 

(client cmd)

npm i http-proxy-middleware

 

 

client/src 에 setupProxy.js 생성하고

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = (app)=>{
    app.use(
        "/api",
        createProxyMiddleware({
            target:"http://localhost:5000",
            changeOrigin: true
        })
    );
};

만 입력해주면 됩니다! 그러면 평소에는 문제없이 진행되다가.. localhost:3000/api/~ 할 때 localhost:5000 으로 접속하게 됩니다. 이렇게 제작하면 한 사이트의 기능을 사용하는 것 같고.. axios하기도 편하거든요!

 

 

localhost:3000/api 지만 사실은 localhost:5000 에 접속해서 res를 받아와서 출력한 것 입니다. 간단하죠?

 

---

 

오늘은 간단하게 React / Express 서버에 대해 소개하고 Proxy설정을 해봤는데요. 이제 이 환경에서 포스팅을 진행할 것이며 다음에는 React에서 State가 어떻게 작동하고 주의할 점, 그리고 React Hook 을 이용한 최적화 기술들에 대해 포스팅해보겠습니다. 

 

아직 미숙하기 때문에 만약 틀린 부분이나 이상한 것 같다 하면 바로 댓글에 작성해주시면 감사하겠습니다!