강의랑 강의 자료랑 내용이 다른 것 같아요
강의자료에서는 강의랑은 달리 ejs 코드도 나와있지 않고
https://github.com/comelulu/NCS-ExpressJS-Part1/tree/main/44_memos-route-2-create
자료에는 /add라는 라우트도 안 적혀있습니다.
回答 1
1
안녕하세요 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")); // 뷰 파일 경로 설정
학습 흐름이 끊기게 해 드려 다시 한번 죄송한 마음을 전합니다. 해당 내용은 강의 자료에도 즉시 업데이트하여 다른 분들도 혼란을 겪지 않도록 조치하겠습니다.
실습하시면서 추가로 궁금한 점이나 잘 안되는 부분이 있다면 언제든 편하게 질문 남겨주세요!
3강 질문
0
18
1
스프링부트 서버 에러나요
0
17
1
강의 듣는 중인데,
0
24
1
36강 오탈자가 있는 거 같습니다.
0
20
2
Service Create/Update Record 운용과 Delete Record 미운용의 차이 질문
0
20
1
2강 nodejs 3단계 설명 질문
0
33
1
useEffect와 lifecycle문의
0
26
2
Sequence 관련 질문
1
32
2
이미지 처리 라우트 관련 문의
0
67
2
로그인과 로그아웃 처리 강의 2:00 질문 드려요
0
71
2
27과목 ejs로 todo list 만들기에서 todo를 여러 개 항목 만들었을 때
0
68
2
Express 에러 처리 관련 질문 드려요.
0
82
2
commonJS 방식
0
55
1
EJS 관련 질문드려요
0
85
2
41 번 강좌 이미 있는 가입자 존재하는 경우에서..
0
58
2
jwt
0
59
2
정적 파일 직접 구현하기 강의 수강 후 궁금한 점 질문드립니다!
0
92
2
res.writeHead 질문
0
64
1
readFileSync
0
100
1
ejs 와 어떤 개발언어로 조합해서 사용했을때 성능이 좋을까요?
0
96
1
404, 500 에러 처리 외에 특정 개발 구문에서 에러 발생했을때 찾는 방법이 있을까요?
0
90
1
테스트시 포스트맨 외 테스트 할수 있는 방법이 있을까요?
1
67
1
보안에 취약 한가요?
0
57
1
json 대신 로그인, 회원가입 일때 db 연결 및 data 사용하려면 어떻게 하나요?
0
69
1