React프로젝트에 웹서버(node.js) 구축

서버디렉토리 만들기

프로젝트폴더에 server용 코드를 위한 디렉토리와 비어있는 server.js파일을 먼저 생성합니다.

 

 

 

Express모듈 설치하기

React에서 만들어진 작업물은 클라이언트단에서 동작하는 파일들입니다. 여기에 서버(node.js)를 구축하기위해 서버관리모듈 Express를 프로젝트폴더에 설치합니다. 

npm install express

yarn add express

 

 

설치가 완료되면 package.json을 열어 잘 추가되었는지 확인해봅니다.

 

 

 

Server코드 작성

server.js에 아래 코드를 추가해줍니다. express모듈을 불러와 app변수를 통해 포트번호를 할당하고 localhost:4000/으로 접속시(접속경로: app.get('/')) 확인용 응답메시지를 출력합니다.

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4000;

app.get('/', (req, res) => {
    res.send('Server Response Success');
})

app.listen(PORT, () => {
  console.log(`Server On : http://localhost:${PORT}/`);
})

(console확인부분에 따옴표 `가 '와 다르므로 조심해주세요.)

 

 

 

Server실행

server.js파일이 있는 경로로 이동하여 아래 실행코드를 입력해줍니다.

node server.js

 

 

브라우저를 통해 확인 

http://localhost:4000/로 접속하여 정상적으로 응답메시지가 출력되는지 확인합니다.