Express로 게시판 개발하기

🐣 Express 첫 걸음

Express는 웹 어플리케이션 프레임워크다. Nodejs 기반으로 만들어진 프레임워크로 자바스크립트로 서버 개발이 가능해서 프론트엔드 개발자인 나도 어렵지 않게 서버 개발 경험을 해볼 수 있었다.

Express를 익히기 위해 혼자서 게시판 프로젝트를 진행했는데, 서버 개발을 하면서 DB연동도 하고 sql로 간단한 쿼리도 작성하면서 정말 즐거웠다!

📚 게시판 프로젝트 목표

• CRUD 기능 개발
• Middleware 사용
• REST Client로 API 테스트
• Database 연동
• JWT로 토큰 발급
• crypto로 비밀번호 암호화
• CORS 라이브러리를 사용해 SOP(same origin policy) 처리
• vscode로 디버깅

간단해보이는 게시판 프로젝트여도 알아야 할 것들이 정말 많았다. 나는 기본적으로 서버를 구현할 때 알아야 한다고 생각되는 것들을 목표로 하고 구현해 나가면서 공부했다.

웹 프론트엔드 개발을 하면서는 디버깅을 많이 안했었는데, 사실 디버깅을 하지 않고 매번 console.log로 들어오는 파라미터 값들을 확인하는건 꽤 번거롭다. 그래서 express로 서버 개발을 하면서는 vscode의 디버깅 기능을 꼭 사용해보겠다고 마음 먹었는데, 생각보다 디버깅 방법이 간단했다.

📃 어플리케이션 요구 사항

요구 사항을 직접 설정하고 개발을 시작했다. 복잡한 어플리케이션이 아니여서, 간단하게 설정했다.

• 로그인, 회원가입 기능
• 로그인 여부에 상관없이 글 조회 가능
• 로그인 한 사용자만 글 생성 가능
• 본인 글만 수정, 삭제 가능

📁 Database Table

테이블은 사용자 정보를 저장할 users와 글 정보를 저장할 posts 두 개가 있다.

users Table

컬럼명	Data Type	Not Null
id	varchar	✔
name	varchar	✔
password	varchar	✔
salt	varchar	✔

posts Table

컬럼명	Data Type	Not Null
id	varchar	✔
user_id	varchar	✔
title	varchar	✔
content	varchar	✔
created_on	varchar	✔

👋 게시판 앱 소개

📌 게시판 페이지

디자인은 간단하게 했다. 글 조회는 로그인 없이 가능하지만, 글 작성 및 수정 삭제 기능은 로그인을 해야 가능하다.

Token에 사용자 정보를 담아서, 글 작성자와 글 수정 삭제를 요청하는 사용자가 같을 경우에만 요청을 처리해준다.

📌 글 상세 페이지

제목, 작성자, 작성일시, 내용을 조회해서 보여주는데 글 조회를 요청한 사용자와 글을 작성한 사용자가 같을 경우에만 수정, 삭제 버튼이 보이도록 했다.

이미 개발을 마친 상태이지만, 개발 과정을 기록해두고 싶어서 velog에 시리즈로 포스팅 할 예정이다.