Web dev/기능구현3 Todo 앱 구현하기 1. (회원가입, 로그인) 배포링크 Gyuri's Todo App wanted-pre-onboarding-frontend-liard.vercel.app 깃허브 리포지터리 링크 GitHub - ImGyuriKim/wanted-pre-onboarding-frontend Contribute to ImGyuriKim/wanted-pre-onboarding-frontend development by creating an account on GitHub. github.com 원티드 프리온보딩 지원 과제로 Todo앱을 구현하게 되었다. 백엔드 API는 주어지는 상황이었고, API 문서를 참고하여 - 회원가입 - 로그인 - todo CRUD 이렇게 크게 3가지를 구현하는 과제였다. 먼저, 그 중 회원가입과 로그인 기능을 구현한 과정을 기록해보고.. 2023. 6. 13. TMDB API 이용하여 프론트엔드 페이지네이션 구현하기 - 로직 구상 이전 무한스크롤 구현에 이어, 이번에는 데이터를 사용자가 연속하여 조회하는 다른 방식인 페이지네이션을 구현해보기로 했습니다. 무한스크롤 구현 시 사용했던 TMDB 데이터 API를 그대로 사용하였습니다. 해당 데이터는 page라는 값이 있고 한 page 당 20개의 영화 리스트를 불러오는 형태입니다. 본격적으로 코드를 작성하기에 앞서, 어떠한 로직으로 페이지네이션을 구현할 수 있는지 정리해보았습니다. 1. 한 페이지 당 20개의 영화 데이터를 4X5 형태로 보여주는 화면 구성하기. - 필요한 설정값: currentPage, totalCount, pageCount, limit currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit:.. 2023. 6. 1. Intersection Observer API 이용하여 무한스크롤 구현하기 Intersection Observer API를 이용하여 무한스크롤을 구현하고자 한다. 사용하는 영화 리스트 API 의 데이터 구조는 page 한개 당 20개의 영화 리스트를 담은 배열 형태로 되어있다. 따라서, 한번에 20개의 영화 리스트를 받을 수 있고 그 다음 20개의 영화 리스트를 요청하기 위해서는 fetch 요청 URL에서 page=2 라는 파라미터를 추가해주어야 한다. 이러한 데이터 구조를 보았을 때, 무한스크롤을 구현하기 위해서는 1. Intersection Observer가 맨 아래 요소를 관측함 2. 관측이 확인되면 page 라는 상태 값을 1 증가시킴 3. 의존성 배열로 page 값을 갖는 useEffect 훅을 작성함 -> 해당 훅에서 page 값의 업데이트가 감지되었을 때, 해당 p.. 2023. 5. 29. 이전 1 다음
