[React] Node.js와 연동하기: 값 주고 받기

Front-end와 Back-end

React는 클라이언트를 만드는 프레임워크에 해당됩니다. 따라서 사용자가 보는 화면을 만드는 작업에 직접적으로 관여한다는 점에서 프론트엔드에 해당하고 작업이 직관적입니다. 그렇지만 이렇게 만든 클라이언트는 겉으로 보이는 모습만 만든 것이기 때문에, 데이터들을 여기저기서 주고 받으며 조금 더 복잡한 기능을 구현하고자 한다면 웹서버를 개발하여 클라이언트와 웹서버가 통신하게 해야합니다. 이 작업은 사용자들이 눈으로 볼 수 없는 백엔드에서 일어나게 됩니다. 서버는 다양한 언어로 개발할 수 있으며 만약 자바스크립트로 서버개발을 한다면 Node.js가 가장 대표적인 플랫폼입니다.

---

Node.js

• 서버를 개발하는 플랫폼입니다.
• 클라이언트가 서버에 데이터를 요청하거나(GET), 클라이언트가 서버에 데이터를 보내고 업데이트합니다.(POST)
• 단일 스레드 기반, 비동기 방식입니다. 스레드가 요청을 여러개 받고, 요청을 처리하다가 요청이 완료된 순서대로 응답을 보냅니다.
• Express는 Node.js에서 자주 쓰이는 프레임워크입니다. 요청(req)과 응답(res)을 처리하는 함수들을 사용할 수 있습니다.

Node.js 사용 방법

* 기존에 작업하던 리액트 프로젝트가 있다고 가정합니다.

0. node.js를 다운받고 설치합니다.

1. 리액트를 설치한 폴더로 이동합니다.

2. 터미널에서 npm install express를 실행하여 express를 설치합니다.

3. 동일한 위치에 server.js 파일을 생성합니다.

4. server.js에 다음의 코드를 작성합니다.

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

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

5. 터미널에서 node server.js를 실행해서 포트가 제대로 열려져 있는지 확인해봅니다. 터미널에는 listening on 4000이 출력되며 웹브라우저로 http://localhost:4000에 접속하면 Cannot GET 메시지가 출력됩니다.

6. 터미널에서 npm install cors를 실행하여 cors를 설치합니다.

7. 다음의 코드를 이어서 작성합니다. 이 웹서버는 요청을 받으면 "Chris!"라는 응답을 보내고 "My name is..."라는 로그를 터미널에 출력합니다.

//CORS 해결
const cors = require("cors");
app.use(cors());

app.get("/", (req, res) => {
  res.send("Chris!");
  console.log("My name is...");
});

CORS

리액트 클라이언트의 포트는 기본으로 3000으로 설정되어 있고, Node.js의 포트는 4000으로 설정되어 있습니다. 이렇게 포트가 다르면 클라이언트가 서버에 요청해도 브라우저가 보안상의 이유로 차단하게 되는데 이를 Cross Origin Resource Sharing(CORS)라고 부릅니다. 포트 번호가 다른 상황뿐만 아니라 다음과 같은 상황에도 브라우저가 요청을 차단하게 됩니다.

[출처] https://evan-moon.github.io/2020/05/21/about-cors/

8. React 프로젝트의 App.js에 다음과 같이 코드를 작성합니다.

import React, {useState} from "react";

function App() {
  const [data, setData] = useState("Hi!");

  function clicked() {
    fetch("http://localhost:4000/")
      .then((res) => res.text())
      .then((data) => setData(data));
  }

  return (
    <>
      <h1>{data}</h1>
      <button onClick={clicked}>What's your name?</button>
    </>
  );
}

버튼을 클릭하면 웹서버에 fetch 요청을 보냅니다. fetch는 자바스크립트에 내장된 함수이고 기본 기능은 GET입니다.

res로 받은 응답이 res.text()에 의해 텍스트로 변환됩니다.

변환된 텍스트는 data라는 변수로 지칭되며 이 data를 setData(data)에 의해 data에 저장합니다.(React의 Hook 기능입니다☺️)

 

9. 

웹서버로부터 응답을 받아서 띄워주고, 동시에 터미널에도 로그가 남는 모습을 확인할 수 있습니다.

---