Vue To React 프로젝트

기술 스택

코드 스타일 통일

1. ESLint + Prettier + husky + lint-staged

2. 커밋 메시지 템플릿 적용

3. PR 메시지 템플릿 적용

PR rule

• 최대 300 line 맥시멈

Commit rule

• 노드 패키지 종속성 추가하는 코드 한 줄이어도 커밋 하나

• 메서드 하나 만들면 커밋 하나

Branch rule

• git-flow 브랜치 전략 사용하기

• feature/movie-component

• feature/page-routing

API 연결

• api 호출 할 수 있도록 기반 코드 작성

기능 명세 작성

use-flow

1. 메인 페이지에 접속한다
• 과거 검색 기록이 있으면 보여주거나, 없으면 빈 페이지 출력
• 영화 리스트 아이템이 보여진다.

2. Search bar 에 검색어를입력한다
• 콤보박스를 통해서 필터링된 영화 리스트 추천 검색어를 보여준다.

3. input 이 변경될 때마다 API 호출 검색 페이지를 출력한다
• 검색어 변경이 있을 때마다API 호출 dedounce 적용

4. filter 기능 추가
• 다양한 filter input 을 넣을 수 있다.

5. 페이지네이션 구현
• 버튼 식으로 구현하기
• 또는 Intersection Observer 로 무한 스크롤

6. 영화 아이템을 클릭하면, 영화 상세 페이지를 보여준다
• 페이지로 구현하기
• 별점 기능
• parallax-scrolling 구현
• 감독, 배우 구글 검색 연결

할 일 우선 순위

• 매일 있었던 일 보고하기

1. API 세팅 및 연결(axios) - 승희님!
feature/axios-setting
feature/context-api
• axios 추가
• Context API + custom hook
• 모듈화

2. Searchbar 컴포넌트 - 혜진님!
feature/search-bar-component
• Search 기능???
• event handler???
• enter 키를 통해 검색 페이지 출력
→ 캔디(콤보) 박스 컴포넌트도 만드는 것으로
• 콤보박스는 debounce

3. Movie List 컴포넌트 - 원지님!
feature/movie-list-component
• Movie Item 컴포넌트 만들기
→ 페이지 네이션(페이지 넘버 또는 무한 스크롤 원하는 대로)
→ 가능하다면 반응형도…?

4. 영화 상세페이지 (CSS가 약한 사람) - 노철님!
• id 는 라우터를 통해 받도록(params)
• 별점 컴포넌트
• parallax-scrolling 구현
• 보여지는 디자인은 각자 알아서

5. 라우팅 기능(brower-router 또는 원하는 라이브러리 사용) - 지성님!
• 라우팅 학습
• 라우팅 기능도 모듈화 할 수 있다면 좋을 것 같아여
• main 페이지의 검색 기록 토대로 API 요청
• Not Found 페이지 처리
• 로딩 컴포넌트 만들기

후순위

1. 필터링 기능

2. 검색 기록

3. 정렬 기능 (Gird → Flex view)

네이밍 규칙

변수명 규칙

• 컴포넌트는 꼭 propTypes 추가하기

• 주석을 지양하고, 주석 없이도 이해할 수 있는 메서드를 작성하려고 노력하기

• 컴포넌트 내부에만 사용되는 상수는 파일 상단에 위치

꼭 지켜야하는 것은 아니지만, 지키면 좋을 클린 코드 규칙

• 함수는 최대한 하나의 일만 할 수 있도록

• 함수는 10라인 이상 작성하는 것은 지양하기

• 함수 depth 는 3 depth 이상은 지양하기

url

UI 를 부르는 이름

• Searchbar

• MovieList(ul) + MovieListItem(li)

• CandyBox

• handleClick - onClick

CSS

• emotion

• mixin variables 추가하기

• BEM 표기법 사용