강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

함께 소스코드를 까보며 기술면접부터 실무 설계까지, AI 시대에 필요한 깊은 이해와 자신만의 관점을 갖출 수 있도록 도와드릴게요. Next.js를 단순히 "써본" 개발자에서, 왜 그렇게 쓰는지 "이해하는" 전문가로 성장하세요.

(4.7) 수강평 18개

수강생 210명

  • Boaz
웹개발
Nextjs
Next.jsReactTypeScript

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 기술면접에서 자주 나오는 Next.js 의 동작 원리

  • 실무에 바로 적용 가능한 설계 원칙

  • AI 시대에도 유효한 Next.js의 기술 철학과 본질

  • 프레임워크를 더 잘 선택하고 활용할 수 있는, 자신만의 기준과 관점

(이미 업로드 했던 유튜브 영상(현재 비공개)과 새로운 영상(7개)을 강의로 묶은 것이어요.
소장하기를 원하시는 분들만 수강신청 부탁드려요. 🙏)

Next.js를 '어떻게'가 아니라 '왜' 쓰는지 설명할 수 있게 돕는 강의입니다.

이런 분들께 추천해요

👨‍💻 Next.js를 써봤지만, 제대로 이해하고 싶은 개발자

익숙하게 쓰고 있지만, 내부 동작 원리가 궁금한 분

🎙 기술 면접에서 항상 흐릿하게 설명하게 되는 분

개념은 아는데, 질문을 받으면 정리된 답변을 하기 어려운 분

🧭 AI 시대, 기술 선택 기준이 불안한 실무자

트렌드에 휩쓸리지 않고 기술의 본질을 꿰뚫고 싶은 분

🎯 수강 후에는

  • Next.js의 핵심 개념(라우팅, 렌더링, 에러 처리 등)을 단순히 사용하는 수준을 넘어서, 왜 그렇게 설계되었는지 설명할 수 있게 됩니다.

  • 기술 면접에서 자주 나오는 질문들에 대해, 자신의 언어로 명확하고 논리적으로 대답할 수 있는 실력을 갖추게 됩니다.

  • 공식 문서나 튜토리얼만으로는 얻을 수 없었던 프레임워크의 철학과 동작 원리에 기반한 실무 설계 기준을 만들 수 있습니다.

  • ‘남들이 만든 구조를 따라 쓰는 개발자’에서, ‘자신의 기준으로 구조를 판단하고 설명할 수 있는 개발자’로 성장하게 됩니다.

  • 변화하는 프론트엔드 기술 흐름 속에서도, 기술을 보는 시야와 선택 기준을 스스로 세울 수 있는 자신감을 얻게 됩니다.

이 강의의 핵심 강점

소스코드를 까보며, 동작 원리를 분석해요.

Next.js의 내부 소스코드를 분석하며 동작 원리를 설명합니다. 이를 통해 사용하던 기능이 내부적으로 어떻게 동작하는지 파악합니다.

공식 문서를 넘어, 설계 철학을 다뤄요.

공식 문서에 나오는 기능을 순서대로 따라가면서, 그 기능이 왜 등장했고 어떤 문제를 해결하기 위한 선택이었는지 배경과 설계 철학을 살펴봅니다.

이런 내용을 배워요

공식 문서 순서대로 따라가며, 깊이 있는 질문을 통해 기능의 등장 배경과 동작 원리를 공부해요.

섹션 (1) Routing

Next.js 라우팅, 단순히 폴더를 나누는 기능일까요?
이 섹션에서는 폴더 기반 라우팅의 철학부터 App Router의 구조, template.tsx, layout.tsx, <Link />, 동작 원리까지 Next.js 라우팅의 본질과 설계 의도를 깊이 있게 탐구합니다.

섹션 (2) Data fetching

Next.js에서 데이터 패칭, fetch() 위치만 신경쓰면 될까요?
이 섹션에서는 서버 중심 fetch 의 등장 배경부터, 병렬 처리의 한계, Server Component와의 연결, Server Action까지 Next.js가 제안하는 데이터 흐름의 방향성과 그 이유를 함께 살펴봅니다.

섹션 (3) Rendering

