넥스트 (33) 썸네일형 리스트형 [next.js] 5. 동적 라우팅 next.js13 공식문서를 번역하여 공부한 내용을 정리한 것이므로 자세한 내용은 공식 사이트를 참고하세요. 사전에 정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터에서 라우트를 생성하려는 경우, 요청 시간에 채워지거나 빌드 시간에 사전 렌더링되는 동적 세그먼트를 사용할 수 있습니다. 규칙 동적 세그먼트는 폴더 이름을 대괄호로 묶어서 생성할 수 있습니다 --> [ 폴더이름 ]. 예를 들어, [id] 또는 [slug]와 같이 사용할 수 있습니다. 동적 세그먼트는 레이아웃(layout), 페이지(page), 라우트(route), generateMetadata 함수의 params prop으로 전달됩니다. (개인 정리) 이렇게 생성된 params 는 출력 시 {slug : 경로명} 형태로 나타난다. 예를 들.. [next.js] 4. Route Groups (개인 요약) Route Groups 은 폴더명을 (폴더명) 형태로 감싸서 정의하는데, 이렇게 정의된 폴더는 URL 에 아무런 영향을 미치지 않는다. 즉, next.js 에서는 생성된 폴더를 하나의 URL 경로로 인식하기 때문에 만일 shop 이라는 폴더를 만들었다면, http://localhost:5000/shop 이라는 경로가 생성되지만, (shop) 으로 폴더를 생성한다면, http://localhost:5000/ 과 같이 URL는 변동없이 루트 경로만 남게 된다. Route Groups는 다음과 같은 경우에 유용합니다. - 사이트 섹션, 의도 또는 팀별로 라우트를 그룹화하는 경우 - 같은 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화하는 경우: 동일한 세그먼트에 여러 중첩 레이아웃 생성, 여러.. [next.js] 3. Linking and Navigating :: next.js 에서의 라우트 간 이동법 ? Next.js에서 라우트 간 이동하는 방법은 두 가지가 있습니다 컴포넌트 사용 useRouter Hook 사용 이 페이지에서는 , useRouter()를 사용하는 방법을 설명하고, 또한 이동 작동 방식에 대해 더 자세히 살펴보겠습니다. 컴포넌트 는 내장된 컴포넌트로, HTML 태그를 확장하여 라우트 간 사전 로딩 및 클라이언트 측 이동을 제공합니다. 이는 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. next/link에서 가져와서 컴포넌트에 href 속성을 전달하여 사용할 수 있습니다 // app/page.tsx import Link from 'next/link'; export default function Page() { return 대시보드; } 에 전달할 수 있는 다른 선택적 속성도 있.. [next.js] 2. 페이지와 레이아웃 next.js 공식 문서를 한글로 번역하여 정리한 글이니 자세한 내용은 공식 사이트를 참고 하세요 Next.js 13의 App Router는 페이지, 공유 레이아웃 및 템플릿을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했습니다. 이 페이지에서는 이러한 특별한 파일을 Next.js 애플리케이션에서 사용하는 방법을 안내합니다. 페이지 페이지는 특정 라우트에 고유한 UI입니다. page.js 파일에서 컴포넌트를 내보내어 페이지를 정의할 수 있습니다. 중첩된 폴더를 사용하여 라우트를 정의하고, 페이지.js 파일로 해당 라우트에 접근할 수 있게 할 수 있습니다. // app/page.tsx // app/page.tsx는 / URL의 UI입니다. export default function Page() { retu.. [next.js] 1. 라우팅 경로 정의 이 내용은 Next.js 의 공식 문서 내용을 한글로 번역하여 정리되었습니다. 자세한 내용은 공식 사이트를 방문하시면 됩니다. 라우트 생성Next.js는 파일 시스템 기반 라우터를 사용하며, 폴더는 라우트를 정의하는 데 사용됩니다. 각 폴더는 URL 세그먼트에 매핑되는 라우트 세그먼트를 나타냅니다. 중첩된 라우트를 생성하려면 폴더를 서로 중첩시킬 수 있습니다. 라우트 세그먼트에서 경로 세그먼트로 특별한 page.js 파일은 라우트 세그먼트를 공개적으로 접근 가능하게 만드는 데 사용됩니다. 라우트 정의 이 예시에서 /dashboard/analytics URL 경로는 해당하는 page.js 파일이 없기 때문에 공개적으로 접근할 수 없습니다. 이 폴더는 컴포넌트, 스타일시트, 이미지 또는 다른 공존 파일을.. [next.js] CSR(Clinet Side Rendering) 다른 글들도 그렇지만, 제가 이해한 내용을 바탕으로 정리하는 것이라 이렇게 출처가 없는 글의 경우 보시는 분들은 참고용도로만 쓰시길 바랍니다. 혹시나 잘못된 저의 글로 인해서 누군가 피해를 보는 일은 원치 않습니다. CSR(Clinet Side Rendering) 클라이언트 사이드 렌더링은 브라우저 렌더링에 필요한 모든 데이터를 서버 측에서 보내주면, 해당 데이터를 브라우저 측에서 받아와서 필요한 HTML, CSS, JS 등의 파일을 생성하여 브라우저 자체적으로 화면을 렌더링하는 방식을 의미합니다. 따라서 클라이언트 사이드 렌더링 방식의 웹 페이지는 초기 로딩 속도가 다른 렌더링 방식에 비해 느린 편 입니다. 하지만, 초기 렌더링이 느린 만큼, 그 이후에는 빠른 인터랙션 구현이 가능하여, 보다 모바일 앱.. [NextJS] prettier 기본 설정 prettier 코드 스타일을 자동으로 정리하여 가독성을 높이고 유지 보수성을 향상시키는 데 사용되는 코드 품질 향상을 위한 도구입니다. 공통적인 코드 스타일 적용을 통해 개발자 사이에 불필요한 코드 스타일에 대한 갈등을 사전에 차단하는 도구가 되기도 합니다(가독성과 코드 품질 향상은 덤). prettier 패키지 설치 // 언제나 최신 버전으로 npm install --save-dev prettier 혹은 // 언제나 현재 버전으로 고정 npm install --save-dev --save-exact prettier npm install --save-dev --save-exact prettier 명령어는 프로젝트에서 Prettier를 사용하기 위해 필요한 패키지를 설치하는 명령어입니다. --save-d.. [Next.Js] useRouter() 훅의 프로퍼티 asPath 브라우저에서 실제로 보여지는 URL 경로를 나타내는 문자열입니다. 예를 들어, "/blog/post/123"과 같은 형식입니다. ** asPath 더 알기 더보기 asPath를 사용하면 현재 페이지의 실제 url 경로를 알 수 있기 때문에, 이를 기반으로 특정 동작을 수행할 수 있습니다. 예를 들어, 특정 경로에서만 컴포넌트를 렌더링하거나, 특정 경로에 따라 다른 데이터를 불러오는 등의 작업을 수행할 수 있습니다. 아래는 asPath를 사용하는 간단한 예시입니다. import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); const path = router.asPath; //asPat.. 이전 1 2 3 4 5 다음
