React 여정의 일부신규여정Next.js 배우기
React 컴포넌트에서 실제 앱까지 이끌어 주는 무료 인터랙티브 Next.js 강의입니다. 라우팅, 레이아웃, 서버 및 클라이언트 컴포넌트, 데이터 가져오기, Server Actions를 배웁니다. 막히면 AI 힌트가 도와주고, 마치면 무료 수료증을 받습니다.
47 개 강의41 챌린지99 퀴즈 문제
- 초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
이 섹션은 React 여정의 일부입니다. 전체 커리큘럼에는 더 많은 섹션이 있어요. 아래 미리보기를 클릭하면 여정 페이지에서 확인할 수 있습니다.
- 섹션 1기초 (Fundamentals)42 개 강의
섹션 2
Next.js 핵심 (Next.js Essentials)
섹션 시작하기시작React 컴포넌트에서 실제 앱으로 나아가세요: 파일 시스템 라우팅, 레이아웃, 서버 및 클라이언트 컴포넌트, 데이터 페칭, 서버 액션, 그리고 완성된 Next.js 프로젝트를 다룹니다.Next.js를 사용하는 이유
4 개 강의39라우팅 및 링크
6 개 강의516레이아웃 & 메타데이터
6 개 강의515서버와 클라이언트
6 개 강의515서버의 데이터
6 개 강의516Server Actions
5 개 강의413클라이언트 내비게이션
5 개 강의515프로젝트: Coddy Eats
9 개 강의9
해보면서 배우기
실제 코드를 작성하고, 데이터베이스를 쿼리하고, 웹사이트를 구축하고, AI 프롬프트를 마스터하세요. 인터랙티브 레슨으로 현대 개발자에게 필요한 모든 기술을 다룹니다.
연속 기록을 쌓아보세요
꾸준히 하고 성장하는 모습을 지켜보세요! 매일 코딩 습관을 추적하고, 동결 기능으로 연속 기록을 보호하고, 매일 참여해서 보상을 받으세요.
12 일 연속
내일도 돌아와서 연속 기록을 유지하세요!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
더블 오어 낫싱
7일 중 5일차
연속 기록 동결
2 left
어디서나 코딩하세요
코딩 여정을 함께 하세요! 설정도, 다운로드도 필요 없이 바로 열어서 코딩을 시작하세요. iOS, Android, 웹에서 4.9점 평점으로 이용 가능합니다.
당신은 혼자가 아닙니다
글로벌 리더보드에서 경쟁하고, 친구를 초대해서 보상을 받고, 서로의 성공을 축하하세요. 코딩은 친구와 함께하면 더 좋아요!
1
2
3
승급 구역모든 방식으로 학습
읽고, 듣고, 스스로 확인하고, AI에게 묻고, 이미 배운 내용을 찾아보세요. 모든 수업이 당신에게 맞춰집니다.
변수는 나중에 프로그램에서 참조할 값을 저장하는, 이름이 있는 컨테이너입니다.
Python에서는 이름, 등호, 저장할 값을 차례대로 써서 만듭니다.
값은 시간이 지나며 바뀔 수 있습니다. 재할당하면 그 이름이 새로운 값을 가리킵니다.
수료증을 받으세요
완료한 모든 코스에 대해 인증서를 받으세요. LinkedIn 프로필과 이력서에 추가하여 고용주에게 코딩 전문성을 보여주세요.
수료증Python 기초
LinkedIn에 추가Coddy에서 Next.js를 배워야 하는 이유
- 브라우저에서 Next.js 앱을 만드세요. Node 설치도, create-next-app도, 설정도 필요 없습니다 - 모든 레슨에서 레이아웃, 페이지, 컴포넌트를 갖춘 진짜 app 디렉터리를 직접 수정합니다.
- 실무에서 쓰이는 그대로의 App Router: 폴더가 곧 라우트, 동적 세그먼트, 중첩 레이아웃, 서버 vs 클라이언트 컴포넌트, 데이터 페칭, 로딩과 에러 상태, 서버 액션을 쓰는 폼까지.
- 실제 코드를 읽는 AI 힌트. 라우트가 404를 반환하거나 서버 컴포넌트가 깨질 때, 정답을 알려주지 않으면서 문제를 짚어주는 힌트를 받습니다.
- 섹션 완주 시 무료 수료증 - Next.js는 가장 수요가 높은 React 프레임워크이며, 모던 프런트엔드 채용 공고가 React와 함께 요구하는 기술입니다.
Next.js 학습에 대해 자주 묻는 질문
Next.js란 무엇인가요?
Next.js는 완전한 웹 애플리케이션을 만들기 위한 React 프레임워크입니다. React가 컴포넌트를 제공한다면, Next.js는 그 주변의 모든 것 - 파일 시스템 라우팅, 중첩 레이아웃, 서버 사이드 렌더링, 데이터 페칭, 폼과 뮤테이션을 처리하는 서버 액션 - 을 더해 줍니다. Vercel이 개발·유지하며 프로덕션에서 가장 널리 쓰이는 React 프레임워크입니다.
Next.js를 배우기 전에 React를 알아야 하나요?
네 - Next.js는 React 위에 만들어졌으므로 컴포넌트, props, state가 먼저 익숙해야 합니다. 이 섹션은 React 여정의 두 번째 파트입니다. 바로 앞의 기초 섹션이 그 토대를 정확히 다루므로 순서대로 진행하면 됩니다.
강의가 App Router를 다루나요?
네 - 이 섹션은 모던 App Router를 중심으로 구성됩니다: app 디렉터리, 폴더가 곧 라우트, 동적 라우트 세그먼트, 중첩 레이아웃, 서버/클라이언트 컴포넌트 모델. 새 Next.js 프로젝트가 기본으로 사용하는 아키텍처이자 현재 채용 공고가 기대하는 구조입니다.
서버 컴포넌트와 클라이언트 컴포넌트의 차이는 무엇인가요?
서버 컴포넌트는 서버에서 렌더링됩니다 - 데이터를 직접 가져올 수 있고 브라우저로 보내는 JavaScript가 적습니다. 클라이언트 컴포넌트는 브라우저에서 실행되며 state, 이벤트, 이펙트 같은 상호작용을 담당합니다. Next.js 앱은 둘을 섞어 쓰며, 언제 무엇을 선택할지 아는 것이 이 섹션에서 집중 훈련하는 핵심 역량 중 하나입니다.
Next.js를 온라인에서 무료로 배울 수 있나요?
네. 인터랙티브 Next.js 섹션은 무료입니다 - 알찬 레슨, 즉각적인 피드백이 있는 진짜 코드 챌린지, AI 힌트가 제공됩니다. 모든 것이 브라우저에서 실행되므로 Node를 설치하거나 프로젝트를 만들 필요 없이 바로 시작할 수 있습니다.
Next.js 강의를 마치면 수료증을 받을 수 있나요?
네. 섹션을 완주하면 LinkedIn에 공유하거나 이력서에 추가할 수 있는 무료 수료증을 받습니다 - 마지막 챕터에서 완성하는 완전한 Next.js 프로젝트와 함께라면 더욱 확실한 증거가 됩니다.
