BEST

개발 · 프로그래밍

프론트엔드

만들면서 배우는 리액트 : 기초

Name: 만들면서 배우는 리액트 : 기초
Price: 44000 KRW

리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 만들면서 개념과 실전 감각을 익히고 배포까지 3시간 만에 완성하는 알짜 강의! 초급, 중급, 고급으로 구성된 시리즈의 첫 번째 강의입니다 :)

(4.8) 수강평 171개

수강생 1,563명

진유림

React JavaScript

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

이런 걸 배울 수 있어요

리액트 개발
프런트엔드 개발
웹 개발
나만의 토이프로젝트
백엔드 연동

처음 만나는 리액트React,
가장 쉽고 빠르게 끝내고픈 당신을 위해!

지금 프론트엔드는
리액트가 대세 ✨

현재 프론트엔드 진영에서 가장 많이 사용하는 라이브러리, 리액트!
리액트를 사용하면 순수 자바스크립트만으로 제어하기 복잡한 모던 웹앱을 코드 몇 줄로 간편하게 관리할 수 있게 됩니다.

그런데... 막상 리액트를 핵심만 빠르게 배우기는 쉽지 않습니다. 왜일까요?

지금, 여러분의 고민은 아닌가요?

따라하는 데 시간이 너무 많이 드는
프로젝트는 부담스러워요.
빠르게 핵심만 배우고 싶어요!

리액트 하나 배우는데 굳이
복잡한 다른 스킬까지 다룬다고요?
HTML/CSS/JS만 가지고 해볼 수는 없나요?

리액트를 배운다고 해도
막상 실무에서 가장 자주 쓰이는 기능을
자신있게 쓰지 못하면 어떡하죠?

리액트를 배우려고 하는데
어려운 단축키나 개념, 용어가 많으면
진도를 따라가기 힘들 것 같아요.

혹시 내 얘기 같다면,
초보자를 위한 진짜 리액트 입문 강의를 만날 때!

핵심만 담았다!
초보자 눈높이에 딱 맞는
리액트의 정수.

문법만 익히다 보면 실무에서 어떻게 리액트를 활용해야 하는지 감을 잡기 어렵습니다.
이 강의에서는 리액트 실무 개발에 필요한 모든 기초 개념을 토이프로젝트를 통해 쉽고 빠르게 익혀봅니다.

효과적인 학습을 위한 4가지 핵심 Point!

핵심만 쏙쏙!

실무에 꼭 필요한 리액트의 핵심 개념을 3시간 안에 차례대로 배워갈 수 있습니다.

스스로 점검해 보세요

개념을 잘 이해했는지 과정 중간마다 실습 퀴즈/리뷰를 통해 스스로 점검해볼 수 있어요.

초심자를 배려한 강의

Node.js, NPM, ES6+ 등 초심자에게 어려울 수 있는 기술 요소는 제외했습니다. 그 대신 잘 모를 수 있는 단축키나 용어, 개념 설명을 중간중간 함께 전달해 쉽게 이해할 수 있도록 도와드려요.

실무에 활용할 수 있도록

준비된 교안을 읽는 대신 라이브 코딩을 통해 결과를 눈으로 확인할 수 있습니다. 실제 API를 연동해서 서버 개발자와의 협업 과정도 맛볼 수 있고, 완성물을 배포해 포트폴리오로 활용할 수도 있어요.

도전! 고양이 짤방 앱 만들기 😺

_{HTML, CSS, JavaScript만 알면 OK!
간단한 웹 애플리케이션을 직접 만들어보세요. (링크)}

여러분의 리액트 입문,
가장 쉽게 도와드릴게요!

8년차 프론트엔드 개발자, 진유림입니다 😊

현 프런트엔드 개발자
"팀 개발을 위한 Git, GitHub 시작하기" 저자
삼성전자, 페이스북, IBM, 고려대학교 등 기술 강연 다수
토스 개발자컨퍼런스 "리액트 코드로 배우는 Frontend clean code" 강연 진행
기술 블로그

