WEB 4

Lazy Loading?리소스를 처음부터 로드하지 않고, 사용자가 필요할 때 불러오는 웹 성능 최적화 기법초기 로딩 시간을 줄이고, 브라우저의 리소스 사용을 최소화하여 UX와 성능을 개선하는 데 큰 도움을 줌 📌 React에서의 Lazy LoadingReact에서는 React.lazy와 Suspense를 사용하여 컴포넌트를 동적으로 로드할 수 있습니다. ✅ 특징컴포넌트 단위로 지연 로딩을 수동으로 설정해야 합니다.React Router를 사용할 경우, 라우트 기반 Lazy Loading도 직접 구현해야 합니다.Suspense를 통해 로딩 중 UI를 지정해야 합니다.코드 분할도 개발자가 직접 구성해야 합니다.📌 Next.js에서의 Lazy LoadingNext.js는 React 위에서 동작하는 프레임..

이번에 포트폴리오를 React.js에서 Next.js로 변경하면서 Git Pages 배포 방식에 조금 차이가 나서 정리해보았습니다. * 기본적인 GitHub Pages 세팅이나 프로젝트 세팅은 생략했습니다 📌next.config.jsconst isProd = process.env.NODE_ENV === 'production';const nextConfig = { output: 'export', basePath: isProd ? '/[레포이름]' : '', assetPrefix: isProd ? '/[레포이름]/' : '',};module.exports = nextConfig; 📌 동적 라우팅 + generateStaticParams❔ 왜 generateStaticParams를 꼭 써야 할까?..

라우팅(Routing): URL에 따라 화면을 분기하는 기술정적 라우팅(Static Routing): URL 경로가 고정되어 있는 경우동적 라우팅(Dynamic Routing): URL 경로의 일부가 동적으로 변경되는 경우 → 변하는 부분 : 동적 세그먼트(Dynamic Segment) Next.js에서의 동적 라우팅파일 시스템 기반 라우팅Next.js는 폴더와 파일명으로 라우팅을 자동 생성합니다.동적 세그먼트는 대괄호 [ ]로 정의합니다.app/products/[id]/page.tsx 📌 v15 : Promise 기반 params Next.js v15부터 params와 searchParams가 Promise 타입으로 주어집니다.따라서 항상 await를 사용해야 합니다. 👉 Promise Typ..

최근 React 프로젝트에 애니메이션을 추가하려다 Framer Motion의 공식 문서를 찾지 못해 의아했었습니다.그러던 중, Framer Motion이 이제는 Motion이라는 이름의 독립 오픈소스 라이브러리로 변경되었다는 사실을 알게 되었죠. 👉 Framer Motion is now independent, introducing Motionhttps://motion.dev/blog/framer-motion-is-now-independent-introducing-motion 해당 글에 따르면,많은 유저들이 Framer Motion을 React.js 외의 환경에서도 사용하고 싶어 했고,이에 따라 개발자 Matt Perry는 다음과 같은 결정을 내렸습니다.“모든 사이트에서 애니메이션의 핵심 동인으로서 M..