채널톡 아이콘
NEW
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 3개

수강생 76명

Next.jsReactTypeScript
Thumbnail

중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

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

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

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

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

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

💡 강의를 구매하신 분들에 한하여 <커리어 1:1 코칭 1회권>을 선물 해드려요.

구매 영수증을 hkc7180@gmail.com 으로 보내주시면 코칭 예약 링크를 드릴게요.

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

이런 분들께 추천해요

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

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

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

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

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

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

🎯 수강 후에는

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

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

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

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

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

이 강의의 핵심 강점

Screenshot 2025-03-29 at 11.34.02 PM

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

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

Screenshot 2025-03-29 at 11.31.55 PM

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

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

이런 내용을 배워요

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

섹션 (1) Routing

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

Screenshot 2025-03-29 at 9.13.17 PM

섹션 (2) Data fetching

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

Screenshot 2025-03-29 at 9.17.32 PM

섹션 (3) Rendering

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

Screenshot 2025-03-29 at 9.50.04 PM

궁금한 점이 있나요?

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/wJDZD5Yfxj :

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

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

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

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

안녕하세요
Boaz입니다.

76

명

수강생

3

개

수강평

6

개

답변

5.0

점

강의 평점

1

개

강의

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

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

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

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

더보기

커리큘럼

전체

29개 ∙ (8시간 53분)

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

수강평

전체

3개

5.0

3개의 수강평

비슷한 강의

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

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

코드캠프

₩396,000

30%

₩277,200

입문 / React, Next.js, GraphQL, React Native, 하이브리드 앱

5.0

(3)

200+
Update
Update

수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

입문

입문

React, Next.js, GraphQL

타입스크립트 코리아 : Electron with TypeScript Hands-On Labs 세미나강의 썸네일

타입스크립트 코리아 : Electron with TypeScript Hands-On Labs 세미나

이웅재

₩33,000

30%

₩23,100

초급 / TypeScript, Electron

4.0

(4)

100+

타입스크립트와 일렉트론으로 간단한 채팅 앱을 만드는 강좌입니다.

초급

초급

TypeScript, Electron

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편강의 썸네일

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

₩13,200

30%

₩9,240

중급이상 / React, react-usememo, 기술면접, Next.js

4.9

(17)

500+

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

중급이상

중급이상

React, react-usememo, 기술면접

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

₩16,500

30%

₩11,550

중급이상 / Next.js, React, GraphQL, Prisma, AWS

5.0

(1)

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

중급이상

Next.js, React, GraphQL

생활코딩 - React class vs. function style coding강의 썸네일

생활코딩 - React class vs. function style coding

Egoing Lee

무료

중급이상 / React

4.9

(173)

4,700+

생활코딩에서 제공하는 React 관련 강의로, 리액트에서 클래스와 함수 스타일로 콤포넌트를 작성하는 방법을 배우고 차이점을 살펴봅니다.

중급이상

중급이상

React

코드로 배우는 React with 스프링부트 API서버강의 썸네일

코드로 배우는 React with 스프링부트 API서버

구멍가게코딩단

₩77,000

30%

₩53,900

초급 / React, Spring Boot, JWT, redux-toolkit, JPA

4.7

(65)

1,100+

스프링 부트(Spring Boot ver3.1(3.2 호환))로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

초급

초급

React, Spring Boot, JWT

실전 연습으로 익히는 고급 타입스크립트 기술강의 썸네일

실전 연습으로 익히는 고급 타입스크립트 기술

애프터캠프

₩38,500

30%

₩26,950

중급이상 / TypeScript

5.0

(28)

200+

타입스크립트의 기능들을 제대로 활용해보세요!

중급이상

중급이상

TypeScript

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)강의 썸네일

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

₩33,000

30%

₩23,100

초급 / MongoDB, Express, React, Node.js, TypeScript

5.0

(4)

MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

초급

초급

MongoDB, Express, React

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

₩48,400

30%

₩33,880

초급 / React, Next.js, expo, React Native

New
New

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

초급

React, Next.js, expo

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

₩55,000

30%

₩38,500

초급 / Next.js, supabase, React, 클론코딩

4.9

(22)

300+
Update
Update

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

초급

Next.js, supabase, React

아바타 커뮤니티앱 만들기 (React Native)강의 썸네일

아바타 커뮤니티앱 만들기 (React Native)

Kyo

₩74,800

30%

₩52,360

초급 / React Native, TypeScript, react-query, React, JavaScript

5.0

(12)

200+
Update
Update

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

초급

초급

React Native, TypeScript, react-query

찍어먹는 Next.js 풀코스 (한국어 더빙)강의 썸네일

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

₩16,500

30%

₩11,550

중급이상 / Next.js, React, GraphQL, Prisma, AWS

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

중급이상

Next.js, React, GraphQL

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

₩44,000

30%

₩30,800

초급 / Node.js, TypeScript, Prisma, REST API, fastify

4.5

(2)

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

초급

Node.js, TypeScript, Prisma

iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

₩55,000

30%

₩38,500

초급 / React Native, React, ES6

4.6

(116)

1,800+

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

초급

React Native, React, ES6

한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 썸네일

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

₩48,400

30%

₩33,880

초급 / TypeScript

5.0

(209)

11,900+
Update
Update

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

초급

초급

TypeScript

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지강의 썸네일

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

제로초(조현영)

₩49,500

30%

₩34,650

초급 / Node.js, Express, MySQL, MongoDB, Socket.io, JWT, TypeScript

4.8

(46)

2,000+

노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

초급

초급

Node.js, Express, MySQL

타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

무료

중급이상 / React, TypeScript

4.7

(42)

6,000+

타입스크립트와 리액트 관련 강좌입니다.

중급이상

중급이상

React, TypeScript

월 ₩21,560

5개월 할부 시

30%

₩154,000

₩107,800