조남경(팀장) |
류하준 |
변지윤 |
윤영주 |
이형민 |
김주탁 |
강주희 |
하성화 |
공통 컴포넌트 구현 | API 로직 및 서버 상태 관리 | API 카테고리 별 리스트 페이지 | 영화 상세 페이지 | 영화 검색 페이지 | 홈페이지 구현 | API 카테고리 별 리스트 페이지 | 공통 컴포넌트 구현 |
yarn install
yarn dev
원티드 프리온보딩 프론트엔드 기업협업과제
-
- 영화 트레일러 사이트 만들기
-
- 2022년 9월 6일 ~ 9월 8일
-
- home page
- now playing page
- upcoming page
- top-rated page
- 영화 상세 페이지
- 검색 페이지
- 캐싱
- 캐시란 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 저장 장소를 가리키며, 캐싱은 캐시 작업을 하는 행위를 말합니다.
- 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우 사용합니다.
- 캐싱의 장점
- 캐시에 데이터를 미리 복사해두면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다.
- 캐싱의 단점
- 웹사이트에서 만료되지 않은 캐시 때문에 업데이트 된 파일을 새로 받아오지 않아 웹 사이트의 포맷이 잘못되거나 이미지가 깨지는 등의 이슈가 발생할 수 있습니다.
├─api
├─assets
│ ├─icon
│ ├─images
│ └─svg
├─components
│ ├─common
│ │ ├─Button
│ │ ├─Footer
│ │ ├─GlobalLayout
│ │ ├─Header
│ │ ├─Loading
│ │ └─ScrollToTop
│ ├─home
│ │ ├─Card
│ │ └─Main
│ ├─movieDetail
│ │ ├─DetailContainer
│ │ ├─MovieInfo
│ │ ├─MovieOverview
│ │ ├─MoviePoster
│ │ ├─MovieTitle
│ │ ├─MovieVideo
│ │ └─ProcutionCompany
│ ├─MovieListItem
│ └─search
│ ├─SearchInput
│ └─SearchItem
├─constants
├─hooks
│ └─api
├─pages
│ ├─Home
│ ├─MovieDetail
│ ├─NowPlaying
│ ├─Search
│ ├─TopRated
│ └─Upcoming
├─styles
└─utils
- Loading 상태 표기
- Infinite scroll
- 스크롤 감지하여 ScrollUp button 표시되도록, 누를 시 최상단으로 스크롤 이동
해결방법
- 스크롤 이벤트로 무한 스크롤을 구현하면 리플로우에 의해 렌더링 성능이 저하되기 떄문에 이를 막기위해 IntersectionObserver를 활용하여 무한스크롤을 구현하였다.
- 스크롤 이벤트에서 이벤트가 한번에발생하는 것을 막기위해 throttle을 적용하여 ScrollUp button을 구현하였다.
- API Response 데이터 캐쉬 (SWR 라이브러리 사용)
해결방법
- http request는 axios라이브러리를 사용
- api의 base한 로직은 BaseApiService class로 추상화
- 추상화한 BaseApiService를 기반으로 Movie, SearchApiService class 정의
- 정의한 class를 인스턴스를 바로 생성하여 export
- api 인스턴스를 기반으로 SWR을 이용해 custom hook 생성
- 실제 api를 요청하는 로직에서는 custom hook을 호출만 하면 되는 패턴으로 구현
- 한번에 가져올 데이터 최대 20
- 제목, 포스터 표시
해결방법
- api에서 제공하는 page단위를 이용하여 20개씩 노출하였습니다.
- SWR과 axios를 활용하여 데이터를 노출하였고 이미지 여부에 따라 대체 이미지를 사용할 수 있도록 구현하였습니다.
- 한번에 가져올 데이터 최대 20
- 제목, 포스터, 별점 표시
- 포스터 없는 경우, 대체 이미지 사용
해결방법
- api에서 제공하는 page단위를 이용하여 20개씩 노출하였습니다.
- SWR과 axios를 활용하여 데이터를 노출하였고 이미지 여부에 따라 대체 이미지를 사용할 수 있도록 구현하였습니다.
- 비디오 있는 경우, 페이지 진입 시 자동으로 비디오 플레이
- 제목, 포스터, 별점, 제작 연도, 장르 데이터 활용해서 UI 표기
- 그 외의 데이터 추가 활용 여부는 자유
해결방법
- 제목, 포스터, 별점
- 포스터 없는 경우, 대체 이미지 사용
해결방법
- 제목 기준으로 검색할 수 있도록 api를 활용해 최대 20개씩 검색된 데이터를 노출했습니다.
- 이미지가 존재하지 않는 경우 대체 이미지가 사용되도록 구현했습니다.
- JavaScript
- React
- emotion (CSS-in-JS)
- SWR
- 러닝 커브가 상대적으로 낮으며, 구현하는 앱의 크기가 크지 않아 React-query보다 상대적으로 가벼운 SWR을 캐싱 처리에 도입하도록 하였습니다.