[React] CRUD 블로그 만들기 - 1. 백엔드

프로젝트 목적: React 프로젝트로 CRUD 게시판 만들기.

챕터 1. 백엔드 개발.

 

 

웹 서버 - Koa 프레임워크를 사용했다. Django와의 고민이 있었지만, python을 추가로 설치할 필요 없이 nodejs로 개발할 수 있다는 점이 큰 장점으로 작용했다. 

백엔드 라우팅은 Koa-router를 사용하여 다른 주소로 요청이 들어올 때 다른 작업 처리하도록 했다.

REST API를 사용하여 직접 데이터를 변경하지 않고 클라이언트와 DB 사이에 REST API(서버)를 두어 작업을 처리했다. (요청 종류에 따라 다른 HTTP 메서드 사용함. 포스트 작성: POST, 포스트 목록 조회: GET, 포스트 삭제: DELETE, 포스트 업데이트: PATCH ... )

 

폴더 / 파일 관리:

폴더 - 라우팅 종류를 구분하기 어렵기 때문에 폴더를 따로 만들어 사용하기 편하게 만들어 주었다. (전체 라우트 처리: api/ 포스팅 관련: api/posts/ , 회원관리 관련: api/auth/)

파일 - 라우트 처리 함수들을 모아놓은 컨트롤러 파일(auth.ctrl.js / posts.ctrl.js)과 함수를 불러와 라우트에 연결하는 index.js 파일로 분리해주었다.

 

---

 

 

DB - NoSQL DB인 MongoDB를 사용했다. (테이블마다 같은 스키마를 가지고 있는 RDBMS와는 다르게, NoSQL은 한 컬렉션 안에서 다른 스키마를 가진 문서들이 공존할 수 있다.) 댓글 기능을 포스트 문서 내부에 넣는다던가, 이후 추가할 기능의 확장성 면을 생각하여 선택.

mongoose(MongoDB기반 ODM(Object Data Modeling))를 사용하여 DB 객체들을 JS 객체처럼 사용 가능하도록 했다.

---

포스팅 관련:

{title, body, tags, publishedDate} 네 가지 필드가 있는 Posts 스키마와 모델을 만들어주었다.

포스팅 생성, 조회, 특정 포스팅 조회, 삭제, 수정 기능을 구현. 

ObjectId 검증(같은지), Request Body 검증(필수 필드가 모두 있는지 미들웨어 작업)을 통해 에러 시 status 400으로.

페이지네이션 기능 - 포스트 역순, 보이는 개수 제한, 페이지 기능, 마지막 페이지 번호 알려주기.(sort, limit, skip) + 내용 길이 제한 기능

 

회원 인증 시스템 관련:

토큰 기반 인증 시스템 (장점: 사용자 로그인 정보를 기억하기 위한 리소스가 적음, 사용자쪽에서 로그인 상태 토큰을 가지고 있으므로 서버끼리 상태를 공유할 필요 없음, 관리하기 편함) 사용.

{username, hashedPassword} 두 가지 필드가 있는 User 스키마와 모델을 만들어주었다.

회원가입, 로그인, 로그인 확인, 로그아웃 기능을 구현.

토큰 발급(쿠키에 담아), 토큰 검증(쿠키 토큰 있는지 미들웨어 작업) 처리.

로그인 시에만 포스팅 생성/수정/삭제 가능하도록 로그인 상태 확인 미들웨어 작업 후 라우터에서 사용, 포스트 작성 시 사용자 정보 넣고, 수정/삭제 시 권한 확인하기.

특정 포스팅 필터링 기능 - 유효한 username, tags로 query 객체 선언.

---

라이브러리 - 

dotenv: 환경변수들을 파일에 넣고 편리하게 관리했다.

esm: nodejs에서 import / export 문법을 사용했다.

@hapi/joi: 객체를 검증했다.

bcrypt: 해시로 패스워드 저장. 

jsonwebtoken: JWT 토큰 발급, 검증.

nodemon: 서버를 매번 재시작하는 번거로움 해결.

Es-lint: 문법 검사.

prettier: 코드 정리.

 

그 외 사용한 툴 -

Postman: POST, GET, DELETE, PATCH api를 입력하여 테스트했다. 커스텀 Header(사용자 인증 비밀번호 해시를 담을 쿠키)를 확인하거나, Body에 값이 잘 들어갔는지나, Status를 확인할 수 있어 유용하다.

MongoDB Compass: MongoDB를 GUI로 확인할 수 있다. 실제 DB에 값이 어떻게 들어오는지 눈으로 확인할 수 있어서 편리하다.

---

해결한 오류 -

HTTP Status 405 Method now allowed: POST -> GET로 Request Method를 매칭을 시켜주어야 한다. 

posts API에 회원 인증 시스템(auth) 적용 오류: 다른 계정 포스팅 지우려고 할때 403이 아닌 404 에러 뜸: 해결! userID가 아니고 ObjectID라는 걸.. 잊지 말자.

---

이제 드디어 프론트 개발이다! 신난다.

곧 프로젝트 완료하면 README.md 정리해서 올릴 예정... 커밍쑨.