BEST

개발 · 프로그래밍

프론트엔드

따라하며 배우는 리액트 A-Z[19버전 반영]

Name: 따라하며 배우는 리액트 A-Z[19버전 반영]
Price: 55000 KRW

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

(4.7) 수강평 83개

수강생 2,896명

John Ahn

React Next.js TypeScript TDD Redux

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

이런 걸 배울 수 있어요

리액트
NextJS
타입스크립트
정적 사이트 자동 배포
도커

리액트 기초 개념부터 중급 기술까지
직접 앱을 만들어보며 배울 수 있어요!

따라하며 배우는
리액트 A-Z

이 강의를 통해서 리액트 기초부터 중급까지의 기술을 익히실수 있습니다.
리액트를 처음 접하는 사람들도 이 강의 하나로 리액트를 위해 필요한 대부분의 지식을 습득하실수 있습니다.

하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다. 프론트엔드 개발자가 되기 위해 필수처럼 생각되는 리액트를 배워서 취업에 많은 도움이 되었으면 좋겠습니다.

이 강의만의
장점을 확인하세요.

_{구조적 이해를 돕는
도표 중심의
쉽고 자세한 설명}

_{직접 소스 코드를
작성하면서
자연스러운 반복 학습}

_{실제 애플리케이션을
만들어볼 수 있는
실습 중심 강의}

_{자바스크립트 기초를 뗀
초보 개발자라면
누구나 OK!}

1-2. 도표를 통한 시각적 설명 + 직접 코드 작성의 2단계!

도표를 통해서 시각적으로 봤을 때 그냥 설명을 듣기만 했을 때보다 이해가 더 잘 되기 때문입니다. 또한 이렇게 도표를 통해서 학습한 후 소스 코드를 작성하므로 자연스럽게 복습하는 효과가 나타난다고 생각합니다.

3. 따라하며 배우세요, 실습 중심 강의.

먼저 필요한 개념을 익힌 후에 실습을 통해 개념을 더욱 확실하게 해줍니다.

4. 자바스크립트 기초를 알고 있는 학습자에게 적합합니다.

자바스크립트의 기초를 알고 계시면 이 강의를 듣는데 어려움 없이 들으실 수 있습니다.

다음 내용을 학습합니다.

섹션 1) 리액트의 개념에 대해서 배우게 됩니다.

섹션 2-3) To-Do 앱을 만들며 리액트 기초 개념을 배우며 사용해 봅니다.

섹션 4-5) 넷플릭스 앱을 만들며 리액트의 좀 더 심화적인 개념을 배우고 사용해 봅니다.

섹션 6-7) 리액트 테스트에 대해서 기초적인 부분은 배우며 실습으로 간단한 버튼 앱을 만들어 봅니다.

섹션 8) NextJS 와 Typescript에 대해서 알아보며 이 둘을 이용한 블로그 앱을 만들어봅니다.

섹션 9) 리액트의 새로운 버전인 리액트 18버전에서 새로나온 기능과 API에 대해서 알아봅니다.

섹션 10) 리액트의 대표적인 상태관리 라이브러리인 리덕스에 대해서 알아봅니다.

섹션 11) 도커로 리액트를 실행하는 법에 대해서 알아봅니다.

예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

A. 기초부터 자세하게 강의하기 때문에 비전공자도 들을수 있습니다.

Q. 왜 리액트를 배워야 하나요?

A. 프론트엔드 개발자로서 가장 많이 사용되는 라이브러리 이기에 리액트를 배우는게 취업에 많은 도움이 된다고 생각됩니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

A. 기초적인 자바스크립트 개념을 알고 들으면 좋습니다.

지식공유자의
다른 강의가 궁금하다면?

누적 수강생 32,000+명, 따라하며 배우는 웹 개발 시리즈 📖

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트를 처음 배우는 분
프론트엔드 개발자가 되고 싶은 분

선수 지식,
필요할까요?

자바스크립트

안녕하세요
John Ahn입니다.

82,994

명

수강생

2,637

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼

전체

