react(2)
-
React에서 URL 기반 페이지네이션 구현 (feat. useSearchParams)
페이지네이션은 대부분의 리스트 페이지에서는 필수적인 기능입니다.리스트로 보여줄 데이터 10개 미만이라면 그냥 모든 데이터를 보여줘도 상관없겠지만, 그게 1억개가 된다면 UI적으로는 물론이고 백엔드 서버에도 큰 부하를 줄 것입니다.그래서 거의 모든 서비스에서도 리스트 페이지를 구현할때, 페이지네이션을 이용할 것입니다.React 페이지네이션, 왜 URL과 함께 관리해야할까?저는 vapevibe의 상품 목록에서 원래 useState를 이용하여 페이지네이션을 관리하려고 했습니다. 그 이유로는 번잡한 URL를 사용자에게 보여주고 싶지 않았기때문이죠.근데 몇가지 문제가 있었습니다.사용자가 '뒤로 가기'를 눌렀을 때, 항상 첫 페이지로 돌아감URL을 복사해도 현재 페이지 정보가 유지되지 않음새로고침하면 페이지 상태가..
2025.06.09 -
Vite와 React: 빠르고 효율적인 개발 환경 구축하기
시작하며최근 프론트엔드 작업을 시작하면서 React 프로젝트를 진행하려고 했는데요. 당연히 CRA(Create React App)를 사용할 생각이었어요. 그런데 관련 정보를 찾아보니 최근에는 Vite를 많이 사용한다는 걸 알게 되었어요.그렇다면, 왜 개발자들은 Vite를 선택하는 걸까요? 이에 대한 궁금증을 해결하기 위해 Vite와 CRA의 차이점을 조사해 보았습니다.1. Vite의 탄생 배경Vite는 기존의 번들러(Webpack, Parcel 등)의 성능 문제를 해결하기 위해 탄생한 차세대 프론트엔드 빌드 도구입니다.Webpack을 비롯한 기존 번들러는 JavaScript 파일을 하나로 묶는 방식을 사용해서 초기 빌드 시간이 길고, 코드 변경 시 전체 번들을 다시 컴파일해야 하는 비효율적인 구조를 가지..
2025.02.10