codinghatso

7장이랑 연결되는 내용입니다. 7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다. 1. 데이터 요청이 의도하지 않는 waterfall을 만들었다. 2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다. 이번 장에서 배울 내용 * 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다. * 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다. * 대시보드를 동적으로 만들기 위한 다양한 접근 방식. * 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다. 정적 렌더링이란? 정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다. 그런 다음 결과를..

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다. * 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법 * network waterfalls란? * JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법. 데이터 가져오는 방법 선택 API 계층 데이터베이스 쿼리 React Server Components 추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다. SQL 사용하기 대시보드 프로젝트의 경우 Vercel Postgres SDK 및 ..

이 포스팅은 Learn Next.js를 학습하면서 보조 역할로서 봐주시면 좋겠습니다. 대시보드 작업을 계속하려면 먼저 데이터가 필요합니다. 이번 장에서는 PostgreSQL을 설정합니다. @vercel/postgres 이번 장에서 배울 내용 * GitHub에 프로젝트를 Push합니다. * Vercel 계정을 설정하고 즉각적인 미리보기 및 배포를 위한 GitHub 저장소를 연결합니다. * 프로젝트를 만들고 Postgres database에 연결합니다. * 초기 데이터로 데이터베이스를 seed합니다. GitHub 저장소에 관한 내용을 학습하려면 이동하시길 바랍니다. https://docs.github.com/en/repositories/creating-and-managing-repositories/qui..

사용자가 대시보드 경로 사이를 탐색할 수 있도록 몇 가지 링크를 추가하겠습니다. 이번 장에서 배울 내용 * next/link 요소 사용 방법 * usePathname() 에 대한 활성 링크를 표시하는 방법 * Next.js에서 내비게이션이 작동하는 방식 내비게이션을 최적화하는 이유는 무엇일까? 전통적으로 HTML의 요소를 사용합니다. 현재 사이드바 링크는 요소를 사용하여 각 페이지 이동시 전체 페이지 새로 고침이 있습니다. The component Next.js 에서는 를 사용할 수 있습니다. Javascript로 client-side navigation을 수행할 수 있습니다. import Link from 'next/link'; import 해서 사용하며 태그를 태그로 교체해 주면 됩니다. Automa..

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다. 이번 장에서 배울 내용 * dashboard routes를 만들고 file-system routng을 사용해 봅니다. * 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다. * 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다. * colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다. Nested routing 중첩 라우팅 Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL segment에 매핑되는 route segment를 나타냅니다. 라우팅 페이지 만들기 ..

이번 장에서 배울 내용 * 사용자 정의 글꼴을 추가하는 방법 next/font. * 이미지를 추가하는 방법 next/image. * Next.js에서 글꼴과 이미지가 최적화되는 방법. 글꼴을 최적화하는 이유 글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다. Cumulative Layout Shift 줄여서 CLS라고 불리는 레이아웃 변경 횟수는 안정적인 Core Web Vitals 측정항목이다. 이는 시각적 안정성을 측정하는 데 있어 중요한 사용자 중심 측정항목이다. 예를 들면 링크나 버튼을 탭 하려고 하는데 손가락이 닿기 직전에 링크가 이동하여 다른 것을 클릭하게 되는 피해가 일어날 수 있습니다. 글꼴의 경우 브라우저가 처음에 텍스트를 대체(fallback) 하거나 system..

개요 스타일링 : Next.js에서 응용프로그램 스타일을 지정하는 다양한 방법. 최적화 : 이미지, 링크 및 글꼴을 최적화하는 방법. 라우팅 : 파일 시스템 라우팅을 사용하여 중첩 레이아웃 및 페이지를 만드는 방법 데이터 가져오기 : Vercel에서 데이터베이스를 설정하는 방법 및 가져오기 및 스트리밍 모범 사례. 검색 및 페이지 지정 : URL Search Params를 이용한 Search 및 Pagination 구현 방법 데이터를 변형하는 중 : React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 다시 확인하는 방법. 404 오류를 찾을 수 없습니다. 양식 점증 및 접근성 : 서버 측 양식 검증 방법 및 접근성 향상을 위한 팁 인증 : 및 미들웨어를 사용하여 응용프..

개념 페이지, 라우팅, 서버 사이드 렌더링 같은 요소들을 파악할 것. 간단한 앱 만들기 앱을 만들어보며 페이지 설정, 이동, 정적 데이터 활용을 실제로 적용해 볼 것. 고급 기능 개념을 이해했다면 API라우트, 데이터 가져오기, 동적 라우팅과 같은 고급 기능을 사용해 볼 것. React 컴포넌트 통합 React 컴포넌트를 Next.js 프로젝트에 통합해 볼 것. 이를 통해 Next.js와 React가 어떻게 원활하게 작동하는지 확인하기. 성능 최적화 Next.js에 특화된 성능 최적화 기술에 대해 알아보기. 자동 코드 분할과 캐싱과 같은 기능 활용. 앱 베포 Vercel과 같은 플랫폼을 사용해 베포 하는 방법을 익혀보기. 업데이트 유지 및 커뮤니티 계속 바뀌는 웹 기술 특징을 고려해 최신 정보를 주시하는..