현인

이전 장에서 대시보드 레이아웃과 페이지들을 만들었다. 이제 사용자가 대시보드 경로 사이를 라우팅할 수 있도록 몇 가지 링크를 추가해보자5장에서 다룰 내용next/link 컴포넌트 사용법usePathname() 훅 사용하여 활성 링크 표기 방법Next.js에서 네비게이팅(Navigating)이 이뤄지는 방식왜 네비게이팅을 최적화 해야 할까?페이지 간에 링크를 구현하려면 HTML 엘리먼트를 사용한다. 현재 사이드바 링크는 엘리먼트를 사용하지만 브라우저에서 홈, invoice 및 customer 페이지 사이를 탐색할 때 어떤 일이 일어나는지 보자.각 페이지 이동 시 전체 페이지가 새로고침 된다. 컴포넌트Next.js에서는 컴포넌트를 사용하여 어플리케이션의 페이지간 링크를 구현할 수 있으며 JavaScri..

지금까지 만든 어플리케이션은 홈 화면 하나 뿐이다. 이제 레이아웃과 페이지들을 가지고 더 많은 라우팅 지점들을 만들 수 있는 방법을 알아보자.4장에서 다룰 내용파일시스템 라우팅을 활용하여 dashboard 경로 생성새로운 경로 세그먼트를 만들 때 폴더와 파일들의 역할 이해여러 대시보드 페이지에서 공유할 수 있는 중첩 레이아웃 만들기콜로케이션, 부분 렌더링 그리고 루트 레이아웃중첩 라우팅Next.js는 폴더가 중첩 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.layout.tsx 및 page.tsx 파일들을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다.page.tsx는 React 컴포넌트를 내보내는 특수 Next.js 파일..

GraphQL 스키마가 지원하는 쿼리에 대한 정보를 요청하는 것은 매우 유용한 기능이다. GraphQL은 Introspection(이하 스키마 확인) 시스템을 통해 이를 효과적으로 수행할 수 있게 해준다.스타워즈 예제에서 사용된 starWarsIntrospection-test.ts 파일은 스키마 확인 시스템의 실용성을 잘 보여준다. 이 파일에는 다양한 스키마 확인 쿼리가 포함되어 있어, 참조 구현의 스키마 확인 시스템을 효과적으로 테스트할 수 있다.타입 시스템을 직접 설계했다면 사용 가능한 타입들을 알고 있겠지만, 그렇지 않은 경우에도 GraphQL의 강력한 기능을 활용할 수 있다. Query의 루트 타입에 항상 존재하는 __schema 필드를 쿼리하면, 필요한 모든 정보를 손쉽게 얻을 수 있다. 이제 ..