강의

멘토링

로드맵

BEST
Programming

/

Front-end

Bite-sized Next.js(v15)

The 3rd work in the One Bite series! The world's most kind and detailed Next.js (15+) course. We'll explore not only App Router but also Page Router through projects.

(5.0) 409 reviews

4,343 learners

  • winterlood
이론 실습 모두
next.js13
Next.js
React
TypeScript
kakao-tech

Reviews from Early Learners

What you will learn!

  • We'll explore the latest Next.js (v15 and above) concepts.

  • We'll explore most concepts from Page Router to App Router.

  • We'll explore various concepts including server components, page routing, layout configuration, data fetching, streaming, and deployment.

로드맵안내_넥스트

이미지를 클릭하면 로드맵으로 이동하실 수 있습니다. 
> 로드맵 링크 : https://link.onebitefe.com/r/68zgsv

시리즈 강의 링크
> 한 입 크기로 잘라먹는 리액트 :https://inf.run/v3XAj
한 입 크기로 잘라먹는 타입스크립트 : https://inf.run/FpLm4
한 입 크기로 잘라먹는 넥스트 : https://inf.run/v3XAj

여러분의 많은 사랑 덕분에 본 강의가 도서로도 출간되었습니다. 진심으로 감사드립니다 🙇‍♂

  • 한 입 크기로 잘라먹는 Next.js | Official Trailler

한입 크기로 잘라먹는 Next.js(15+)

15시간의 분량으로
Page Router부터 App Router까지

💡Page Router란?

Next.js 13버전 이전까지 사용되던 라우터
직관적이고 안정적인 기능 제공

💡App Router란?

Next.js 13버전 이후에 공개된 최신 라우터
스트리밍, 서버액션 등의 최신 기능 제공

Next.js 13 버전부터 새롭게 등장한 App RouterPage Router의 단점을 보완하기 위해 등장했습니다.
따라서 Page Router에 대한 이해가 없다면 App Router의 새로운 매커니즘에 대해 쉽게 이해하기 어렵습니다.

따라서 본 강의는 Page Router(5시간)를 빠르게 살펴본 다음 App Router(10시간)를 본격적으로 살펴보는 순서로 진행됩니다. 이를 통해 기존의 Page Router에 어떤 한계점이 있었고 App Router가 이런 한계점을 어떻게 극복하는지 깊히 이해하게 됩니다.

그러나 오해하진 마세요 본 강의는 App Router를 중심으로 진행됩니다.

정적인 시각자료는 그만
직관적인 애니메이션과 함께 살펴보는 Next.js

Next.js는 복잡한 매커니즘을 갖는 기능이 많은 편입니다.
따라서 정적인 시각자료 만으로는 충분히 설명되기 어렵습니다.
이에 본 강의는 아래와 같은 직관적인 애니메이션과 함께합니다

App Router Layout 관련 시각자료

React Server Component 관련 시각자료

React Server Component 관련 시각자료

Client Router Cache 관련 시각자료

실제 상황과 최대한 가깝게 🚧
실습을 위한 자체 제작 백엔드 서버 제공

Next.js의 각종 캐싱 기능을 좀 더 실전에 가까운 환경에서 살펴보기 위해
자체 제작한 백엔드 서버를 제공해드립니다.

백엔드 서버 API 문서

강의 구성

섹션1. Next.js를 소개합니다

본격적인 학습에 앞서 Next.js라는 기술은 무엇인지
오늘날 왜 이렇게 많은 관심을 받고 있는지 살펴봅니다.

섹션1. Next.js를 소개합니다.

섹션1. Next.js를 소개합니다.

섹션2. Page Router 핵심 정리

(선택 수강) 프로젝트와 함께 Next.js 출시 초기부터 제공된 Page Router에 대해 빠르게 살펴봅니다.
동시에 Page Router에 어떠한 불편함과 기술적 한계점 들이 있는지도 함께 살펴봅니다.

섹션2. Page Router를 소개합니다

섹션2. Page Router를 소개합니다

섹션3. App Router 시작하기

화제의 중심! App Router에 대해 살펴봅니다. App Router란 무엇인지, 어떤 기술적 차이가 있는지 알아보며 기본적인 사용법에 대해서도 함께 살펴봅니다.

섹션3. App Router 시작하기

섹션3. App Router 시작하기

섹션4. 데이터 페칭

서버 컴포넌트를 활용한 데이터 페칭에 대해 살펴봅니다.
동시에 Next에서 제공하는 다양한 캐싱(데이터 캐시, 리퀘스트 메모이제이션)에 대해서도 함께 살펴봅니다.

섹션4. 데이터 페칭

섹션4. 데이터 페칭

섹션5. 페이지 캐싱

App Router 버전의 페이지 캐싱인 풀 라우트 캐시클라이언트 라우터 캐시에 대해 자세히 살펴봅니다.
동시에 페이지의 캐싱 옵션을 강제로 설정하는 라우트 세그먼트 옵션에 대해서도 추가로 살펴봅니다

섹션5. 페이지 캐싱

섹션5. 페이지 캐싱

