Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

만들면서 배우는 리액트 : 기초 대시보드

(4.9)
153개의 수강평 ∙  1,388명의 수강생

44,000원

지식공유자: 진유림
총 37개 수업 (3시간 26분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

핵심만 쏙쏙!

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

스스로 점검해 보세요

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

초심자를 배려한 강의

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

실무에 활용할 수 있도록

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

이런 분들께 추천드려요!

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