Node.js & Express을 사용하여 게시판을 만들었습니다.
초보자 분들을 위해, DB는 Mongoose(MongoDB), SQL, Sequelize를 사용한 게시판 샘플을 만들어봤습니다..
약간의 도움이나마 되었으면 좋겠습니다. (향후 야금야금 여러 기술들을 추가해볼 생각입니다)
| Tech | Description | Version |
|---|---|---|
| express | 웹 프레임워크 | 4.17.2 |
| mongoose | MongoDB ODM | 6.1.8 |
| mongoose-sequence | mongoose lib | 5.3.1 |
| mysql2 | MySQL | 6.1.8 |
| sequelize | MySQL ORM | 6.17.0 |
| sequelize-cli | sequelize-cli | 6.4.1 |
| ejs | 템플릿 엔진 | 3.1.6 |
| bcrypt | 비밀번호 암호화 | 5.0.1 |
| joi | 유효성 검사 | 2.8.5 |
| cors | 교차 리소스 공유 | 2.8.5 |
| dotenv | 환경변수 관리 | 16.0.0 |
| jsonwebtoken | 서명 암호화 | 8.5.1 |
| prettier | 클린 코드 | 2.6.1 |
| eslint | 클린 코드 | 8.13.0 |
| eslint-config-prettier, eslint-plugin-prettier |
eslint, prettier 충돌방지 | 8.5.0, 4.0.0 |
- 혹시 RDS를 사용하고 싶으신 분이 계시다면, 아래의 링크를 참고하여 도전해보세요-! 순서대로 최대한 자세하게 적어놨습니다
☺️ - RDS란 무엇인가 (https://haksae.tistory.com/208)
- RDS 셋팅 및 EC2와 연동하기 (https://haksae.tistory.com/207)
- Workbench로 RDS 연결하기 (https://haksae.tistory.com/209)
- 프로젝트 클론
$ git clone https://github.com/Haksae90/Board_sample_on_node-express.git- 패키지 설치 (1-3번 중에 원하는 환경을 선택하세요)
$ cd Board_sample_on_node-express
$ cd 1.\ on\ Mongoose
$ npm install- 환경변수 설정
- .env 설정
// 1-3번 폴더 안에 .env 파일 생성 후 아래의 내용을 기입 후 저장해주세요.
1. on Mongoose
PORT='원하는 포트 설정'
TOKENKEY='원하는 JWT 토큰 값 설정'
MONGO_URL='원하는 몽고 DB URL 설정' ex) 'mongodb://localhost:27017/board_project'
2. on MySQL
PORT='원하는 포트 설정'
TOKENKEY='원하는 JWT 토큰 값 설정'
mysql_host='프로젝트 환경의 HOST 주소'
mysql_user='프로젝트 환경의 MySQL ID'
mysql_password='프로젝트 환경의 MySQL 패스워드'
mysql_database='연결할 DB명'
3. on Sequelize
PORT='원하는 포트 설정'
TOKENKEY='원하는 JWT 토큰 값 설정'
- Sequelize config 설정
// sequelize는 추가로 config 설정을 해주셔야합니다.
sequelize cli 설치
$npm i sequelize sequelize-cli sqlite3
sequelize CLI를 사용하여 config, 테이블 생성 및 마이그레이션, 테이터 추가
$npx sequelize init
// config 파일을 생성됐다면 config를 설정해주세요. 메인 디렉토리에서 config 폴더 안에, config.json 파일을 아래와 같이 셋팅해주시면 됩니다
{
"development": {
"username": "프로젝트 환경의 MySQL ID",
"password": "프로젝트 환경의 Password",
"database": "연결할 DB명",
"host": "프로젝트 환경의 HOST 주소",
"dialect": "mysql"
},
// 서버를 돌리기 전에 sequelize로 DB 생성하는 것도 잊지마셔요
데이터베이스 생성
$npx sequelize db:migrate
- 회원 가입 페이지
- 회원가입 버튼을 클릭하기
- 닉네임, 비밀번호, 비밀번호 확인을 입력하기
- 닉네임은
최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)로 구성하기 - 비밀번호는
최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패로 만들기 - 비밀번호 확인은 비밀번호와 정확하게 일치하기
- 데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입니다." 라는 에러메세지를 프론트엔드에서 보여주기
- 회원가입 버튼을 누르고 에러메세지가 발생하지 않는다면
로그인 페이지로 이동시키기
- 로그인 페이지
- 로그인, 회원가입 버튼을 만들기
- 닉네임, 비밀번호 입력란 만들기
- 로그인 버튼을 누른 경우 닉네임과 비밀번호가 데이터베이스에 등록됐는지 확인한 뒤, 하나라도 맞지 않는 정보가 있다면 "닉네임 또는 패스워드를 확인해주세요"라는 메세지를 프론트엔드에서 보여주기
- 로그인 버튼을 눌러서 에러 메세지가 발생하지 않는다면
전체 게시글 목록 조회 페이지로 이동시키기
- 로그인 검사
아래 페이지를 제외하고모두 로그인 한 경우만 볼 수 있도록 하기- 회원가입 페이지
- 로그인 페이지
- 게시글 목록 조회 페이지
- 게시글 조회 페이지
- 로그인을 하지 않거나 올바르지 않은 경로로 접속한 사용자가 로그인이 필요한 경로에 접속한 경우 "로그인이 필요합니다." 라는 메세지를 프론트엔드에서 띄워주고
로그인 페이지로 이동시키기 - 로그인 한 사용자가 로그인 페이지 또는 회원가입 페이지에 접속한 경우 "이미 로그인이 되어있습니다."라는 메세지를 띄우고
전체 게시글 목록 조회 페이지로 이동시키기
- 게시글 조회 페이지 > 댓글 목록 조회
- 로그인 하지 않은 사용자도 댓글 목록 조회가 가능하도록 하기
- 현재 조회중인 게시글에 작성된 모든 댓글을 목록 형식으로 볼 수 있도록 하기
- 댓글 목록 위에 댓글 작성란 만들기
- 댓글 작성에 관한 기능은 5번 요구사항으로 연결하기
- 댓글 목록 중, 내가 작성한 댓글인 경우 댓글 수정, 댓글 삭제 버튼 만들기
- 댓글 수정 버튼을 누르면 6번 요구사항으로 연결하기
- 댓글 삭제 버튼을 누르면 7번 요구사항으로 연결하기
- 제일 최근 작성된 댓글을 맨 위에 띄우기
- 게시글 조회 페이지 > 댓글 작성
- 로그인 한 사용자만 댓글 작성이 가능하도록 하기
- 게시글 조회 페이지 하단에 댓글 내용을 입력할 수 있는 댓글 작성 버튼 만들기
- 로그인 하지 않은 사용자가 댓글 작성란을 누르면 "로그인이 필요한 기능입니다." 라는 메세지를 띄우고
로그인 페이지로 이동시키기 - 댓글 내용란을 비워둔 채 댓글 작성 버튼을 누르면 "댓글 내용을 입력해주세요" 라는 메세지를 띄우기
- 댓글 내용을 입력하고 댓글 작성 버튼을 누른 경우 작성한 댓글을 추가하기
- 게시글 조회 페이지 > 댓글 수정
- 내가 작성한 댓글만 수정 가능하도록 하기
- 댓글 본문이 사라지고, 댓글 내용, 저장 버튼 생성하기
- 댓글 내용에는 이전에 입력했던 댓글 내용을 기본 값으로 채우기
- 수정할 댓글 내용은 비어 있지 않도록 하기
- 저장 버튼을 누른 경우 기존 댓글의 내용을 새로 입력한 댓글 내용으로 바꾸기
- 게시글 조회 페이지 > 댓글 삭제
- 내가 작성한 댓글만 삭제 가능하도록 하기
- "정말로 삭제하시겠습니까?" 메세지를 띄우고, 확인/취소 버튼 중 "확인" 버튼을 누른 경우 목록에서 해당 댓글을 삭제하기
- 취소를 누른 경우 삭제되지 않고 그대로 유지하기