[Just Site] 5. React에서 node.js로 요청보내기

자.. 드가보자...
오늘만해도 글 5개째다

---

무엇을 할거냐

현재 3000번 포트에는 프론트엔드 (React)가,
3001번 포트에는 백엔드 (node.js + express)가 돌아가는 중이다.

그래서 프론트엔드에서 백엔드로 인사 메시지 정보를 요청하면, ('/greetings')
백엔드는 메시지를 전송해준다.
그리고 프론트엔드에서는 메시지를 받아서 화면에 출력해줄 것이다.

---

CORS 이슈 해결하기

사실 글을 열심히 적다가 문제가 생겨서 오지게 찾아보다가 왔다.
CORS 이슈는 전부터 여러번 겪었는데 제대로 처리해본 적이 없었다.
그래서 이번에 조사를 좀 열심히 했다.

CORS에 대한 간단한 고찰

 

Authoritative guide to CORS (Cross-Origin Resource Sharing) for REST APIs

---

백엔드에서 요청을 처리하기

우선 just_site_backend에서 /greetings에 대한 요청을 처리할 수 있도록 한다.

just_site_backend/index.js를 다음과 같이 수정한다

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3001;

app.use(cors({
  origin: 'http://localhost:3000', // 허락하고자 하는 요청 주소
  credentials: true, // true로 하면 설정한 내용을 response 헤더에 추가 해줍니다.
}));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.get('/greetings', (req, res) => {
  res.send(`Hi, I'm goldenfish diary.`);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

다음과 같이 GET요청을 처리할 수 있도록 하였다.

그리고 'cors' 패키지를 추가해주자

# npm으로 설치
npm install cors

# yarn으로 설치
yarn add cors

---

수정한 내용을 적용해서 Docker Container에 구동시키기

사실 내용이 별로 다를게 없다.
빌드 -> 기존 컨테이너 중지 -> 새 컨테이너 구동

1. 빌드

docker build -t just_site_frontend .

---

2. 기존 컨테이너 중지

Docker Desktop에서 실행중인 Container의 중지 버튼을 누르면 중지된다.

또는, 다음의 커맨드를 실행한다.

# 1. 구동중인 Container의 목록과 CONTAINER ID 확인
docker ps

# 2. 목표 Container 중지
docker stop <CONTAINER_ID>
# 예) docker stop abd39dbcsd9

---

3. 새 컨테이너 실행

docker run -dp 3001:3001 just_site_backend

 

잊지 말자. backend는 3001번 포트를 이용한다.

---

새 서버 확인하기

자, 이제 '/greetings'요청을 처리하는지 확인해보자.

http://localhost:3001/greetings로 접속하면 된다.

다음과 같이 잘 된다.

---

React에 axios 설치

이제 프론트엔드에서 요청을 보내서 메시지를 받으면 된다.
그 전에 우리는 axios패키지를 이용할 것이다.

이 axios패키지는 서버에 요청을 보낼 수 있는 패키지다.

just_site_frontend 폴더에서 다음의 커맨드를 실행한다.

# npm을 이용한 설치
npm install axios

# yarn을 이용한 설치
yarn add axios

---

axios로 요청 보내기

just_site_frontend/src/App.tsx 파일을 다음과 같이 수정한다.

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

function App() {
  const [greetings, setGreetings] = useState<string>("");

  useEffect(() => {
    axios.get("http://localhost:3001/greetings")
      .then(function (response) {
        console.log(response)
        setGreetings(response.data);
      });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {greetings}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

frontend 서버를 켜보면 다음과 같이 된다. (backend가 구동되고 있다면)

---

Frontend도 Docker Container에 업데이트 시켜주면 된다.

요렇게 나란히 돌아가고 있다