【한글자막】 Next.js 15 & React - 완벽 가이드

2024년 10월 업데이트:

최신 버전의 Next.js(15)를 반영하도록 콘텐츠를 업데이트했습니다.

2024년 3월/4월 업데이트:

최신 버전의 Next.js를 다루도록 전체 과정을 완전히 업데이트했습니다!

2023년 12월 업데이트:

• 완전히 새로운 데모 프로젝트가 포함된 거대한 새 섹션이 추가되어 NextJS 15와 "앱 라우터"를 심층적으로 다룹니다!

• React 서버 컴포넌트, 서버 액션 등을 다룹니다.

• S3의 파일 업로드 및 저장을 다룹니다.

• "선택 사항: React 복습하기" 섹션을 완전히 업데이트했습니다.

• NextJS에 대한 사전 지식이 필요하지 않습니다. 이 강의에서 '앱 라우터'가 무엇인지 알려드립니다!

베스트셀러 NextJS 강의 과정을 수강해서 React JS & NextJS를 통해, 아주 동적이고 엄청나게 빠르며, SEO 준비가 완료된 React 앱을 구축하는 방법을 배워 보세요!

본 강의 과정은 두 가지 강의가 있습니다. 바로 완전 정복 강의(총 20시간 이상)와 요약 강의(약 3시간에 이르는 요약 모듈)입니다 - 여러분의 일정에 맞는 강의를 선택해 수강하세요!

[본 강의를 수강해야 하는 5가지 이유]

1. 저는 Udemy 베스트셀링 React 강의 과정의 제작자 및 강사입니다. 이번 NextJS 강의 과정을 한국 수강생 여러분들과 공유하게 되어 정말 기쁩니다. 본 강의 과정에서는 여러분이 React 개발자로서 한 단계 더 나아가 실제, React 및 Next.js를 통해 프로덕션 준비가 완료된 프로젝트를 구축할 수 있도록 해줄 React 프레임워크에 대해 심층적으로 다루고 있습니다.

Next.js는 ReactJS를 위한 프로덕션 준비가 완료된, 풀스택 가능 프레임워크로 요즘 가장 인기가 많은 JavaScript 라이브러리입니다!

2. React 개발자로서 성장하고, 여러분의 React 앱을 한 단계 더 높은 수준으로 끌어올리기 위해서는 NextJS가 딱 맞는 선택입니다!

NextJS는 빠르게 성장하고 있어 수요가 높기 때문이죠. 그 이유가 몇 가지 있는데요, NextJS를 사용하면 내장 서버 사이드 렌더링과 페이지 사전 렌더링을 포함한 React 앱을 구축할 수 있습니다. 훌륭한 사용자 경험을 구축할 수 있으며, 검색 엔진에 최적화(SEO)되어 있습니다! React 앱을 아주 쉽게 만들었죠!

3. 게다가, NextJS를 사용하면 풀스택 React 앱(한 프로젝트 내에 결합된 프론트엔드 + 백엔드 코드)의 구축 또한 엄청나게 간편해집니다! 프론트엔드 React 앱과 함께 클라이언트 사이드와 서버 사이드 코드를 조합하고, NodeJS 기반의 API를 구축할 수 있죠. NextJS와 함께라면 아주 간단합니다!

인증을 추가하고 싶은가요? NextJS는 인증 과정 또한 간소화해, 가입, 로그인 및 세션 관리 또한 아주 편리하게 만들어 줍니다.

4. 본 강의 과정이 여러분을 순식간에 NextJS 초심자에서 고수로 만들어 줄 겁니다!

아주 기초부터 시작할 테니 NextJS 사전 지식은 필요하지 않으며, NextJS를 구성하는 모든 핵심 기능을 살펴보게 됩니다. 이론뿐만 아니라 여러 실제 프로젝트를 통해 모든 개념을 차근차근 적용하게 됩니다.

본 강의 과정의 수강을 위해서는 기초적인 React 배경지식이 필요하지만, 강의 과정에는 React 복습 모듈 또한 포함되어 있으니 React로 작업한 지 오래 되었다면 참고하세요.

5. 이 과정에는 페이지 라우터용 'NextJS 요약' 모듈과 앱 라우터용 'NextJS 핵심 (앱 라우터)' 모듈이 포함되어 있어 전체 과정을 다시 수강하지 않고도 나중에 언제든 다시 돌아와서 지식을 복습할 수 있습니다. 또한 (당장은 나머지 강의들은 건너뛰고) 모듈요약 먼저 수강해서 짧은 시간 내에 모든 핵심 기능을 배울 수도 있죠.

강의 과정을 모두 수강한 후에는 여러분만의 NextJS 프로젝트를 처음부터 구축할 수 있고, NextJS 관련 직종에 지원할 수 있게 될 겁니다!

[강의에서 다룰 내용]

• NextJS란 무엇인가? NextJS를 왜 사용하는 걸까?

• 왜 (대부분의 경우에) React만으로는 충분하지 않을까?

• NextJS 프로젝트 처음부터 생성하기 & 프로젝트 이해하기

• 파일 기반 라우팅 작업하기

• 동적 라우트와 catch-all 라우트 추가하기

• 페이지 사전 렌더링 및 서버 사이드 렌더링의 다양한 형태 구현하기

• 데이터 작업하고 데이터 페칭을 추가해 앱에 사전 페칭하기

• 서버 액션으로 양식 제출 처리하기

• 파일 업로드 처리하기

• 동적 및 정적 페이지 사전 생성하기

• 페이지로 메타데이터 등의 최적화 추가하기

• NextJS 이미지 컴포넌트를 통해 이미지 최적화하기

• API 라우트 또는 서버 액션을 통해 풀스택 앱 구축하기

• React Context를 통해 앱 전반에 걸친 상태 관리하기 (NextJS 앱 내에서)

• NextJS 앱에 인증 추가하기

• 다양한 앱에 이와 같은 핵심 개념 적용해 보기!

• React.js 전체 복습 모듈 (모두 같은 수준에서 시작할 수 있도록 하기 위함)

• 배운 내용을 복습할 수 있고, 핵심 기능만을 빠르게 훑어볼 수 있는 NextJS 요약 모듈

• 그리고 더 많은 내용이 있습니다!

이 여정을 여러분과 함께 시작하게 되어 정말 기쁩니다!

1강에서 만나요!

- Max