[JS] 데이터를 받아오기 위한 간단한 서버 생성하기

React를 이용한 todolist를 만들다가 데이터를 받아오는 부분을 구현하기 위해서 별도의 서버가 필요한 상황이 생겼습니다.

이 때 좋은 예제를 만들어 주신 분이 계셔서 그 내용을 바탕으로 서버를 구성해보았습니다.

0. 별도의 서버 폴더 만들기

todo-server 폴더를 하나 만듭니다. 이름은 원하시는 대로 만드셔도 상관이 없습니다.

mkdir todo-server
cd todo-server

만든 폴더에 기본적인 express와 cors를 설치합니다.

express : node.js를 편하게 사용하기 위한 웹 애플리케이션 프레임워크
cors : CORS오류를 해결하기 위한 모듈

만약 CORS에 대해서 더 궁금하시다면 아래 공식 문서를 참고하세요!

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라

developer.mozilla.org

npm init -y
npm install express --save
npm install cors

1. 서버 파일 설정

서버를 열기 위해 필요한 app.js 파일을 생성해줍니다.

기존에 사용하는 3000번 포트와 충돌하지 않기 위해 8080번 포트를 사용합니다.

todos 안에 데이터가 들어가게 되고, app.get 내부의 res.send를 통해 데이터를 전송합니다. (주소는 / 입니다!)

두 번째 get에서는 setTimeout을 이용해서 1초 후에 데이터가 반환되도록 했습니다. (주소는 /todo 입니다!)

각각의 주소로 데이터를 fetch 요청하게 되는 경우 해당 데이터를 가져오게 되는 것이죠.

만약 각각의 주소로 직접 접속한다면 해당 데이터가 출력됩니다.

const express = require("express");
const cors = require("cors");
const app = express();
const port = 8080;

const todos = [
  {
    id: 1233,
    title: "리액트 익히기"
  },
  {
    id: 1234,
    title: "롤 다이아 찍기"
  },
  {
    id: 1230,
    title: "부캠 출석체크 하기"
  }
];

app.use(cors());
app.options("*", cors());

app.get("/", (req, res) => res.send("Hello World!"));
app.get("/todo", (req, res) => {
    setTimeout(() => {
        return res.json(todos);
    }, 1000);
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));