React 2

[React] MSW로 API Mocking하기

MSW (Mock Service Worker) 란? Mock Service Worker는 Service Worker API를 사용하여 실제 네트워크 요청을 가로채는 API Mocking 라이브러리입니다. 웹에서 발생하는 실제 HTTP 요청을 가로채, 사용자가 정의한 응답을 Mocking 합니다. 이 과정은 네트워크 레벨에서 이루어지기 때문에, 별도의 코드 수정 없이 실제 서비스와 유사한 환경을 조성할 수 있습니다. ► Mocking이 개발 과정에서 어떻게 도움이 되는가? 개발 과정에서 Mocking은 여러 면에서 도움이 됩니다. 첫째, 개발 초기 단계에 백엔드 API가 완성되지 않은 경우, 백엔드 API에 의존하지 않고 자체적으로 Mocking을 통해 개발을 진행할 수 있습니다. 이를 통해 개발 시간을 ..

FE Study/React 2023.12.06

[React] 무한 스크롤 구현 및 최적화 (Scroll Event)

무한 스크롤(Infinite Scroll)이란? 사용자가 특정 페이지 하단에 도달했을 때, 추가적인 데이터를 불러오는 API를 호출하여 콘텐츠가 끊기지 않고 계속 로드되는 방식을 말합니다. 한 번의 API 요청으로 모든 데이터를 불러오는 경우, 데이터 로딩 시간이 길어질 수 있습니다. 이러한 시간을 단축하고 사용자에게 더욱 많은 양의 데이터를 제공하기 위해 무한 스크롤 방식으로 데이터를 제공하고자 합니다. 사용자에게 데이터 리스트를 제공하는 방식은 크게 두 가지로 나누어집니다. X 페이지 네이션 (Pagination) 무한 스크롤 (Infinite Scroll) 장점 페이지 번호를 통해 원하는 정보가 있는 페이지로 이동 가능 → 원하는 정보 찾기 쉬움 콘텐츠가 끊기지 않고 계속 로드되는 방식 → 많은 양..

FE Study/React 2023.11.16