【AI 자막】 다양한 예제를 통해 Next.js 마스터하기!

Description

[꼭 읽어주세요] 한글 AI 자막 강의란?

• 유데미의 한국어 [자동] AI 자막 서비스로 제공되는 강의입니다.

• 강의에 대한 질문사항은 Mirko 강사님이 확인하실 수 있도록 Q&A 게시판에 영어로 남겨주시기 바랍니다.

업데이트 내역: 이 강의는 23년 10월 출시된 Next.js 버전 14에 포함된 Server Actions 과 23년 5월 출시된 Next.js 버전 13.4에 포함된 App Router 기능도 다루고 있습니다. 초반 13시간은 App Router 에 대해 설명하고, 나머지 시간에는 이전 버전이지만 여전히 지원되는 Pages Router 에 대해 설명합니다.

"웹을 위한 React 프레임워크"라고 불리는 Next.js 를 사용하면 서버 측 렌더링 React 컴포넌트를 통해 고도로 최적화된 웹 애플리케이션을 쉽게 구축할 수 있습니다.

이 강의는 완전한 프로젝트를 단계별로 개발하면서 Next.js 에 대해 학습할 수 있습니다.

1부 에서는 Next.js 를 정적 사이트 생성기 로 사용하여 모든 페이지를 정적 HTML, CSS 및 JavaScript 로 사전 렌더링하는 방법을 가르쳐드립니다.

파일 기반 라우팅, 사전 렌더링, React 서버 컴포넌트, 서버와 클라이언트 컴포넌트의 차이점, 서버 컴포넌트에서 데이터를 가져오는 방법과 같은 기본적인 Next.js 개념을 알려드립니다.

또한 스타일링을 위해 인기 있는 Tailwind CSS 프레임워크 를 사용하고, 여러분의 애플리케이션에 Custom Fonts 를 임베딩하는 방법과 메타데이터를 사용하여 페이지를 더 SEO 친화적으로 만드는 방법을 보여줍니다.

배포 섹션에서는 Vercel과 같은 완전 관리형 플랫폼 사용법부터 모든 웹 서버에 업로드할 수 있는 Static Export 수행에 이르기까지 프로덕션 환경에서 애플리케이션을 실행하기 위한 다양한 옵션을 소개합니다.

2부에서는 동적 렌더링, 시간 기반 재검증, 온디맨드 재검증과 같은 기능을 활성화하여 Next.js 를 풀스택 프레임워크로 사용하는 방법을 보여드립니다.

Headless CMS인 Strapi 를 사용하여 데이터를 저장하고, Next.js 앱 에서 REST API 를 호출하는 방법과, CMS의 데이터가 변경될 때 프론트엔드 페이지를 업데이트하는 다양한 옵션을 보여드립니다.

또한 이미지 최적화 를 다루며, Next.js가 어떻게 이미지를 온디맨드 방식으로 변환하고 크기를 조정하고 브라우저에서 지연 로딩을 활성화할 수 있는지 보여줍니다.

그런 다음 여러분의 앱에서 서드파티 UI 컴포넌트를 통합하는 방법과 언제 클라이언트 측 데이터 불러오기 를 사용하는 것이 좋은지 보여드립니다.

3부에서는 Prisma Object/Relational Mapper 와 SQL 데이터베이스 를 사용하여, 데이터베이스 통합의 예시를 보여드립니다. 그런 다음 Server Actions 으로 양식 제출을 처리하는 방법과, Streaming 및 Suspense 를 사용하여 페이지 로드를 최적화하는 방법을 설명합니다.

마지막 파트에서는 인증 을 추가하여 쿠키와 JSON 웹 토큰을 사용하여 일반적인 Sign In 흐름을 구현하고, 데이터베이스 테이블에 사용자 데이터를 저장하고, 인증된 사용자에게만 콘텐츠를 제한하는 방법을 보여줍니다.

여러분은 JavaScript 또는 TypeScript 를 사용하여 예제를 따라할 수 있습니다. 전체 소스 코드가 제공되며, 모든 강의에서 변경 사항을 쉽게 확인하실 수 있습니다.

TAKE THIS COURSE