nextjs14 7. Linking and Navigating 오늘 정리한 내용은 이론 적인 부분이 많아공식 문서 정리에 가깝습니다. ⛑ 탐색 방법 4가지Nextjs에서 경로 사이에 탐색하는 방법은 총 4가지를 제공한다.Link 컴포넌트 사용useRouter 훅 사용redirect 함수 사용브라우저의 History API 사용 👓 Link 컴포넌트Link 컴포넌트는 HTML에서 a 태그를 확장한 빌트인 컴포넌트이다. 뒤에도 나오겠지만 해당 컴포넌트를 통해 프리페칭이 가능하다. 'next/link' 로부터 임포트하여 사용할 수 있고, 기본적으로 이동할 경로는 href 속성으로 전달하면 된다. 몇가지 추가적인 속성을 제외하고는 a 태그와 사용방법이 유사하다.import Link from 'next/link' export default function Page() { .. 2024. 12. 3. 6. 인터셉팅 라우트 🎨 소개인터셉팅 라우트는 이름 그대로 특정 경로에 접속 시 경로를 가로채 다른 페이지의 정보를 보여주도록 해주는 기능이다. 페이지에 접속하는 방법은 두가지가 존재한다. 새로고침과 같은 외부 경로로 접속하는 방법과, 넥스트 페이지 사이에서 내부 경로로 접속하는 방법이 존재한다. 인터셉팅 라우트는 두가지 중에서 내부경로로 접속하는 경우에 한해서 가로채기를 할 수 있다. 즉, 인터셉팅 라우트를 사용하면 외부경로로 접속할 때와 내부경로로 접속할때 차이를 둘 수 있다. 🎩 컨벤션인터셉팅 라우트 폴더를 생성할 때 아래와 같은 컨벤션으로 작성하면 된다.(.) : 같은 레벨의 경로 가로채기(..) : 한단계 위의 레벨에 있는 경로 가로채기 (..)(..) : 두단계 위의 레벨에 있는 경로 가로채기(...) : 루.. 2024. 11. 29. 5. 병렬 라우트 14 버전에서 가장이해가 안되었던 부분이 병렬라우트였다..이제야 조금 알 것 같은 기분이다.🎨 소개 병렬 라우트는 두개 이상의 페이지를 한번에 보여주고 싶을 때 주로 사용하게 된다. 그래서 일반적인 경우에는 잘 사용하진 않지만 병렬 라우트가 필요한 경우가 존재한다. 예로 모달을 보여줄 때 활용할 수 있다.✨ 병렬 라우트는 라우팅 경로에 포함되지 않는다. 병렬라우트는 슬롯이라는 것을 사용해 정의하는 데 슬롯을 정의할 때는 폴더 이름 앞에 @를 사용해서 생성하면 된다. 슬롯은 부모 레이아웃의 props으로 전달 된다.app ㄴ@analytics ㄴpage.js ㄴ@team ㄴpage.js ㄴlayout.jsexport default function Layout({ children, t.. 2024. 11. 26. 4. 라우트 그룹 앞선 페이지에서 알아보았던 라우트 그룹에 대해 좀 더 정리해보았다. 라우트 그룹일반적으로 App 폴더 하위에 폴더를 생성하는 경우 라우팅 경로 계산 시 포함이 된다. 하지만 그룹을 사용하게 되면 이 경로 계산 시 제외되게 된다. 이로써 폴더를 사용해 논리적 그룹을 구성할 수 있게 된다. 사용방법은 폴더 이름을 괄호로 감싸 준다. 예. (foldername) 활용 방법은 다음과 같다.라우팅 경로에 포함되지 않으면서 경로들에 대한 논리적 그룹을 지정하고 싶을 때다른 경로에 동일한 레이아웃, 로딩 등을 구성하고 싶을 때 논리적 그룹을 구성경로에 포함되지 않으면서 논리적으로 폴더들을 구성하고 싶을 수 있다. 이러한 경우 그룹을 활용하면 된다.ㄴapp ㄴ(markgeting) ㄴabout ㄴblog .. 2024. 11. 22. 3. 디렉토리 이름 넥스트에서는 폴더의 이름을 통해서 자동으로 라우팅 경로를 설정한다는 것을 알아보았다. 이외에도 넥스트에서 제공하는 폴도 이름 규칙을 통해서 다양한 사용방법을 제공한다. 해당 페이지에서는 간단하게 이름 규칙에 대해 알아본다. 정적 경로가장 일반적인 사용방법으로 folderName 원하는 폴더 이름을 지정하여 정적인 라우팅 경로로 사용한다. 아래와 같이 폴더 이름을 지정하면 폴더 이름이 라우팅 경로로 설정된다.app ㄴdashboard ㄴpage.js ㄴboard ㄴpage.js 동적 경로폴더 이름을 대괄호를 감싸주면 다이나믹 경로를 만들 수 있다. 아래와 같이 [folderName] 와 같이 사용하면 동적 경로로 사용할 수 있다.app ㄴ[dashboard] ㄴpage.js 폴더명인.. 2024. 11. 19. 2. 에러와 로딩 처리 에러 핸들링Nextjs에서는 예기치 않은 오류에 대한 처리로 error.tsx 또는 global-error.tsx 파일을 사용할 수 있다. 페이지에서 에러가 발생하게 되면 해당 파일의 UI가 보여지게 된다.✨ Nextjs로 에러를 전달해야하기 때문에 컴포넌트에서 직접 try/catch로 에러를 처리하면 error.tsx가 작동하지 않는다. 루트 레이아웃과 동일한 경로에 error.tsx 파일을 생성하게 되면 예기치 않은 에러가 발생하면 루트 경로에 위치한 error.tsx 파일의 UI가 보여지게 된다. 만약 특정 경로에 에러 페이지를 다르게 보여주고 싶다면 해당 경로에 error.tsx파일을 따로 생성해주면 된다. // page.jsexport default function Home() { throw .. 2024. 11. 16. 이전 1 2 3 다음
