강의랑 강의 자료랑 내용이 다른 것 같아요

안녕하세요 TAESUN님, 먼저 강의 수강 중 자료와 영상 내용이 달라 혼란을 드려 대단히 죄송합니다.

말씀해주신 대로 강의 영상에서는 폼을 입력받는 화면(ejs)과 이를 보여주는 라우트(/add)를 다루고 있는데, 제공해 드린 깃허브 링크와 텍스트 자료에는 해당 부분이 누락되어 있는 것을 확인했습니다. 꼼꼼하게 확인해주신 덕분에 빠르게 파악할 수 있었습니다. 정말 감사합니다.

누락된 새 메모 작성 폼 라우트(GET /add)와 EJS 뷰 파일(views/new-memo.ejs) 코드를 아래와 같이 정리해 드립니다. 이 코드를 기존 프로젝트에 추가하시면 정상적으로 실습하실 수 있습니다.

1. `routes/memos.js` 수정 (GET 라우트 추가)

기존 코드에 router.get("/add", ...) 부분이 추가되어야 합니다. 이 코드가 있어야 사용자가 메모를 입력할 수 있는 화면(HTML 폼)을 볼 수 있습니다.

const express = require("express");
const { v4: uuidv4 } = require("uuid");
const fs = require("fs");
const path = require("path");

const DATA_FILE = path.join(__dirname, "..", "data", "memos.json");
const router = express.Router();

// [추가된 부분] 새 메모 작성 폼 페이지 렌더링 (GET /memos/add)
router.get("/add", (req, res) => {
  res.render("new-memo"); // views/new-memo.ejs 파일을 찾아서 응답
});

// 새 메모 작성 API (POST /memos)
router.post("/", (req, res) => {
  const { title, content, userId } = req.body;
  const memos = JSON.parse(fs.readFileSync(DATA_FILE));

  const newMemo = {
    id: uuidv4(),
    title,
    content,
    userId,
  };

  memos.push(newMemo);
  fs.writeFileSync(DATA_FILE, JSON.stringify(memos, null, 2));

  // 성공 시 목록 페이지나 상세 페이지로 리다이렉트하는 것이 일반적이나,
  // API 테스트 중이라면 JSON 응답을 유지해도 됩니다.
  res.status(201).json(newMemo); 
});

module.exports = router;

2. `views/new-memo.ejs` 생성 (누락된 파일)

views 폴더 안에 new-memo.ejs 파일을 새로 만드시고 아래 코드를 작성해 주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새 메모 작성</title>
</head>
<body>
    <h1>새 메모 작성하기</h1>
    <form action="/memos" method="POST">
        <div>
            <label for="title">제목:</label>
            <input type="text" id="title" name="title" required>
        </div>
        <div>
            <label for="content">내용:</label>
            <textarea id="content" name="content" required></textarea>
        </div>
        <div>
            <label for="userId">작성자 ID:</label>
            <input type="text" id="userId" name="userId" placeholder="UUID 입력" required>
        </div>
        <button type="submit">메모 저장</button>
    </form>

    <a href="/memos">목록으로 돌아가기</a>
</body>
</html>

3. 참고 사항 (`index.js`)

EJS 템플릿을 사용하기 위해서는 index.js에 뷰 엔진 설정이 되어 있어야 합니다. 만약 설정되어 있지 않다면 아래 코드를 app.use 부분 윗줄에 추가해 주세요.

// index.js
app.set("view engine", "ejs"); // 뷰 엔진을 ejs로 설정
app.set("views", path.join(__dirname, "views")); // 뷰 파일 경로 설정

학습 흐름이 끊기게 해 드려 다시 한번 죄송한 마음을 전합니다. 해당 내용은 강의 자료에도 즉시 업데이트하여 다른 분들도 혼란을 겪지 않도록 조치하겠습니다.

실습하시면서 추가로 궁금한 점이나 잘 안되는 부분이 있다면 언제든 편하게 질문 남겨주세요!

Inflearn コミュニティ Q&A

1. routes/memos.js 수정 (GET 라우트 추가)

2. views/new-memo.ejs 생성 (누락된 파일)

3. 참고 사항 (index.js)

1. `routes/memos.js` 수정 (GET 라우트 추가)

2. `views/new-memo.ejs` 생성 (누락된 파일)

3. 참고 사항 (`index.js`)