1. [할 일 메모 사이트] - 준비 단계
   1) 할 일 메모 사이트
2. 할 일 추가하기
3. 할 일 목록 보기
4. 할 일 내용 변경하기
5. 할 일 순서 변경하기
6. 할 일 완료하기
7. 할 일 완료 해제하기
8. [할 일 메모 사이트] - API 서버 준비하기
   1) [할 일 메모 사이트] 프로젝트 초기화하기
   먼저, 프로젝트 폴더를 생성하고 express, mongoose 라이브러리를 설치합니다.

프로젝트를 초기화합니다.

yarn init -y

express와 mongoose를 yarn을 이용해 설치합니다.

yarn add express mongoose
​
yarn을 이용해 생성된 package.json 파일에서 type을 module로 꼭! 변경해주세요! 😉​
이 설정은 프로젝트에서 ES6 모듈(import/export)을 사용할 수 있도록 설정해줍니다!
// package.json

{
"name": "todo-list",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module",
"dependencies": {
"express": "^4.18.2",
"mongoose": "^7.4.0"
}
}
할 일 메모 사이트 - app.js
import express from 'express';

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

// Express에서 req.body에 접근하여 body 데이터를 사용할 수 있도록 설정합니다.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const router = express.Router();

router.get('/', (req, res) => {
return res.json({ message: 'Hi!' });
});

app.use('/api', router);

app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!');
});
3) 할 일 메모 사이트 프론트엔드 파일을 서버에 추가
내 프로젝트 폴더 이름
├── app.js
├── assets
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── robots.txt
│ └── static
│ ├── css
│ │ ├── main.6842b365.chunk.css
│ │ └── main.6842b365.chunk.css.map
│ └── js
│ ├── 2.96129310.chunk.js
│ ├── 2.96129310.chunk.js.LICENSE.txt
│ ├── 2.96129310.chunk.js.map
│ ├── 3.0962e34f.chunk.js
│ ├── 3.0962e34f.chunk.js.map
│ ├── main.c5ceafa0.chunk.js
│ ├── main.c5ceafa0.chunk.js.map
│ ├── runtime-main.2ec3457b.js
│ └── runtime-main.2ec3457b.js.map
├── package-lock.json
└── package.json

• 4) assets 파일을 서빙할 수 있도록 static 미들웨어를 추가합니다.
  프론트엔드 파일을 담고있는 assets 폴더를 Express 서버에서 접근할 수 있도록 정적 파일 미들웨어를 사용,