Learn Next.js

https://nextjs.org/learn/dashboard-app/getting-started 대시보드 제작을 통해 Next.js에 대해 배운다.

https://nextjs.org/learn/dashboard-app/css-styling Global Styles /app/ui 폴더 안에, global.css라는 파일이 있다. 앱의 모든 루트에 적용되는 CSS 규칙을 여기에 추가할 수 있다. 앱의 컴포넌트 어디에

https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages In this chapter.... 파일-시스템 라우팅을 통해 dashboard 루트를 생성한다. 새 루트 segment 생성 시 폴더/파일의 역할을

전 챕터에서, 대시보드 레이아웃, 페이지를 만들었다.이제 사용자들이 대시보드 루트 간 이동을 할 수 있는 링크를 추가하자.next/link 컴포넌트 사용법usePathname( ) 훅을 통해 활성화된 링크를 보여주는 법Next.js 내 네비게이션 동작 원리페이지 간 연

https://nextjs.org/learn/dashboard-app/setting-up-your-database 대시보드 작업 전, 데이터가 필요하다. 이 챕터에서는 @vercel/postgres를 사용해 PostgreSQL을 세팅한다. In this chapte

https://nextjs.org/learn/dashboard-app/fetching-data

https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering이전 탭터에서 데이터 패칭을 했지만 두개의 한계점이 있었다.1\. 데이터 요청이 의도적이지 않은 waterfall 을 만듦2\. 대시보드가

https://nextjs.org/learn/dashboard-app/streaming In this chapter... 스트리밍의 정의와 언제 사용하는지 loading.tsx와 Suspense로 스트리밍 구현 방법 loading skeletons가 무엇인지 rout

https://nextjs.org/learn/dashboard-app/partial-prerenderingPartial Prerendering정의동작 원리루트 내 동적 함수 호출 시ㅅ, 전체 루트는 동적이 됨이것이 웹 앱이 설계된 방법이다.전체 앱 혹은 특정

https://nextjs.org/learn/dashboard-app/adding-search-and-pagination 이전 챕터에서, 스트리밍으로 대시보드의 초기 로딩 성능을 향상시켰다. 이제 /invoices 페이지로 넘어가서 서치와 페이지네이션 추가를 알아보자

JS의 try/catch 구분과 Next.js API를 통해 에러를 다루는 법을 배운다. In this chapter... 루트 세그먼트에서 에러를 잡기 위해 error.tsx 파일을 쓰는 법과, 사용자에게 fallback UI를 보여주는 법을 배운다 404에러 핸들

폼 유효화가 필요하다.어떻게 서버액션으로 서버 사이드 검증를 하는지와, 리액트의 useActionState 훅을 통해 에러를 보여주는지 배워보자접근성 향상을 위해 Next.js와 eslint-plugin-jsx-a11y 를 사용하는 법서버 사이드 폼 유효성 검사를 하는

https://nextjs.org/learn/dashboard-app/adding-authentication

메타데이터는 SEO와 공유성에 매우 중요하다.메타데이터의 정의메타데이터 유형메타데이터를 통해 Open Graph 이미지를 추가하는 법메타데이터를 통해 favicon을 추가하는 법웹페이지에 대해 디테일을 제공한다. 메타데이터는 사용자가 페이지 방문시엔 보이지 않지만, 대