React 배우기 - 무료 인터랙티브 강의
첫 레슨부터 진짜 컴포넌트를 작성하며 React를 마스터하세요. JSX, props, state, 이벤트를 익힌 뒤 Next.js로 이어집니다 - 파일 시스템 라우팅, 레이아웃, 서버 컴포넌트, 데이터 페칭, 서버 액션까지. 모든 것이 브라우저에서 실행되고, 막히면 AI 힌트가 도와주며, 완주하면 무료 수료증을 받습니다.
3,235+ 명의 codders가 등록함
89 개 강의78 챌린지164 퀴즈 문제
- 초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
섹션 1
기초 (Fundamentals)
섹션 시작하기시작첫 번째 컴포넌트부터 실제 작동하는 미니 앱까지, 컴포넌트, JSX, props, 상태(state) 및 이벤트를 다루며 React로 사용자 인터페이스를 구축하는 방법을 배웁니다.React 소개
5 개 강의513JSX 표현식
5 개 강의58컴포넌트
5 개 강의48Props
6 개 강의510상태와 이벤트
6 개 강의59폼과 입력
5 개 강의47조건문 및 리스트
6 개 강의510프로젝트: 프로필 카드
4 개 강의4섹션 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에서 React를 배워야 하는 이유
- 첫 레슨부터 브라우저에서 JSX를 작성하세요. Node 설치도, create-react-app도, 빌드 설정도 필요 없습니다 - 모든 레슨에서 직접 수정하고 실행할 수 있는 진짜 컴포넌트 코드를 제공합니다.
- 진짜 앱으로 끝나는 커리큘럼: 기초 섹션에서 컴포넌트, props, state, 이벤트, 훅을 배우고, 이어서 라우팅, 레이아웃, 서버/클라이언트 컴포넌트, 데이터 페칭, 서버 액션을 다루는 완전한 Next.js 섹션으로 넘어갑니다.
- 실제 코드를 읽는 AI 힌트. 컴포넌트가 렌더링되지 않거나 state가 업데이트되지 않을 때, 정답을 알려주지 않으면서 버그 위치를 짚어주는 힌트를 받습니다.
- 완주 시 무료 React 수료증 - React가 여전히 가장 수요가 높은 UI 라이브러리인 프런트엔드 채용 시장에서 강력한 신호가 됩니다.
React 학습에 대해 자주 묻는 질문
React란 무엇인가요?
React는 마크업을 반환하는 작고 재사용 가능한 함수인 '컴포넌트'로 사용자 인터페이스를 만드는 JavaScript 라이브러리입니다. Meta에서 만들어졌으며 Facebook과 Instagram부터 수많은 스타트업 제품까지 현대 웹의 큰 부분을 움직이고, 채용 공고에서 꾸준히 가장 수요가 높은 프런트엔드 기술입니다.
React를 배우기 전에 JavaScript를 알아야 하나요?
변수, 함수, 배열, 객체 같은 JavaScript 기초에는 익숙해야 합니다. React가 의존하는 JavaScript 패턴(화살표 함수, 구조 분해, map)은 등장할 때마다 강의에서 소개하므로 전문가일 필요는 없습니다. 코딩이 처음이라면 JavaScript 여정을 먼저 시작하세요.
React는 배우기 어렵나요?
컴포넌트, JSX, props 같은 핵심 개념은 이미 아는 함수와 HTML에 대응되기 때문에 금방 익숙해집니다. state, 이펙트, 데이터 흐름은 더 많은 연습이 필요한데, 그래서 여기서는 이론만 읽는 대신 매 레슨마다 진짜 컴포넌트 코드를 작성하고 실행합니다.
React와 Next.js의 차이는 무엇인가요?
React는 UI 라이브러리로 컴포넌트, state, 렌더링을 담당합니다. Next.js는 React 위에 구축된 프레임워크로, 실제 앱에 필요한 것들 - 파일 시스템 라우팅, 레이아웃, 서버 사이드 렌더링, 데이터 페칭, 서버 액션 - 을 더해 줍니다. 이 강의는 먼저 React 기초를 가르친 뒤, 전용 Next.js 섹션에서 컴포넌트부터 완전한 앱까지 안내합니다.
React를 온라인에서 무료로 배울 수 있나요?
네. 인터랙티브 React 강의는 무료입니다. 실습 레슨, 즉각적인 피드백이 있는 코딩 챌린지, AI 힌트, 퀴즈가 제공됩니다. 모든 것이 브라우저에서 실행되므로 설치할 것이 없고 바로 시작할 수 있습니다.
React 강의를 마치면 수료증을 받을 수 있나요?
네. 강의를 완주하면 LinkedIn이나 이력서에 추가할 수 있는 무료 수료증을 받습니다. 학습 과정에서 만든 컴포넌트와 앱들과 함께라면 실전 React 및 Next.js 역량의 의미 있는 증거가 됩니다.
