3. 디렉터리 구조
BACKEND
1. 주제 선정 이유
•
왓챠 플레이 유저로서, 평소 사용하던 서비스를 직접 개발
•
SPA 라우팅과 상태 관리의 동작 원리 이해 및 구현
•
회원가입, 로그인, 로그아웃의 유저 관리
•
외부 API 사용 (The Movie Database)
2. 프로젝트 인원
•
4명 (서대원, 이승연, 이본행, 조나현)
3. 일정
프로젝트 기간 2021-12-10 ~ 2021-12-22 (13일)
4. 기술 스택
BACKEND
•
express
•
jwt
•
bcrypt
FRONTEND
•
webpack (babel)
•
d3.js
3. 디렉터리 구조
BACKEND
•
bin/www : express 환경 설정
•
config : 외부 모듈/라이브러리 환경 config
•
controllers : 데이터 유효성 체크 및 dao 호출, 요청 / 응답
•
dao : models에 직접적으로 접근하여 데이터 변경
•
models : 데이터
•
middleware : 미들웨어
•
routes : 라우터
•
utils : 공통적으로 사용하는 유틸리티 함수 및 외부 라이브러리
•
MVC 구조
FRONTEND
•
index.html: 기본 마크업 및 외부 소스 (아이콘) 연결
•
index.js: SPA App 생성 (entry)
•
router.js: 라우팅 구현
•
App.js: path 별 페이지 생성 및 history state 관리
•
pages: 각 페이지 별 상태 관리 및 이벤트 핸들러 바인딩
◦
pages/initialState: 초기 상태 값
•
eventListeners.js: 모든 페이지에서 발생하는 공통 이벤트 핸들러 바인딩
•
components: 레이아웃 및 라우팅 이벤트 핸들러 바인딩
•
services: 서버 API 호출 (GET, POST, PATCH, DELETE)
•
utils: 공통적으로 사용하는 유틸리티 함수
•
flux 구조
•
props를 통한 단방향 데이터 흐름
•
MVC 단점(양방향 데이터 흐름의 경우 상태 관리 복잡도 ↑)을 보완
4. 구현
공통
•
로고 클릭 시 홈 이동
•
영화 검색
•
로그인 / 회원가입
◦
잘못된 이메일/비밀번호로 로그인 시도 시 로그인 불가
◦
이미 존재하는 닉네임 및 이메일로 회원가입 시도 시 회원가입 불가
◦
로그인 시 헤더가 마이페이지 / 로그아웃 변경
•
포스터 클릭 시 디테일 페이지 이동
•
캐러셀 UI
◦
캐서셀 양 끝에 마우스 커서 호버 시 좌우 이동 버튼이 나타남
Home
Movie Detail
•
평점 및 코멘트 CRUD
◦
비로그인 시 로그인 모달 창 팝업
◦
로그인 시 이미 해당 영화에 등록한 평점이 있을 경우 그 평점을 화면에 렌더링 (GET)
◦
평점 최초 클릭 시 해당 평점을 등록 (POST)
◦
다른 평점 클릭 시 평점 수정 (PATCH)
◦
이미 평가한 점수와 같은 평점을 클릭한 경우 평점 삭제 (DELETE)
•
평점 그래프 및 코멘트
◦
평점 그래프: 본인을 포함한 해당 영화의 모든 별점 시각화, 가장 높은 평점에 하이라이트
◦
코멘트: 본인을 포함한 해당 영화의 모든 코멘트를 캐러셀로 표현
•
영화 상세 정보
◦
영화 제목, 개봉 연도, 장르, 제작 국가, 상영 시간, 상영 등급, 줄거리 및 출연진
•
같은 장르 영화 추천
Movie Search
•
영화 검색 결과를 캐러셀로 표현
My Page
•
사용자가 평점을 남긴 영화 리스트를 캐러셀로 표현
