📌 코드: https://github.com/ebulsok/ALL-LAST.git
📌 결과물: https://port-0-all-last-fao2flc7imovf.gksl2.cloudtype.app/
🔎 프로젝트 소개: 마작 대국의 점수를 기록하는 사이트
🔎 사용한 스택: Node.js(express), MySQL, ejs, Bootstrap
🔎 서비스 내용:
홈
- ‘공개’ 상태인 기록만 보임
- 로그인이 되어있지 않은 경우, 된 경우의 버거 메뉴 내용이 다름
- pagination: pageNum을 query로 전달, MySQL의 LIMIT 사용, 1페이지 당 5개의 기록
회원가입/로그인
- 중복체크: POST 통신 후, 결과에 따라 관련 변수(idChecked, nameChecked) 변경 + alert 창으로 결과 전송
- 유효성 검사: 아이디(4-20 자리의 소문자와 숫자), 비밀번호(4~20자리), 닉네임(1~15자리의 한글, 영문, 숫자)
- 회원가입: idChecked, nameChecked가 모두 true이고, 유효성 검사를 만족했을 경우 백엔드 통신
기록하기
- 닉네임 검색: POST 통신 후, 결과에 따라 관련 변수(p1Checked, p2Checked, p3Checked, p4Checked) 변경 + alert 창으로 결과 전송
- 등록: p1Checked, p2Checked, p3Checked, p4Checked 가 모두 true일 경우 백엔드 통신
마작 로그
- 로그: 로그인 한 유저의 닉네임이 포함된 기록만 출력, 즐겨찾기 되어 있는 경우 별 아이콘이 채워짐
- pagination: pageNum을 query로 전달, MySQL의 LIMIT 사용, 1페이지 당 5개의 기록
- 기록 수정: 기록을 수정하거나 삭제할 수 있음
- 별 아이콘: 클릭 시 즐겨찾기 모달 띄움
나의 점수
- 백엔드 상에서 날짜와 장소가 일치하는 기록을 배열화하는 방식으로 데이터 정리 후 프론트로 전송
- pagination: pageNum을 query로 전달, MySQL의 LIMIT 사용, 1페이지 당 10개의 기록
즐겨찾기
- 백엔드 상에서 join 후에 즐겨찾기한 기록과 메모를 프론트로 전송
- pagination: pageNum을 query로 전달, MySQL의 LIMIT 사용, 1페이지 당 5개의 기록
- 즐겨찾기 수정, 삭제
🔎 담당 파트
- 유저, 기록 CRUD
- DB 설계 및 구축
- 프론트엔드
- 서비스 배포(cloudtype)
🔎 보완해야 할 점
- 추가하고 싶은 기능
- 회원탈퇴, 회원정보 수정: 변경/삭제된 유저의 기록 처리에 대한 고민 필요
- 정렬 방식: 등록순, 특정 순위 기록만 모아보기, 장소별
- 회원가입/로그인: 현재 로컬 방식만 구현해놓음. 간편로그인을 구현할 경우 최초 로그인 시 닉네임을 입력받아야 함
🔎 후기
- 취미와 관련된 주제였기 때문에 개인 프로젝트를 즐겁게 진행할 수 있었다.
- 개인 프로젝트라서 여러가지 제약이 없었다는 장점이 있었다. 하지만 백엔드 개발자를 지망하는 입장에서는 프론트 부분에서 신경 쓸 부분이 상당히 많다고 느꼈다.
- pagination을 처음으로 구현해보았다.
- MongoDB만 사용하다가 처음으로 MySQL을 사용해본 프로젝트이다. 쿼리문이 훨씬 깔끔하다는 점이 좋았고, 데이터의 자료형이 정해져 있다는 점은 장점일 수도 단점일 수도 있지만 이번 프로젝트에서는 문제가 되지 않았다.
- '나의 점수' 데이터 가공하는 부분에 시간을 많이 쏟았다.. 포기할 뻔 했지만 이번 프로젝트의 핵심이라고 생각해서 그럴 수 없었다. 가장 뿌듯한 부분!