섹션6. 스트리밍 & 에러 핸들링

페이지에서 빠르게 준비되는 부분부터 바로 렌더링 하도록 도와주는 스트리밍에 대해 살펴봅니다.
Loading 파일을 이용한 방식과 Suspense를 이용한 두가지 방식을 모두 살펴봅니다.

또한 Error 파일을 이용한 에러 핸들링 및 페이지 복구 방법에 대해서도 살펴봅니다.

섹션6. 스트리밍과 에러 핸들링

섹션6. 스트리밍과 에러 핸들링

섹션7. 서버 액션

공개당시 뜨거운 반응을 불러일으킨 서버액션에 대해 살펴봅니다.
서버액션을 이용해 데이터를 추가하거나 삭제하며 로딩 상태와 에러 상태를 처리하는 방법까지 살펴봅니다.

섹션7. 서버액션

섹션7. 서버액션

섹션8. 고급 라우팅 패턴(패럴랠, 인터셉팅)

App Router에서 새롭게 제공되는 패럴랠(병렬) 라우트 & 인터셉팅(가로채기) 라우트에 대해 살펴봅니다.
이를 이용해 사용자의 탐색을 방해하지 않도록 특정 페이지를 모달로 보여주는 기능을 구현합니다.

섹션8. 고급 라우팅 패턴

섹션8. 고급 라우팅 패턴

섹션9. 최적화와 배포

이미지, 메타데이터, 페이지, 리전 등의 최적화 방법을 살펴봅니다.
최적화 된 프로젝트를 Vercel에 배포하고 한번 더 성능을 개선하는 작업을 진행합니다.

섹션9. 최적화와 배포

섹션9. 최적화와 배포

한입 시리즈의 5가지 원칙

원칙 1. 직관적이고 풍부한 시각자료

같은 음식이더라도 보기 좋은것이 더 맛있게 느껴지는 것 처럼
같은 개념 설명이더라도 더 직관적이고 매력적인 시각자료가 더 이해하기 쉬울거라 생각합니다.

따라서 애니메이션을 포함한 직관적인 시각자료를 만들기 위해 부단히 노력했습니다.

원칙 2. 친절함

새로운 용어나 개념이 등장할 때 대충 설명하고 넘어가거나, 이미 알고 계실거라고 속단하지 않았습니다. 강의를 들으시면서 별도로 구글링 하실 일 없도록 최대한 노력했습니다.

원칙 3. 개연성

수강생 여러분들의 흥미 유지를 위해 강의 중 새로운 내용이 등장할 때 항상 앞의 내용과 연관이 있는지, 갑자기 흐름이 끊키는 느낌을 받지는 않으실지 항상 개연성을 생각하면서 강의를 만들었습니다.

원칙 4. 좋은 발성과 딕션

오랜 시간 제 목소리를 들으셔야 하는 만큼 좋은 발성과 딕션을 위해 항상 노력하고 있습니다.
이를 위해 2배속으로 재생해도 다 알아들으실 수 있게끔 강의를 제작했습니다.

한번 들어보세요! 2배속 재생 링크

원칙 5. 소통

수강생 전용 커뮤니티에 모여 서로 지식과 소식을 공유하며 성장합니다.

예상 질문 Q&A 💬

Q. 강의 수강 대상이 어떻게 되나요?

React.js, TypeScript 기초 지식이 있으신 분들이 듣기에 최적화된 강의입니다.
다만 TypeScript의 경우 중간중간 부연설명이나 보충 학습 자료를 제공해드릴 예정이므로
타입을 작성하는 부분만 제외하고는 무리없이 들으실 수 있습니다.

Q. 저는 App Router만 배우고 싶은데 굳이 Page Router 부분도 들어야 하나요?

Page Router 숙련자시라면 2섹션은 건너뛰고 3섹션부터 바로 학습하셔도 됩니다.
다만 Page Router의 한계점이나 특징들에 대해 잘 이해하고 있는지 정확한 메타인지가 필요합니다.

포트폴리오 및 개인 영상

INFCON2023 - 타입스크립트는 왜 그럴까?

(도서) 한 입 크기로 잘라먹는 리액트 소개 영상

Recommended for
these people

Who is this course right for?

  • Students of the One Bite series

  • Beginners who are just starting with Next.js

  • Those who want to learn with the latest Next.js (15+) version

  • Those looking for kind and detailed lectures

Need to know before starting?

  • React.js (Basics)

  • TypeScript (Basics)

Hello
This is

32,365

Learners

1,970

Reviews

1,396

Answers

4.9

Rating

6

Courses

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

Curriculum

All