CSR, SSR, SSG, ISR, 그리고 Streaming까지.. 렌더링 방식이 많아질수록 “무엇이 정답인지” 헷갈리기 쉬운 것 같아요.
이 섹션에서는 Next.js의 렌더링 전략이 어떤 배경에서 등장했는지,
그리고 각 방식이 실제 프로젝트에서 어떻게 활용될 수 있는지 정리해봅니다.

궁금한 점이 있나요?

Q. 이 강의는 Next.js 를 처음 접하는 개발자도 들을 수 있나요?

이 강의는 중급 이상의 실무 프론트엔드 개발자를 대상으로 합니다. Next.js를 한두 번 써본 경험이 있고, 단순 사용을 넘어서 '왜 이렇게 써야 하는지'를 고민해본 분에게 가장 잘 맞습니다.

Q. 기술면접 준비에도 도움이 되나요?

그럼요! 자주 나오는 기술 면접 질문에 대해 공식 문서 그 이상의 깊이로, 실제 코드와 구조를 기반으로 설명할 수 있는 역량을 갖추게 됩니다.

Q. 실무에 바로 적용할 수 있을까요?

실무에서 궁금한 질문을 답변하는 형태로 한편 한편을 제작했어요. 이를 통해 설계 구조를 짤 때나, 컴포넌트 구성을 고민할 때 판단의 기준을 세울 수 있는 관점과 철학을 제공합니다.

Q. 강의에서 직접 코딩 실습도 하나요?

이 강의는 코드를 따라하며 기능을 구현하는 튜토리얼 보다는, 동작 원리와 설계 철학을 이해하는 데 초점을 둡니다. 따라서 이를 돕기 위한 예제 코드를 제공합니다.

예제 코드를 제공하는 목적은 직접 구현하는 실습 보다는 개념과 구조를 깊이 파악하고 실무에 응용하는 것입니다.

Q. App Router를 다루는 강의인가요? Pages Router도 포함되나요?

주요 내용은 App Router를 중심으로 구성되어 있으며, 라우팅 구조 변화의 철학과 차이점, 그리고 왜 그렇게 바뀌었는지를 깊이 있게 다룹니다.
Pages Router 사용 경험이 있다면, App Router로 넘어가는 데 큰 도움이 될 거예요.

수강 전 참고 사항

실습 환경

  • Nodejs 와 Browser

  • #Next.js #React #Typescript


질문과 답변

  • https://discord.gg/fpCrBJWCtz :

    강의에 대한 질문 뿐아니라, 기술에 대해 깊이 탐구하여 동료들과 함께 토론하며, 자신의 관점을 갖추고 싶어하는 Product Engineer 들이 모여 Next.js 에 관한 모든 질문에 대해 함께 공부하고 대답하는 채널이어요 :)

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Next.js 써왔지만, 기술면접만 보면 말문이 막히는 분

  • '그냥 쓰는 개발자'에서 '깊이 알고 쓰는 전문가'로 성장하고 싶은 분

  • Next.js 소스코드 분석하고 싶은데 어디서 시작할지 막막한 분

  • AI 시대, 본질적인 프론트엔드 엔지니어의 경쟁력을 갖추고 싶은 분

안녕하세요
입니다.

210

수강생

18

수강평

15

답변

4.7

강의 평점

1

강의

안녕하세요. Boaz 입니다.
총 4번의 이직을 거치며 다양한 스타트업을 경험 했고, 라인에서 일하다 얼마전 퇴사한 8년 차 프론트엔드 엔지니어입니다.

다양한 프로젝트에서 Next.js 를 활용하며, 저는 많은 시행착오를 겪었어요.
특히 실무에 적용하며 더 좋은 구조를 고민할 때, “왜 이렇게 구성해야 하지?”, “이 기능을 써도 되는 상황인가?” 같은 질문들이 쏟아졌고, 그때부터 단순한 사용법보다 '등장 배경과 동작 원리의 이해'가더 중요하다는 걸 느꼈어요.

이 강의는 단순히 Next.js를 ‘쓸 수 있게’ 만드는 것이 목적은 아니어요.
“왜 이렇게 설계 되었는가?”, “실무에서는 어떤 기준으로 선택해야 하는가?”를 함께 고민하고 싶은 분들을 위해 만들었어요.