평균 별점 4.9★, 160개 이상의 리뷰가 증명해요.

정말 친절하고 자세하게 하나씩 알려주셔서 속성 과외를 받는 기분이었어요.

듣지 않았더라면 낭비했을 시간을 이 강의 덕분에 세이브할 수 있어서 너무 다행입니다.

친절하게 차근차근 알려주시고, 실습 같이 하면서 들으니까 이해가 너무 잘 돼요.

앞으로 다른 강의를 올려주셔도 바로 구매할 예정입니다. 좋은 강의 감사합니다 😍

_{인프런 [팀 개발을 위한 Git, GitHub 입문] 강의에 남겨주신 수강평입니다 💌}

현업 프론트엔드 실무자들이
적극 추천한 바로 그 리액트 강의!

자주 묻는 질문을
모았습니다 💬

Q. 프런트엔드 개발을 이제 시작합니다. 이 강의를 들어도 될까요?

이 강의는 HTML, CSS, 자바스크립트의 기본 지식이 있어야 합니다. ‘HTML은 마크업, CSS는 스타일링, 자바스크립트는 페이지 동작을 담당하고 있다’는 개념과, 기본적인 문법 정도만 알고 계시면 수강하셔도 괜찮습니다 :)

Q. 자바스크립트는 어느 정도 알고 있어야 할까요?

자바스크립트의 변수, 함수, 조건문, 반복문, 객체 정도 알고 계시면 수강이 가능합니다. 최신 자바스크립트 문법인 ES6+ 를 모르시더라도 수강하실 수 있습니다 :)

Q. 이 강의를 들으면 취업에 도움이 될 수 있을까요?

고양이 짤방 생성기라는 간단한 프로젝트를 만들면서 리액트 개념과 문법에 친숙해질 수 있습니다. 실제 데이터인 Open API까지 연동하고 깃헙 페이지로 배포하기 때문에 포트폴리오로도 사용하실 수 있습니다 :)

학생, 취준생분들께 강의 금액을 지원해드립니다 💪

수입이 없는 학생분들이나 취업준비생 분들이 덜 부담스럽게 강의를 들을 수 있도록 50% 할인 쿠폰을 드립니다. 신청 링크 / 문의 사항

Coming Soon!
[만들면서 배우는 리액트]는
계속됩니다 🏃‍♀️

본 강의는 초급 - 중급 - 고급으로 구성된 시리즈의 첫 번째 [기초편] 강의입니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트를 처음 시작하는 웹 개발자
프런트엔드 개발자
리액트로 취업을 준비하는 취업 준비생
리액트를 배우고 싶은 퍼블리셔
리액트 문법은 아는데 실무에 어떻게 적용해야하는지 헷갈리는 사람

선수 지식,
필요할까요?

HTML
CSS
JavaScript 기초

안녕하세요
진유림입니다.

4,709

명

수강생

533

개

수강평

271

개

답변

4.9

점

강의 평점

개

강의

프런트엔드 개발자 진유림입니다. 개발자 특유의 공유 문화와 커뮤니티에서의 바이브를 사랑합니다. 반가워요! 블로그 / 깃헙 / 사운드클라우드

강연 : 삼성전자, Facebook, IBM, 고려대, 이화여대 등 다수 기술 강연

저서 : 팀 개발을 위한 Git, GitHub 시작하기

커리큘럼

전체

37개 ∙ (3시간 26분)

해당 강의에서 제공:

수업자료

섹션 1. 인트로

3개 ∙ (11분)

섹션 2. 리액트가 왜 좋은가요?

5개 ∙ (23분)

섹션 3. 리액트 앱 바닥부터 만들기

15개 ∙ (1시간 26분)

