Next.js 14 학습코스 (Learn Next.js)

먼저, Next.js 애플리케이션을 만들기 위해, 터미널을 열고 프로젝트를 보관하려는 폴더로 이동한 후 아래 명령어를 입력한다.설치 과정을 거치면, 처음부터 코드 과정을 작성하는 튜토리얼과 달리, 대부분의 코드가 작성된 모습을 볼 수 있을 것이다...

/app/ui 폴더 내부를 보면, global.css파일이 존재한다. 이 파일을 사용하여 HTML 요소에 대한 사이트 전체 스타일과 관련된 CSS 규칙을 애플리케이션의 모든 경로에 적용할 수 있다./app/layout.tsx 경로에 아래와 같이 global.css를 i

폰트는 웹 사이트 디자인에 중요한 역할을 한다. 그러나, 사용자 지정 폰트를 사용하기 위해, 로드 과정이 별도로 필요한 경우에는 성능에 영향을 미칠 수 있다.Cumulative Layout Shift(누적 레이아웃 변화)는 Google이 웹사이트의 성능과 사용자 경험을

Next.js에서는 폴더를 사용하여 중첩된 route(경로)를 만든다. \- 이는 각 폴더가 URL Segment에 매핑되는 route Segment를 나타낸다는 것을 의미한다. \- 쉽게 말해, Next.js에서는 폴더를 사용하여 중첩 경로를 만드는 Nested

전통적인 HTML 사용법에서는 <a> 태그를 사용하여, 페이지를 연결한다. \- /app/ui/dashboard 경로의 <NavLinks/> 컴포넌트를 살펴보면 아래와 같다.프로젝트 개발환경을 실행하여 클릭 이벤트를 확인해보자. 전통적인 HTML의 <

데이터베이스 세팅을 위해, 먼저 지금까지 작성해온 프로젝트를 Github에 push해야 한다. 아래 가이드를 보고, github에 repository를 만들어보자. \- 참고Vercel은 웹 애플리케이션과 정적 웹 사이트를 쉽게 배포하고, 호스팅할 수 있도록 해주는

API(응용 프로그램 프로그래밍 인터페이스)는 하나의 응용 프로그램이 다른 응용 프로그램에 서비스를 요청하는 방식이다.API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층으로, API를 사용하는 경우는 아래와 같다.3rd party 서비스를 사용하여 API를 제공

이전 Chapter에서는, 대시보드 개요 페이지에 대하여 데이터를 fetch해 보았다.그리고, 현재 설정에는 아래와 같은 2가지 제한 사항이 존재한다고 언급하였다. 오늘은 2번째, 정적 렌더링과 관련된 내용에 대해 알아볼 것이다.Request Waterfalls 패턴

이전 Chapter에서는 대시보드 페이지를 동적으로 만드는 데 성공했지만, 데이터 Fetch 속도가 느린 경우, 애플리케이션의 성능에 어떤 영향을 미칠 수 있는가에 대해 논의했다.이번 코스에서는, 느린 데이터 요청이 있을 때 사용자 경험을 어떻게 개선할 수 있는지에 대