목록2025/05/13 (1)
개발새발
Next.js에서 반응형으로 구현하기
배포하기 전까지는 로컬에서 npm run dev해서 확인했기 때문에 처음에는 모든 프론트엔드 코드를 PC 버전으로 작업했다. 그리고 vercel로 배포한 다음 휴대폰에서 작동하는지 확인해봤는데, 휴대폰에서는 글자도 작고 가로로 스크롤이 생겨서 보기가 불편했다. 그래서 기존 컴포넌트를 깨지 않고 반응형으로 확장하기로 결정했다. 반응형을 위한 핵심 전략Tailwind CSS의 반응형 prefix (sm, md, lg, xl)햄버거 메뉴를 위한 useState + motion.divflex-col / flex-row 전환을 통한 레이아웃 대응리팩토링 포인트기존 PC 기준 컴포넌트를 최대한 재사용하면서 스타일만 분기Image 컴포넌트에서 sizes를 사용해 디바이스별 최적 이미지 로딩 1. 반응형 디자인의 ..
캡스톤디자인
2025. 5. 13. 01:59