9. 9 컴포넌트가 뭔가요?
05:48
10. 10 컴포넌트 만들기
08:49
11. 11 컴포넌트 퀴즈 풀이
01:33
12. 12 스타일링
06:21
13. 13 이벤트 다루기
06:02
14. 14 useState로 상태 만들기
04:22
15. 15 상태 끌어올리기
06:52
16. 16 useState 퀴즈풀이
01:56
17. 17 리스트
06:36
18. 18 배웠던 개념 조합해서 기능 추가 (상태, prop, 이벤트, 리스트)
06:36
19. 19 폼 다루기
06:07
20. 20 폼 검증하기
07:50
21. 21 코드 정리하기
04:21
22. 22 로컬스토리지에 데이터 싱크하기
06:42
23. 23 로컬스토리지에 데이터 싱크하기 2
06:23

섹션 4. 지금까지 만든 앱 배포하기

1개 ∙ (9분)

섹션 5. 중간 정리

2개 ∙ (12분)

섹션 6. 리액트 앱에 숨 불어넣기

7개 ∙ (35분)

섹션 7. 실무 개발환경 만들기

4개 ∙ (26분)

강의 게시일: 2022. 01. 13.

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

수강평

전체

171개

4.8

171개의 수강평

jj4783
수강평 6
∙
평균 평점 4.8
2022. 01. 20.
5
100% 수강 후 작성
리액트 공식문서로 입문하기 어려운 사람(저 포함)에게 도움이 되는 강의입니다:) 총 시간이 짧아 피로도도 적고, 반복적으로 학습하기에 좋습니다! 그럴싸한 웹 앱이 만들어지는 것도 너무 좋네요!!
Cinnamon.eight
수강평 4
∙
평균 평점 5.0
2022. 02. 01.
5
100% 수강 후 작성
인프런에서 여러 강의를 거쳐왔는데 이렇게 신나게 공부한 건 처음입니다. 맨날 코드 볼때마다 얼굴이 흙빛이 되어갔는데 선생님 목소리도 발랄하고 본심을 숨기지 못하고 고양이 귀여워..하시는 모습들 보면서 덩달아 기분 좋게 배울 수 있었어요. 특히 그동안 뜻 모르고 따라쳤던 명령어 같은 것들을 풀어서 상세하게 알려주셔서 아 이게 이런 뜻이었구나!하고 또 기쁘게 배우고... 강의 들으면서 제일 많이 배운 게 이 강의입니다. 기초부터 차근차근 알려주셔서 쉽게 따라갈 수 있었구요. 강의에 필요하지만 어려운 개념들은 깊게 파고들지 않고 따로 공부할 수 있도록 링크들 나눠주신 것도 아주 큰 도움이 되었어요. 맨 처음 배울 때는 고양이 사진 3장 가지고 짤을 어떻게 만들지 생각했는데 API 사용법까지 알려주셨네요. 진짜 진짜 알차게 배웠어요. 선생님 꼭 중급, 고급 강의까지 찍어주시고, 새해 복 많이 받으시고 사는 동안 많이 버시고... 너무 마음에 드는 강의라 더 많은 칭찬을 해드리고 싶은데 머리가 마음을 못 따라가네요. ㅎㅎ 한번 더 듣고 개인프로젝트도 만들어서 배포해볼게요! 감사합니다!!
- 진유림
  지식공유자
  2022. 02. 01.
  아이구 ㅠㅠ 감덩이에요... 감사합니다 ㅎㅎ 덕분에 중고급 강의도 찍을 힘이 나네요! 새해 복 많이 받으세요~
