Thumbnail
얼리버드 할인 중
NEW 개발 · 프로그래밍 프론트엔드
만들면서 배우는 리액트 : 기초
(4.9)
16개의 수강평 ∙ 210명의 수강생

30%

30,800원

44,000원
지식공유자 : 진유림
총 37개 수업˙총 3시간 26분
수강기한: 무제한
수료증 발급 강의
입문초급 대상중급이상
폴더에 추가 0 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
리액트 개발
프런트엔드 개발
웹 개발
나만의 토이프로젝트
백엔드 연동

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

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

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

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


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

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

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

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

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

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


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

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

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

핵심만 쏙쏙!

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

스스로 점검해 보세요

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

초심자를 배려한 강의

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

실무에 활용할 수 있도록

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

본 강의는 초급 - 중급 - 고급으로 구성된 시리즈의 첫 번째 [기초편] 강의입니다.
자세한 커리큘럼을 아래에서 바로 확인해보세요!

중급편Coming Soon!

  • 컨텍스트
  • 상태 라이브러리(Redux, Recoil)
  • 성능 최적화 (useMemo, useCallback)
  • 컴포넌트 설계하기
  • 돔 직접 조작하기 (useRef)
  • 리액트 훅 이해하기

고급편Coming Soon!

  • 디자인 패턴
  • 복잡한 Form 다루기
  • 서스펜스, 에러바운더리
  • 서버사이드렌더링 (SSR)
  • 타입스크립트 연동하기
  • 사이드이펙트
  • 테스트코드
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트를 처음 시작하는 웹 개발자
프런트엔드 개발자
리액트로 취업을 준비하는 취업 준비생
리액트를 배우고 싶은 퍼블리셔
리액트 문법은 아는데 실무에 어떻게 적용해야하는지 헷갈리는 사람
📚
선수 지식,
필요한가요?
HTML
CSS
JavaScript 기초

안녕하세요
진유림 입니다.
진유림의 썸네일

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

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

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

커리큘럼 총 37 개 ˙ 3시간 26분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 리액트 앱 바닥부터 만들기
9 컴포넌트가 뭔가요? 05:48
10 컴포넌트 만들기 08:49
11 컴포넌트 퀴즈 풀이 01:33
12 스타일링 06:21
13 이벤트 다루기 06:02
14 useState로 상태 만들기 04:22
15 상태 끌어올리기 06:52
16 useState 퀴즈풀이 01:56
17 리스트 06:36
18 배웠던 개념 조합해서 기능 추가 (상태, prop, 이벤트, 리스트) 06:36
19 폼 다루기 06:07
20 폼 검증하기 07:50
21 코드 정리하기 04:21
22 로컬스토리지에 데이터 싱크하기 06:42
23 로컬스토리지에 데이터 싱크하기 2 06:23
섹션 3. 지금까지 만든 앱 배포하기
24 github pages로 1차 배포 09:28
섹션 4. 중간 정리
25 지금까지 배운 개념 정리 1 (JSX, 바벨, 컴포넌트, 스타일링, 이벤트) 06:44
26 지금까지 배운 개념 정리 2 (상태, 리스트, 폼, 로컬스토리지) 05:49
섹션 5. 리액트 앱에 숨 불어넣기
27 실제 고양이 데이터 받아오기- fetch, Open API 06:33
28 고양이 데이터 내 앱에 연동하기 06:14
29 컴포넌트 생성시 고양이 데이터 받아오기- useEffect 04:30
30 useEffect의 정체 04:15
31 조건부 렌더링 07:07
32 퀴즈 풀이 01:15
33 setState 더 알아보기- 함수, 지연초기화 05:35
섹션 6. 실무 개발환경 만들기
34 create-react-app- 실무 개발환경 만들기 09:18
35 create-react-app 폴더 구조 뜯어보기 2 03:57
36 지금까지 만든 앱 create-react-app으로 옮기기 05:20
37 빌드한 결과물 github pages로 배포하기 08:24
강의 게시일 : 2022년 01월 14일 (마지막 업데이트일 : 2022년 01월 14일)
수강평 총 16개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
16개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
강동재 thumbnail
리액트라는걸 듣기만 했고 책을봐도 이해가 되지 않아 인프런을 통해 유료강의를 들었습니다. 초보자의 입장에서 이해하기 쉽고 수업내용도 잘짜여져 있어서 만족했습니다. 추후 중급편, 고급편도 강의가 있으면 듣고 싶을정도로 만족했습니다! 부디 꾸준히 강의 올려주시면 감사하겠습니다👍
2022-01-20
jay_ss thumbnail
리액트 공식문서로 입문하기 어려운 사람(저 포함)에게 도움이 되는 강의입니다:) 총 시간이 짧아 피로도도 적고, 반복적으로 학습하기에 좋습니다! 그럴싸한 웹 앱이 만들어지는 것도 너무 좋네요!!
2022-01-20
jinny thumbnail
리액트를 다운받아서 환경설정부터 하는 강의를 기대했는데 정말 가볍게 시작하는강의네요 하지만 이것도 좋아요 제일 좋은 부분은 강의가 대부분 10분이내로 짧다는거예요 강의가 짧고 빨리빨리 끝나서 한강 다듣고 혼자 더 만들기 딱 좋은 구성이네요 중급 강의도 기대돼요 왜냐하면 쉽게 설명해주셔서 아무것도 모르는제가 알아듣기 좋았으니 선생님의 중급강의도 중간에 포기하지 않고 들을 수 있을것같아요
2022-01-22
ccd1202 thumbnail
기존에 jquery를 사용하다 신규 프로젝트에서 react를 사용하고 싶어 강의를 수강하게 되었습니다. 초급강좌다 보니 쉬운 감이 있지만 프론트엔드를 처음 접하는 분에게는 정말 좋은 강의일 것 같습니다. 다음 중급, 고급 강좌도 얼른 출시되길 기다리고 있겠습니다.
2022-01-21
우주인 thumbnail
리액트를 처음 배우고 싶어서 이 강의를 선택하게 되었는데요 좋았던점은 중간중간 퀴즈도 있었고, git에 올리고 배포하는것들이 포함되어 있어서 좋았습니다 그리고 직접 만들어 보면서 배울 수 있어서 좋았습니다 다음 중급강의도 기대가 됩니다
2022-01-23
얼리버드 할인 중

30%

30,800원

44,000원
폴더에 추가 0 공유
지식공유자 : 진유림
총 37개 수업˙총 3시간 26분
수강기한: 무제한
수료증 발급 강의
입문초급 대상중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스