단순히 쓸 줄 아는데 그치고 싶지 않았던 과거의 저와 같은 여러분에게, 이 강의가 정리된 관점과 기준을 제시해주는 나침반이 되었으면 합니다 😄

커리큘럼

전체

31개 ∙ (9시간 51분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

18개

4.7

18개의 수강평

  • nyamnyamgood님의 프로필 이미지
    nyamnyamgood

    수강평 14

    평균 평점 5.0

    5

    31% 수강 후 작성

    単にコードの書き方だけを教える初級講義とは次元が違います。Next.jsのルーティング、データフェッチ、レンダリングに対する哲学的背景と技術的実装方式を深く扱っています。特に「Next.jsのルーティングはどう実装したのか?」、「なぜDynamic Routeのparamsはpromiseに変わったのか?」のようなテーマは、単に使い方ではなく「なぜ」そう設計されたのかを理解させてくれます。実務でむやみに「use client」でCSRばかり使っていた私に、Server Componentの本質と最適化ポイントを明確に理解させてくれた唯一の講義です。今になってやっとNext.jsを 제대로(ちゃんと)活用できるようになった気がします。次の講義も本当に楽しみです!

    • jihunkim6251444님의 프로필 이미지
      jihunkim6251444

      수강평 1

      평균 평점 5.0

      5

      100% 수강 후 작성

      これまでNext.jsを利用して様々なプロジェクトを進めてきましたが、自分自身が使っているフレームワークに対する理解が不足しているのではないかという疑問が常にありました。しかし、この講義を受講し、Next.jsというReactベースのフレームワークをなぜ使う必要があるのかという明確な理解が頭に刻み込まれたように思います。 特に、サーバールーティングとサーバーコンポーネントの概念は公式ドキュメントを見ても理解できない部分が多かったのですが、そういった部分を実際のサンプルコードを通じて学び、さらに講師の最大限直感的な説明を通して簡単に理解することができました。 これまではプロジェクトをしながら、表面的な理解だけで機能を実装してきたように感じていました。しかし、これからはどのような機能を実装する際にも「なぜこの方式の方がより良い選択なのか?」「この構造の長所と短所は何なのか?」を共に悩むことができるようになりました。おかげでNext.jsに対する恐れも消え、さらに、どのようなバージョンでも新しい機能が登場しても簡単に吸収できるだろうという自信も生まれました。 この講義は表面的な使い方ではなく、本質的な原理と設計意図を見通したい方にぜひお勧めしたい講義です。Next.jsをしっかり理解したい開発者であれば、私が受講したこの講義が転換点になり得ると確信しています。

      • dlawnsdlekd7259님의 프로필 이미지
        dlawnsdlekd7259

        수강평 1

        평균 평점 5.0

        5

        20% 수강 후 작성

        最高の講義です。これほど深みのある講義はInflearnで初めて見ました。Next.jsがなぜこのように設計されているのか納得できました。ただあれこれ触ってみて意味のない勉強をしても、少し時間が経つと記憶に残りません。なぜこのように設計されているのかを知りながら勉強すると、記憶にも長く残ります。自然と面接対策も兼ねられますし。プロジェクトを真似て作るような講義にお金を多く無駄にした者として、本当に推薦する深みのある講義です。

        • near님의 프로필 이미지
          near

          수강평 25

          평균 평점 5.0

          5

          10% 수강 후 작성

          Next.jsをただ使ってみたことがあるという段階から、原理を理解する段階にアップグレードしてくれる講義でした。 技術は常に速く変化しますが、本質的な原理を理解すれば変化にも容易に適応できますね。 Next.jsを使用しているものの、「なぜこのような構造が必要なのだろうか?」という疑問を持つ方におすすめです!良い講義をありがとうございます 🥰

          • jaewon4576님의 프로필 이미지
            jaewon4576

            수강평 1

            평균 평점 5.0

            5

            100% 수강 후 작성

            • boaz
              지식공유자

              こんにちは、Jaewon Choiさん、一緒に勉強していただき、受講レビューを書いていただきありがとうございます。 特に100%受講後に書いていただき、さらに感謝しています😊

          ₩154,000

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!