daehyun
수강평 5
∙
평균 평점 4.8
2022. 01. 26.
5
100% 수강 후 작성
다른 곳에서 react를 create-react-app을 통해서 바로 만들어서 배웠지만 왜 이렇게 쓰는지 잘 몰라서 금방 그만뒀었는데 유림님 강의를 통해서 기초부터 배울 수 있었습니다.
강동재
수강평 1
∙
평균 평점 5.0
2022. 01. 20.
5
100% 수강 후 작성
리액트라는걸 듣기만 했고 책을봐도 이해가 되지 않아 인프런을 통해 유료강의를 들었습니다. 초보자의 입장에서 이해하기 쉽고 수업내용도 잘짜여져 있어서 만족했습니다. 추후 중급편, 고급편도 강의가 있으면 듣고 싶을정도로 만족했습니다! 부디 꾸준히 강의 올려주시면 감사하겠습니다👍
bee
수강평 6
∙
평균 평점 5.0
2022. 02. 10.
5
49% 수강 후 작성
아직 앞쪽 수강 중이지만 정말 친절하고 깔끔하고 요즘 리액트 트렌드까지 설명해주셔서 너무 좋아요. 그리고 목소리가 너무너무 귀여우시고 경쾌한 느낌이라 졸리지도 않고 훨씬 집중이 잘됩니다 ㅠㅠ! 덕분에 리액트의 첫인상이 매우 좋아요. 인프런에서 아주 만족하면서 듣는 강의 중 하나라서 중급과 고급 레벨도 얼른 올라왔으면 좋겠어요. (중급이랑 고급은 총 강의 시간이 좀 더 긴가요? 명확하지만 짧은 감이 있는 게 좀 아쉬웠어서 수강료가 비싸더라도 강의가 길었으면 좋겠어요) 좋은 강의 감사합니다 ✨

진유림님의 다른 강의

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

팀 개발을 위한 Git, GitHub 입문

진유림

개인 프로젝트부터 현업 개발까지, 팀 개발에 필수적인 기술인 Git과 GitHub을 그림을 통해 쉽게 익힙니다. 아예 처음 익히는 분부터 실무 사례가 궁금한 분까지 모두 들으실 수 있습니다. CLI, GUI를 모두 사용해 공부합니다.

입문

Git, GitHub, 버전관리시스템

비슷한 강의

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

얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX

얄팍한 코딩사전

⚡ 짧고 굵은 전체 160분 강좌! 웹사이트에서 웹사이트로 코드를 복붙하며, ReactiveX를 통한 반응형 프로그래밍을 익히세요 😎

초급

RxJS, JavaScript, 함수형 프로그래밍

리액트 취준생을 위한 Zustand 실전 입문 가이드

DevForGoal

이 강의는 수강생이 Zustand의 기본 원리부터 실전 적용까지 체계적으로 학습하도록 돕습니다.

입문

React, zustand

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1

유용한IT학습

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 코딩을 처음 접하시는 분들도 쉽게 이해할 수 있도록 차근차근 설명하고 있습니다. Part 1은 자바스크립트의 개요와 변수, 자료형, 연산자, 제어문과 jQuery의 기초를 다루고 있습니다.

입문

JavaScript, jQuery

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

HTML/CSS, JavaScript, ES6

자바스크립트 : 기초부터 실전까지 올인원

코딩알려주는누나

자바스크립트 기초강의, 응용강의, 포트폴리오 전용강의 따로따로 찾아 볼게 아니라, 강의하나로 자바스크립트 기초부터 현업이 쓰는 다양한 응용 기술, 포트폴리오 까지 다 끝내고 싶으신 분들을 위한 강의입니다.

초급

JavaScript, HTML/CSS

실전 자바스크립트

이재승

자바스크립트에 대한 깊이 있는 이해를 원하시는 분에게 적합한 강의입니다. 2020년 기준 자바스크립트 최신 문법을 다룹니다.

중급이상

JavaScript, ES6

모던 자바스크립트(ES6+) 기본

김영보

4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다.

초급

JavaScript, ES6

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

JavaScript, jQuery, HTML/CSS

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

mongoDB 기초부터 실무까지(feat. Node.js)

김시훈 (도도소프트)

mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

초급

MongoDB, REST API, Node.js