👉 화면 확인 : 배포 링크
👉 코드 확인 : 깃헙 링크
영화를 검색하고 즐겨찾기 등록이 가능한 앱
개발자: 정선미
기간: ‘22.5.9 ~ 5.15 (Design + Development)
영화를 검색하는 탭
앱 첫 진입 시, 첫 화면!
처음 검색 결과 영역: "검색 결과가 없습니다."로 노출
검색어 입력 후 검색 버튼 클릭 시 영화 출현
Infinite scroll (by Intersection Observer
)
검색결과 목록을 최하단으로 내렸을 때 API를 이용하여 다음 페이지를 불러와 노출
api response의 key를 camelcase 로 변환 (by camelcase-keys
)
검색 결과 중 영화 클릭 시, 즐겨찾기 등록 or 제거 가능
즐겨찾기 탭에서 조회 가능
"즐겨찾기"된 데이터는 로컬 저장하여, 다음에 접속 했을 때, 즐겨찾기 조회 가능 (by store.js
)
현재까지 즐겨찾기한 영화들의 목록을 보여주는 탭
즐겨찾기 목록 순서를 드래그&드롭으로 조절 가능 (by react-beautiful-dnd
)
한 번에 모든 데이터를 로딩 ( 별도의 페이징 없이 )
"즐겨찾기 해제"를 누르는 순간 해당 영화를 목록과 로컬에서 즉시 제거
windowing (by react-virtualized
)
React 공식 문서 추천 참고. 보이지 않는 컴포넌트는 렌더링 되지 않고 크기만 차지하고 스크롤 되면 렌더링.
Code Splitting (by Loadable Components
)
library 선택 이유: React 공식 문서 추천 참고 (React.lazy
와 Suspense는 아직 SSR이 불가. 또한 Suspense는 실험 단계)
구현 방식: 검색/즐겨찾기 탭, 에러 페이지를 필요한 시점에 불러와 사용. (불러 오는 동안 loading 바 출현)
Intersection Observer (for Infinite scroll)
이 기능은 비동기적으로 실행되기 때문에, scroll
같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용 가능
두 탭 (검색, 즐겨찾기)은 정해진 layout 안에서 데이터만 변경
layout에서는 header, main, footer은 고정되어 있고 uselocation
, 데이터 (각 탭에서 내려주는) 등을 통해 다른 화면을 보여준다.
CSS custom properties (variables)
활용
안녕하세요 구글링하다가 여쭤보고 싶은게 있어서 댓글 답니다!
혹시 즐겨찾기 목록을 어떻게 개발하셨는지 더 자세히 여쭤봐도 될까요?