게시판 CRUD 만들기

이재경·2022년 12월 26일
0

백엔드

목록 보기
2/7

1.Create

게시판은 게시글을 작성 할 수 있어야 함
게시글 작성 시, 제목, 내용, 작성자, 작성시간 등의 정보를 기록
게시글의 제모고가 내용은 최소 n글자 이상이어야 함.

2.Read

게시판은 게시글의 목록과 게시글의 상세를 볼 수 있어야 함
게시글 목록은 제목과 작성자 작성 시간의 간략화된 정보를 보여 줌
게시글 상세는 제목, 작성자, 내용, 작성시간, 수정 시간 등의 상세한 정보를 보여줘야 함

3.Update

게시판의 게시글은 수정이 가능해야 함
게시글 수정 시 제목과 내용이 수정 가능하고, 수정 시간이 기록되어야 함
게시글의 제목과 내용은 최소 n글자 이상이어야 함
게시글 수정은 작성자만 가능해야 함

4.Delete

게시판의 게시글은 삭제가 가능해야 함
게시글 삭제시 목록과 상세에서 게시글이 접근되지 않아야 하며
게시글 삭제는 작성자만 가능해야 함

5.Express.js+Mongoose로 CRUD구현

1.모델 선언하기


MongoDB의 objectID는 URL에 사용하기 좋은 값이 아니기 때문에 대체할 수 있는 아이디를 shortID로 생성

제목,내용,작성자를 String타입으로 스키마에 선언(회원가입 로그인 후 작성자 연동)

timestamps 옵션으로 작성시간, 수정시간을 자동으로 기록해줌

2.shortId


ObjectId를 대체할 shortId타입을 Mongoose Custom Type으로 선언
중복 없는 문자열을 생성해주는 nanoid패키지 활용
default를 이용해 모델 생성 시 자동으로 ObjectId를 대체할 아이디 생성

3.게시글 작성

(1)게시글 작성 흐름
/posts?write=true로 작성 페이지 접근->

이용해 post 요청 전송 -> router.post 이용하여 post 요청 처리 -> res.redirect 이용하여 post 완료 처리

(2)작성 페이지 만들기
./routes/posts.js

./views/posts/edit.pug

(3)post요청 처리하기

4.게시글 목록 및 상세

(1)게시글 목록 및 상세 흐름
/posts로 목록 페이지 접근-> <a href="/posts/:shortId"> 이용하여 상세 URL Link->
router.get('/:shortId') path parameter 이용하여 요청 처리

(2)게시글 목록 구현하기

./routes/posts.js

./views/posts/list.pug

*formatDate 함수 추가하기
app.js

(3)게시글 상세 구현하기
./routes/posts.js

./views/posts/view.pug

5.게시글 수정

(1)게시글 수정 흐름

/posts/{shortId}?edit=true로 수정 페이지 접근 -> 작성 페이지를 수정페이지로도 동작 하도록 작성 -> <form action="/posts/:shortId" method="post">로 post 요청 전송

*html form은 PUT method를 지원하지 않기 때문에 post 사용

(2)수정 페이지 만들기
./routes/posts.js

./views/posts/edit.pug

(3)수정 요청 처리하기
./routes/posts.js

6.게시글 삭제

(1)게시글 삭제 흐름
게시글 상세 페이지에 삭제 버튼 추가 ->html form 은 DELETE 메서드를 지원하지 않음
-> JavaScript를 이용해 fetch 함수로 HTTP Delete 요청 전송 -> router.delete의 응답을 fetch에서 처리

(2)HTTP Delete 요청 전송 및 응답 처리
posts/view.pug

(3)DELETE 요청 처리하기
./routes/posts.js

profile
코딩으로 빛나게

0개의 댓글