codinghatso

이 포스팅은 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과 같은 플랫폼을 사용해 베포 하는 방법을 익혀보기. 업데이트 유지 및 커뮤니티 계속 바뀌는 웹 기술 특징을 고려해 최신 정보를 주시하는..

https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#nextjs 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다. https://nextjs.org/learn Learn Next.js | Next.js by Vercel - The React Framework Next.js by Vercel is th..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React-Hook-Form 라이브러리를 사용하는 이유 직관적인 기능을 제공 패키지 크기가 작다 재렌더링 수를 최소화하고 유효성 검사 계산을 최소화 종속성이 없는 작은 라이브러리 직관적인 UI 코드의 양이 줄어든다. import React from "react"; import { useForm } from "react-hook-form"; const HeaderContent ..