162개 ∙ (24시간 16분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 자료

3개

1. 강의 수강에 대한 조언
2. 강의 도표 자료(Draw IO) (추천)
3. 강의 소스 코드

섹션 2. 리액트란

5개 ∙ (26분)

섹션 3. 간단한 To-Do 앱 만들며 리액트 익히기

13개 ∙ (1시간 14분)

9. Vite 로 설치된 리액트 기본 구조 살펴보기
04:13
10. React App 실행해보기 (npm run dev)
02:33
11. SPA(Single Page Application) 이란?
04:35
12. 할 일 목록 앱 소개 및 JSX 알아보기
05:25
13. 할 일 목록 앱 만들기 시작
06:28
14. 할 일 목록 UI 만들기(JSX, CSS 작성)
05:11
15. Map 메소드를 사용한 할 일 목록 나열
06:46
16. JSX Key 속성 이해하기
06:13
17. Filter 메소드를 사용해서 할 일 목록 지우기
06:43
18. React State 란?
04:30
19. 할 일 목록 추가하기
10:58
20. 전개 연산자(Spread Operator)
04:03
21. 마무리 된 일 표시하기(조건부 삼항 연산자)
06:32

섹션 4. To-Do 앱 최적화 하기

10개 ∙ (1시간 29분)

섹션 5. Netflix 앱 만들기 시작

10개 ∙ (1시간 25분)

섹션 6. Netflix 앱 완성하기

15개 ∙ (2시간 57분)

섹션 7. React TDD 기본

8개 ∙ (46분)

섹션 8. React TDD 를 이용한 간단한 앱 생성 및 배포

10개 ∙ (50분)

섹션 9. Next.js와 TypeScript

24개 ∙ (6시간 0분)

섹션 10. 리액트 Version 18

3개 ∙ (18분)

섹션 11. 리덕스

11개 ∙ (2시간 30분)

섹션 12. 도커를 이용한 리액트 실행

13개 ∙ (1시간 17분)

섹션 13. React 19

10개 ∙ (1시간 24분)

섹션 14. 삭제 예정 강의들

27개 ∙ (3시간 33분)

강의 게시일: 2022. 07. 11.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

83개

4.7

83개의 수강평

lgs4002
수강평 12
∙
평균 평점 4.3
2022. 08. 24.
4
97% 수강 후 작성
React 부분과 달리 Nextjs, Typescript, Redux 부분이 살짝 아쉽다는 생각이 들었습니다. 좋은 강의였습니다.
gyuyoung park
수강평 5
∙
평균 평점 5.0
2022. 07. 12.
5
6% 수강 후 작성
john ahn님의 강의는 대단하다고 생각합니다. 저렴한 강의 비용에 교재까지 손수 만들어 제공해주시고, contents들도 알찹니다. 타강의에 비해 내용도 풍부한데 가격도 착한 이런 강의를 두고 어떻게 다른 리액트 강의를 듣겠습니까
김일꾼
수강평 2
∙
평균 평점 4.0
2023. 02. 28.
3
66% 수강 후 작성
배너 만들기에 css 파일 없고 코드도 없는데 질문사항에 검색해도 안나옴
원준
수강평 1
∙
평균 평점 5.0
2022. 08. 27.
5
100% 수강 후 작성
1. 강의 자료 - 5점 탐나는 GIF 자료들이 많은데, PDF에 GIF가 담기지 않는 점, diagram앱에서 export시 페이지 분할되는 부분의 사진이 잘리는 점은 아쉽습니다 ㅠ 인프런에 문서 관련 표준이나 가이드라인도 있으면 좋을 것 같네요. 어떤 강사분은 한글 파일로 하시는 것도 본 적 있어서.. 그래도 강의자료 퀄리티가 만점이라 5점 2. 강의 전달력 - 5점 목소리 좋다는 평은 처음 남겨봅니다. 듣기 편해요. 리액트는 예전에 책으로 보거나 독학했을 때는 어려웠는데, 어려운 건 중요한 걸 더 알려주고, 그림판으로 대충 그리는게 아닌 제대로된 다이어그램이나 자료와 함께 친절하게 강의해주셔서 덕분에 잘 배웠습니다. 이거 듣다가 지인한테 다른 강의도 3개 추천 받았었는데 비교해보니 리액트 배우기에는, 프론트엔드 입문자에게는 이게 최고인 것 같습니다. 3. 강의 구성 - 리액트~TDD는 5점, 8강부터 4점 리액트와 테스트, 배포, 자동화까지는 엄청 잘 알려주셨는데, 타입스크립트, Next.js, 리덕스는 그만큼은 자세히 알려주지 않아 아쉽습니다! 강의가 부족한 게 아니라 후반 파트는 입문까지만 알려주셔서 그렇습니다. 중급 강좌도 있으면 좋을 것 같습니다~ 4. 총평 만점짜리 강의입니다. 퀄리티에 비해 가격이 다소 저렴한 편입니다.
osakapark
수강평 6
∙
평균 평점 4.0
2023. 08. 02.
3
100% 수강 후 작성
1. 장점 교재 및 소스가 제공되어 복습하기 좋습니다. (제가 이 강의를 신청한 이유입니다.) 2.단점 강의가 교재 읽기 같은 부분이 있어서, 전달력이 떨어집니다. 코드 설명할 때, 타이핑하면서 코드를 단순히 읽는 경우가 많습니다. (집중 안됨, 복습시 시간낭비) 3.건의 사항 단순 코드 타이핑, 코드 읽기 시간은 줄여 주시고, 소스에 대한 설명 시간을 늘여 주셨으면 좋겠습니다. drawo io 는 읽기 불편하고, 보안때문에 회사에서 접속도 되지 않습니다.

John Ahn님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

초급

GitHub, AWS, Docker

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

중급이상

React, Redux, Node.js

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

TDD, Node.js, Express

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

초급

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

초급

React, Redux, Node.js

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

초급

NestJS, PostgreSQL, TypeORM

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

입문

JavaScript

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

초급

React Native, React, expo

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

입문

HTML/CSS

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

초급

React, React Context, 웹앱

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

초급

Deno

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

초급

React, Node.js, 웹앱

비슷한 강의

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

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

영코디 킴쌤

리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

입문

JavaScript, React, jQuery

리액트 최신버전 공식문서 파먹기

더코딩클럽

현업에서 일해야만 알 수 있는 React의 특별한 기술이 있는게 아닙니다. 기본기로 충분합니다. React 공식문서를 토대로 설명 드립니다.

초급

React, React Context, react.js

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

OAuth 2.0을 구글이나 깃헙같은 계정으로 간편 로그인을 사용해봐서 이미 친숙하게 느껴질지도 모릅니다. 소셜 로그인은 OAuth 2.0을 확장하여 만들어진 것으로 핵심 기술은 OAuth 2.0 인가 프레임워크에 있습니다. OAuth 2.0의 원리를 이해하면 그것을 바탕으로 필요에 맞게 적절히 구현하고 조정하는 능력을 기를 수 있습니다.

초급

OAuth, Next.js, JavaScript

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

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

이정환 Winterlood

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

초급

TypeScript

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

Firebase, React