React2 [React] 웹 빠르게 개발하기(1) - Router로 Paging 구현하기 React 프로젝트를 여러 개 해보면서 깨달았다. 시작이 어렵지 기능 구현 단계로 가면 오히려 진행이 빠르다. 프로젝트를 시작하는 나만의 방법을 정리해보겠다.이 포스팅은 빠르게 앱을 개발하는 것을 목표로 한다. 일단 리액트 프로젝트 앱을 만들었다면 이제 들어갈 준비가 됐다. React Router 페이징 구현 설계1) 파일 구조 만들기원하는 페이지와 기능을 고려하여 파일을 구조를 만든다.- 보통 나는 components, pages를 우선적으로 만든다. front-end/├── src/│ ├── components/ # 재사용 가능한 컴포넌트│ ││ ├── pages/ # 각 페이지별 컴포넌트│ │ ├── Search.js│ │ └── ..│.. 2024. 5. 8. [React] useMediaQuery로 디바이스별 반응형 웹 만들기 React에서 반응형 웹을 구현해보자. 최근 웹 개발에서는 다양한 장치와 화면 크기에 맞게 콘텐츠를 최적화하는 것이 중요하다. 보통은 모바일, 태블릿, 데스크탑만 하는데 나는 좀 더 디테일한 구현을 해보고 싶었다. 케이스 최소 너비 (minWidth), 최대 너비 (maxWidth), 방향 (Orientation) 해당 케이스별 변수 범위다. isMobilePort ~ 479px 세로 (Portrait) isMobileLand ~ 767px 가로 (Landscape) isTabletPort 480px 1023px 세로 (Portrait) isTabletLand 768px 1023px 가로 (Landscape) isDesktop 1024px ~ - export const DeviceSize = { DESK.. 2024. 1. 31. 이전 1 다음
