YJK Forum은 프론트엔드, 백엔드 경험을 위해 개인적으로 제작한 간단한 게시판 웹 애플리케이션입니다.
- Windows11
- Visual Studio Code
- GitHub
백엔드
- Node.js
- Express
프론트엔드
- React
- TailwindCSS
데이터베이스
- Mysql
인프라
- AWS EC2
프론트엔드부터 백엔드까지 웹 애플리케이션 제작의 전반적인 과정을 경험해보고 학습하는 것을 목표로 시작했습니다.
 |
 |
 |
 |
|---|---|---|---|
| 첫 페이지 | 글쓰기 | 로그인 | 회원가입 |
 |
 |
 |
 |
|---|---|---|---|
| 게시판 | 게시글 보기 | 마이페이지 | 관리페이지 |
 |
 |
 |
 |
|---|---|---|---|
| 모바일 홈 | 모바일 게시글 | 모바일 로그인 | 모바일 마이페이지 |
회원가입
- 회원가입시 비밀번호는 bcrypt를 이용하여 해시 암호화를 적용하고 해시값을 DB에 저장하였습니다.
로그인
- 로그인 시도시 1차적으로 입력된 email로 회원이 존재하는지 확인합니다. 그 다음으로 email이 존재한다면 입력된 비밀번호와 DB에 저장된 회원정보의 비밀번호 해시값이랑 비교합니다.
- 존재하는 email로 로그인을 시도하고 비밀번호가 일치한다면 JWT 토큰을 발행합니다. JWT 토큰은 브라우저의 localStorage에 저장되도록 하였습니다.
- 모든 로그인이 필요한 기능들(글쓰기, 마이페이지 등)은 passport모듈에 JWT Strategy를 사용하여 Authorization 절차를 수행합니다.
글작성
- 글 작성은 로그인한 유저만 가능하도록 설정하였습니다.
- 로그인 되어있다면 글작성 페이지로 넘어가고 그렇지 않다면 로그인 페이지로 이동하도록 하였습니다.
글 수정
- 게시글의 수정은 글 작성자 본인만 가능하도록 하였습니다.
- 로그인 후 마이페이지로 이동하면 내가 쓴 글목록에서 "수정" 아이콘을 클릭하면 글 수정 페이지로 이동합니다. 본인이 작성한 글만 수정이 가능하기 때문에 수정페이지를 불러오기전에 JWT를 통해 검증하였습니다. 수정하려는 페이지의 작성자와 현재 로그인 유저를 비교하여 일치하는 경우에만 수정페이지로 이동합니다.
글 삭제
- 게시글의 삭제는 글 작성자와 관리자가 가능하도록 하였습니다.
- 글 작성자는 마이페이지에서, 관리자는 관리페이지->유저페이지에서 글 목록 옆에 있는 '삭제'아이콘을 클릭하면 게시글이 삭제되도록 하였습니다.
- 삭제기능 또한 JWT를 통해 검증하였습니다. 해당 글의 작성자이거나 관리자일 경우에만 삭제가 되도록 하였습니다.
게시글 읽기
- 게시글은 로그인하지 않아도 모든 방문자가 읽기 가능하도록 하였습니다.
- 게시글의 조회수 중복 방지를 위하여 조회한 게시글은 쿠키에 추가해주었습니다. 쿠키의 만료일은 해당일의 24:00이기에 하루가 지났을시에는 쿠키는 만료되고 조회수가 다시 증가할 수 있도록 하였습니다.
처음에는 조금 막막했지만 프로젝트 계획을 세우고, 막히는 부분은 공식 문서, 강의 그리고 스택 오버플로우를 참고하며 차근차근 개발해 나갔습니다. 그 결과, 배포까지 완료할 수 있었습니다. 전체적인 웹 개발 프로세스를 경험할 수 있는 정말 뜻깊은 프로젝트였습니다. 프로젝트를 끝까지 마무리하고 나니 나도 할 수 있겠다는 자신감을 얻게 된 동시에 아직 부족한 부분이 많기 때문에 더욱 열심히 해야겠다는 의지를 다지는 계기가 되었습니다.