[React] 리액트, 노드 연동하기 (프론트, 서버)

React와 nodejs를 이용해 클라이언트와 서버를 같이 실행시키고 통신하는 것을 해보겠습니다.

1. 라이브러리 소개
2. 클라이언트, 서버 주요 코드
3. 실행 전 준비
4. 실행

1. 라이브러리

사용한 라이브러리

#-- 클라이언트에서 사용 --

# Ajax 통신 라이브러리 yarn add axios 
# 서로 다른 포트에서 클라이언트와 서버가 통신 가능하게 함 

#-- root에서 사용 -- 

#리액트와 노드를 함께 실행시켜 사용 가능 
yarn add concurrently

# 변경사항 저장시 반영 
yarn add nodemon

# express yarn add express

2. 클라이언트, 서버 주요 코드

파일 구성

client에 yarn create react-app으로 만든 리액트 패키지가 들어있습니다.
server에는 다른 구성 server.js 파일을 만들어 사용했습니다.


클라이언트는 3000포트에 서버는 5000포트에서 실행하고
클라이언트에서 서버로 get요청을 하고 데이터를 받아와 화면에 띄워보는 예시입니다.

서로 다른 포트에서 통신이 가능하도록 설정해 주어야 하는데 여기서는 가장 간단한 방법을 사용하겠습니다.

리액트의 package.json에 다음을 추가합니다.

"proxy": "http://localhost:5000",

간단한 예시를 위해 위의 설정을 했지만 개인적으로는 다른 방법을 추천드리기에 글을 링크해 놓겠습니다. 

=> 서로 다른 포트 통신 설정 3가지 방법

이제 클라이언트와 서버의 코드를 보고 실행시켜보도록 하겠습니다.
클라이언트 코드 (index.js -> app.js -> dataRequest.jsx)

 

 

// APP에는 여러 router나 provider이 들어간다 가정하고 임의로 <DataRequest/> 컴포넌트를 리턴하도록 했습니다. 
// DataRequest.jsx 
import axios from 'axios'; 
import React, { useEffect, useState } from 'react'; 
const DataRequest = (props) => { 
const [data, setData] = useState('전송실패'); 
// 기본은 data가 전송 실패라고 가정 
useEffect(() => { axios .get('/api/check') // 5000 포트에 서버 실행(proxy 자동설정 때문에 api를 써줘야함)
axios.then((res) => { 
	console.log(res); // 데이터 콘솔에 띄우기 
	setData(res.data); // 데이터 값을 바꿔줌 }); 
}); 
return <h1>{data}</h1>; // 값에 따라 전송 실패 or 전송 성공 출력 
}; 


export default DataRequest;

서버 코드

const express = require('express'); 
const path = require('path'); 
const app = express(); 
const port = 5000; // 포트 넘버 설정 

// 데이터 받아서 전송 예시 
app.get('/api/check', (req, res) => { res.send('전송 성공'); });


app.listen(port, () => console.log(port));

3. 실행 전 준비

1에서 설치한 currently 라이브러리를 이용해 동시에 실행하도록 하겠습니다.
먼저 package.json에서 scripts를 등록해 주어야 합니다.

다음의 코드를 추가해줍니다.
server와 client는 예시를 위해 다른 방식으로 작성했습니다.
server는 nodemon으로 ./server/server.js 를 실행하라 라는 스크립트이고
client는 client로 이동하는게 성공했다면 yarn start를 하라 라는 뜻입니다.
두가지는 터미널을 사용하실줄 아는 분들이라면 입맛대로 사용 가능하실거라 생각됩니다.

 

마지막으로 중요한건 start인데 사실 꼭 start가 아니라 원하시는 문구를 사용하셔도 됩니다.
저는 리액트에서 yarn start를 주로 사용해 통일성있게 start라고 작성했습니다.
(참고로 리액트 package.json에서는 "start": "react-scripts start" 입니다.)
start에서 --kill-others-on-fail 옵션은 하나가 실패하면 나머지도 kill 하는 옵션입니다.

"scripts": { 
	"server": "nodemon ./server/server.js", 
	"client": "cd client && yarn start", 
	"start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" 
}

자 이제 준비가 끝났습니다.

4. 실제 실행

이제 루트 directory에서 yarn start를 입력하시면 위에서 작성한 스크립트가 실행되어 동시에 실행됩니다.

아마 자동으로 localhost:3000이 켜지실텐데 다음과 같은 화면이 뜨면 성공입니다.

localhost:5000으로 접속하시면 아무 화면이 나오지 않는데 server.js에서 라우팅을 해주지 않아서 그렇습니다. 정상입니다.
만약 뭐가 뜨는걸 원하신다면 나중에 정리해 보겠습니다..


지금까지 리액트와 노드를 간단하게 연결해 보았습니다.