페이지네이션은 대부분의 리스트 페이지에서는 필수적인 기능입니다.리스트로 보여줄 데이터 10개 미만이라면 그냥 모든 데이터를 보여줘도 상관없겠지만, 그게 1억개가 된다면 UI적으로는 물론이고 백엔드 서버에도 큰 부하를 줄 것입니다.그래서 거의 모든 서비스에서도 리스트 페이지를 구현할때, 페이지네이션을 이용할 것입니다.React 페이지네이션, 왜 URL과 함께 관리해야할까?저는 vapevibe의 상품 목록에서 원래 useState를 이용하여 페이지네이션을 관리하려고 했습니다. 그 이유로는 번잡한 URL를 사용자에게 보여주고 싶지 않았기때문이죠.근데 몇가지 문제가 있었습니다.사용자가 '뒤로 가기'를 눌렀을 때, 항상 첫 페이지로 돌아감URL을 복사해도 현재 페이지 정보가 유지되지 않음새로고침하면 페이지 상태가..

Tailwind CSS는 유틸리티-퍼스트(Utility-First) 방식의 CSS 프레임워크입니다.'mt-4', 'bg-blue-500' 같은 작은 클래스를 조합해 U를 만들기 때문에, 디자인 시스템을 빠르게 일관되게 적용할 수 있습니다.전통적인 "BEM + SCSS"와 달리 별도 컴포넌트를 만들지 않아도 되고, 필요한 클래스만 빌드 시점에 추려내 번들 크기가 작습니다. 이걸 왜 써야하나요?가끔 웹 개발하다보면 내가 디자이너인지 개발자인지 헷갈릴때가 있습니다.코드는 10분만에 다 작성해놓고 CSS 를 30분 작성하고 그럴때요. 그런 당신을 위해 만들어졌습니다. 바로 "Tailwind".필요한 스타일을 작은 조각으로 바로바로 조립할 수 있고, 반응형이나 다크모드까지 한 줄로 관리할 수 있거든요. 디자인 시..

최근 React 개발을 하면서 Vite 가 빠르다는 이야기는 익히 들어왔습니다.근데 "정말 그렇게 빠를까?", "개발자 입장에서 진짜 편할까?" 같은 궁금증이 들어서, 직접 실험해보고 비교한 결과를 공유합니다.실험 환경 소개프로젝트구조: Reaxt + Typescript + MUI 기반 SPA공통 요소:페이지 수: 12개공통 컴포넌트 8개이미지 에셋 포함 (총 5MB)테스트 항목:dev 서버 실행 속도전체 빌드 시간환경 설정 편의성플러그인 확장성에러 메시지 가독성테스트 환경:macOS 14.6.1 / M1 Pronode.js 22속도 비교: Vite vs Webpack항목WebpackVite차이dev 서버 기동 시간약 3.8초약 0.9초약 4배 빠름전체 빌드 시간평균 23.5초평균 6.2초약 3.8배 빠..

시작하며최근 프론트엔드 작업을 시작하면서 React 프로젝트를 진행하려고 했는데요. 당연히 CRA(Create React App)를 사용할 생각이었어요. 그런데 관련 정보를 찾아보니 최근에는 Vite를 많이 사용한다는 걸 알게 되었어요.그렇다면, 왜 개발자들은 Vite를 선택하는 걸까요? 이에 대한 궁금증을 해결하기 위해 Vite와 CRA의 차이점을 조사해 보았습니다.1. Vite의 탄생 배경Vite는 기존의 번들러(Webpack, Parcel 등)의 성능 문제를 해결하기 위해 탄생한 차세대 프론트엔드 빌드 도구입니다.Webpack을 비롯한 기존 번들러는 JavaScript 파일을 하나로 묶는 방식을 사용해서 초기 빌드 시간이 길고, 코드 변경 시 전체 번들을 다시 컴파일해야 하는 비효율적인 구조를 가지..