Express로 todo 리스트 만들기 1

Express로 todo 리스트 만들기

1. Express로 todo 리스트 만들기

• Express를 사용하여 todo 리스트를 만들어 봅시다!
• #1. git에 올릴 repository와 작업할 폴더를 만들어 줍시다. (저는 todo-backend-2024-02라고 만들었습니다.)
• #2. VSCode에 다음과 같이 입력하여, express를 설치해줍니다.

npm i express

 

• #3. 설치가 완료되었으면, package.json 파일에 다음과 같이 입력하여 import를 사용할 수 있게 설정합니다.

{
  "dependencies": {
    "express": "^4.18.2"
  },
  "type" : "module"
}

 

• #2. 그 다음, app.js 파일을 생성한 후, 다음과 같이 입력해 줍니다.

import express from "express";

const app = express();
const port = 3000;

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

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

 

    → 그러고 nodemon app.js라고 입력하면 다음과 같이 정상적으로 출력되었음을 확인할 수 있습니다.

 

• #4. 이제 XAMPP 컨트롤 패널로 MySQL를 킨 후, SQLyog로 들어가서 다음과 같이 입력하고 실행해 줍니다.

# todo_2024_02 DB 생성
DROP DATABASE IF EXISTS todo_2024_02;
CREATE DATABASE todo_2024_02;
USE todo_2024_02;

# todo 테이블 생성
CREATE TABLE todo (
    id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
    reg_date DATETIME NOT NULL,
    update_date DATETIME NOT NULL,
    user_code CHAR(50) NOT NULL,
    `no` INT UNSIGNED NOT NULL,
    perform_date DATETIME NOT NULL,
    content VARCHAR(200) NOT NULL,
    is_completed TINYINT UNSIGNED NOT NULL DEFAULT 0
);

# user_code와 no의 조합에 대해서 unique 설정
ALTER TABLE todo ADD UNIQUE INDEX(`user_code`, `no`);

# 데이터 생성
INSERT INTO todo
SET reg_date = NOW(),
update_date = NOW(),
user_code = 'localhost',
`no` = 1,
perform_date = NOW(),
content = '기상';

INSERT INTO todo
SET reg_date = NOW(),
update_date = NOW(),
user_code = 'localhost',
`no` = 2,
perform_date = NOW(),
content = '조깅';

INSERT INTO todo
SET reg_date = NOW(),
update_date = NOW(),
user_code = 'localhost',
`no` = 3,
perform_date = NOW(),
content = '공부';

SELECT * FROM todo;

 

• #5. 다시 VSCode로 돌아가 db.sql 파일을 생성한 후, sql에서 입력한 것을 복사 붙여넣기 합니다.

 

2. CORS

• 이번엔 CORS를 허용하여 작업해봅시다.
• CORS(Cross-Origin Resource Sharing)란? 악의적인 웹 사이트가 다른 사이트에 권한 없는 요청을 보내는 것을 방지하기 위한 웹 브라우저의 보안 기능입니다.
• CORS 미들웨어를 설치하여, 웹 브라우저에서 발생하는 다른 출처에서의 요청을 허용해 봅시다.
• #1. VSCode 터미널에 다음과 같이 입력하여 CORS 미들웨어를 설치해 줍니다.

npm i cors

 

• #2. 설치 되었으면, app.js에 들어가서 다음과 같이 입력해 줍니다.

    → 여기서 app.use(cors()); 로 모든 요청에 대해 CORS 미들웨어를 적용시켜 줍니다.

import express from "express";
import cors from "cors";

const app = express();

// CORS 미들웨어 추가
app.use(cors());

const port = 3000;

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

app.get("/todos", (req, res) => {
  res.json([{ id: 1 }, { id: 2 }]);
});

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

 

• #3. 이제 codepen.io로 들어가서 다음과 같이 입력합니다.

fetch("http://localhost:3000/todos")
    .then((data) => data.json())
    .then((data) => {
        console.log(data);
    });

 

    → 그러면, 정상적으로 codepen.io 브라우저에서 localhost의 데이터를 가져올 수 있는 것을 확인할 수 있습니다.

 

3. 정리하며

• 지금까지 express를 이용하여 todo 리스트를 만들기 전, 기본 설정 및 cors 허용 작업을 수행했습니다.
• 다음 시간엔 todo 리스트 데이터 조회 및 삭제에 대해 알아보겠습니다.

express로 todo 리스트 만들기 2

 

※ Git 주소

test용 data 생성 · NewBean0312/todo-backend-2024-02@9965958

CORS 허용 · NewBean0312/todo-backend-2024-02@7c01eda