66 lectures ∙ (15hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

409 reviews

5.0

409 reviews

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Reviews 14

    Average Rating 5.0

    5

    25% enrolled

    Còn bài giảng Next.js thì sao? Lee Jeonghwan. Bài giảng React.js cũng vậy? Lee Jeonghwan. Bài giảng TypeScript nữa à? Lee Jeonghwan. Đó là chính thức. Hãy ghi nhớ nó. Nó đánh vào đầu bạn bằng hình ảnh và cách diễn đạt. Vẫn chưa trả tiền? Đọc và đọc. Nếu bạn gặp khó khăn khi trả lời các câu hỏi dưới đây hoặc có khái niệm khó hiểu, vui lòng thanh toán. Nó giúp ích. 1. Vui lòng giải thích sự khác biệt giữa React và Next.js về TTV và TTI. 2. Vui lòng giải thích về kết xuất trước của Next.js. 3. Vui lòng giải thích việc tìm nạp trước Next.js. 4. Quá trình hydrat hóa Next.js xảy ra vào thời điểm nào? 5. Quá trình tìm nạp dữ liệu Next.js diễn ra vào thời điểm nào? Tôi không biết gì cả, nhưng bây giờ tôi có thể trả lời. Họ vui lòng đút cho chúng tôi những tài liệu trực quan. Nếu bạn quên điều gì đó, anh ấy sẽ mang nó đến cho bạn để xem xét và ghi nhớ nó vào đầu bạn. Ban đầu tôi không định để lại một bài đánh giá như thế này, nhưng tôi không thể không để lại một bài đánh giá vì rõ ràng là bạn đã bỏ ra rất nhiều công sức để nâng cao chất lượng bài giảng của mình. Điều thực sự đáng sợ là vẫn chỉ mới bắt đầu khóa học nhưng bạn vẫn có thể đạt được nhiều như vậy. (Bây giờ hãy ngừng lo lắng và đi trả tiền. Không có ai sẽ không làm điều này sao?)

    • rhs199813739님의 프로필 이미지
      rhs199813739

      Reviews 9

      Average Rating 5.0

      5

      8% enrolled

      Bài giảng front-end === Jeong-Hwan Lee

      • dev8678

        Đồng ý!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      Đừng vội, hãy xem bài giảng này.

      • dla14347593님의 프로필 이미지
        dla14347593

        Reviews 4

        Average Rating 4.3

        5

        92% enrolled

        Thông thường tôi không thường xuyên để lại những nhận xét về bài giảng, nhưng tôi rất hài lòng với bài giảng này nên tôi đã bỏ nó đi. Đầu tiên tôi xem một số bài giảng Next, nhưng hầu hết chỉ dạy tôi cách sử dụng những phần khó giải thích trong bài giảng và nói “Bạn có thể sử dụng như thế này nên tôi luôn thắc mắc” Tại sao. Tôi có nên sử dụng nó không? Có gì khác biệt?” Tôi đã tra cứu tài liệu chính thức nhưng có rất nhiều phần không rõ ràng nên tôi không thể hiểu được. Tôi hiểu hầu hết bài giảng này. Trước hết, lời giải thích và tài liệu rất dễ hiểu. Sau khi giải thích lý thuyết, ông lại một lần nữa chứng minh nó bằng thực tế. Tôi nghĩ bài giảng này là một trong những bài giảng hay nhất mà tôi từng xem. Đó là một bài giảng. Bài giảng hiện tại tuy hay nhưng đó là kết quả của việc phản ánh rất nhiều trăn trở và phản hồi. Tôi nghĩ vậy. Tôi thực sự mong chờ bài giảng tiếp theo ~~ Lần sau sẽ rất tuyệt nếu tạo ra một bài giảng giống như một phiên bản thực tế của Next.

        • seungwoo님의 프로필 이미지
          seungwoo

          Reviews 5

          Average Rating 5.0

          5

          74% enrolled

          Tôi đang để lại đánh giá vì tôi rất hài lòng với khóa học! Mặc dù tôi là một nhà phát triển front-end nhưng tôi đã bị mắc kẹt trong ngăn xếp Bộ định tuyến Trang trong một thời gian dài. Không phải là tôi chưa thử Bộ định tuyến ứng dụng, nhưng tôi vẫn tiếp tục sử dụng Bộ định tuyến trang, có lẽ vì tôi đã quen với nó... Tuy nhiên, tôi nghĩ mình sẽ bắt kịp những xu hướng mới nhất khi nghe bài giảng này nhưng chất lượng lại cao hơn tôi mong đợi rất nhiều và tôi nghĩ một trong những lý do khiến tôi tiếp tục quay lại Page Router là vì tôi không thực sự hiểu rõ. Bộ định tuyến ứng dụng. Bằng cách tham gia bài giảng này, tôi có thể hiểu cách thức hoạt động của Bộ định tuyến ứng dụng và tôi có thể tin tưởng vào Bộ định tuyến ứng dụng khi thực hiện một dự án nhỏ. Nếu có điều gì bạn muốn xem trong bài giảng tiếp theo, nếu bạn thiết lập Bộ định tuyến ứng dụng, bạn có thể sử dụng hệ thống thiết kế hoặc nhiều thư viện khác không? Có những trường hợp khó cài đặt vì cài đặt không hoạt động bình thường, vì vậy sẽ rất tuyệt nếu có phiên bản thực tế (hoặc phiên bản nâng cao) bao gồm tất cả các cài đặt này! Cảm ơn!

          $37.40

          winterlood's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!