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

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 대시보드

(4.9)
269개의 수강평 ∙  6,756명의 수강생

48,400원

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

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

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

✍️
이런 걸
배워요!
실제 배포되는 감정일기장 프로젝트 개발
자바스크립트, Node.js, Web 동작 방식 All-in-One
React 깔끔한 코드 작성, 성능 최적화 기법

리액트, 한 강의로 끝장낼 수 있어요.
한 입 크기로 잘라먹을 수 있도록 도와드릴게요. 🔥

많은 수강생 여러분이 사랑해 주신 덕분에 인사이트 출판사와 함께 강의를 도서로 펴낼 수 있었습니다.
다시 한번 모든 수강생 여러분, 관심 가져주신 여러분들께 진심으로 감사드립니다.


2024 리뉴얼 버전 
한 입 크기로 잘라먹는 리액트
세상에서 가장 친절하고, 세상에서 가장 쉬운 리액트 강의를 향해

JavaScript 기초부터,
React.js 실전 프로젝트까지

React.js는 Node.js 환경에서 구동되는 JavaScript의 라이브러리입니다.
그러므로 React.js는 결국 JavaScript를 더 잘 활용할 수 있도록 도와주는 도구에 불과합니다.
따라서 JavaScript와 Node.js를 제대로 이해하고 있지 못하다면 React.js를 제대로 활용할 수 없습니다.

이 강의는 JavaScript 기초부터 Node.js를 거쳐 React.js를 배웁니다.
그런데 그냥 배우면 또 재미없죠! 총 3번의 프로젝트를 통해 React.js를 배웁니다.
이런 과정 속에서 여러분은 탄탄한 기본기를 갖춘 프론트엔드 개발자로 거듭나시게 될 겁니다.

18시간의 분량
총 3번의 React.js 프로젝트

이 강의는 React.js의 단순 사용법만 알려주는 강의가 아닙니다.
React.js를 둘러싼 다양한 CS 지식도 함께 다루며 총 3번의 프로젝트 
카운터앱, 투두리스트, 감정일기장을 만들어보며 프로그래밍 사고력도 함께 기를 수 있습니다.


강의 구성

📌 섹션 1~2. 자바스크립트 기초 및 심화

React.js를 배우기 앞서 JavaScript의 기초 및 심화 개념을 살펴봅니다.
자료형 및 연산자같은 기본적인 개념부터,
배열메서드나 비동기 작업같은 심화적인 내용도 함께 살펴봅니다.

만약 JavaScript를 이미 알고 있다 하더라도 복습 차원에서 다시둘러보기 좋습니다.

 

📌 섹션 3. Node.js

React.js는 Node.js를 기반으로 동작하는 기술입니다. 따라서 Node.js를 모르는데 React.js를 알 수는 없죠
3섹션에서는 Node.js란 무엇이고, 왜 탄생하게 되었고, 어떤 기능을 가지고 있는지 실습과 함께 살펴봅니다.

 

📌 섹션 4. React.js 개론

React.js란 무엇이고 타 기술과 비교해 어떤 차별점을 갖고 있는지 알아보고, 기존의 기술들이 갖던 한계점을 어떻게 해결했는지 자세히 살펴봅니다. 이 과정에서 우리는 React.js에 대해 더 깊이 이해하게 될 것 입니다.

 

📌 섹션 5. React.js 입문

새로운 React App을 생성하고 React의 Component, State, Props 등의 기본적인 기능에 대해 살펴봅니다.
실습과 함께 모든 기본 기능을 사용해 보고 그림자료와 함께 시각적으로 완벽히 이해합니다.

 

⛳️ 섹션 6. React.js 프로젝트 1. 카운터 앱

첫번째 리액트 프로젝트 "카운터 앱"을 직접 만들어봅니다.
간단하지만 React.js의 동작 원리와 설계 철학을 엿볼 수 있는 좋은 프로젝트입니다.

 

📌 섹션 7.  라이프사이클

모든 인간이 태어나 유아기, 청소년기, 청년기, 노년기를 거쳐 황혼에 도달하는 것 처럼 모든 리액트 컴포넌트도 태어나, 변화되고, 사라집니다. 이런 컴포넌트의 생애주기를 라이프사이클 이라고 표현합니다.

컴포넌트의 라이프사이클을 이해하고 제어할 수 있게 되면 원하는 타이밍에 원하는 동작을 수행시킬 수 있게 됩니다. 따라서 7섹션에서는 라이프사이클에 대해 살펴보고 실습과 함께 이를 제어하는 방법을 살펴봅니다.

 

⛳️ 섹션 8. React.js 프로젝트 2. 투두리스트

두번째 리액트 프로젝트 "투두리스트 앱"을 직접 만들어봅니다.
이 프로젝트를 구현하면서 데이터 CRUD(추가, 조회, 수정, 삭제) 및 검색 기능 등의
React에서 배열 형태의 데이터를 다루는 여러가지 방법을 살펴봅니다.

 

📌 섹션 9.  useReducer - 상태관리 로직 분리하기

역할에 따른 코드의 분리는 언제나 소프트웨어 개발의 미덕입니다.
복잡한 상태 관리 코드를 분리할 수 있도록 도와주는 useReducer에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

📌 섹션 10.  최적화

우리 프로젝트에 불필요한 연산이 존재한다면? 과감히 제거해야 겠죠!
낭비되는 연산을 제거하는 React App의 여러가지 최적화 기법을 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

📌 섹션 11.  Context

더 간결하고 더 깔끔하게 다양한 컴포넌트에 데이터를 공급하는 Context에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

⛳️ 섹션 12. React.js 프로젝트 3. 감정 일기장

지금까지 배운 개념을 총 동원 해최종 프로젝트 감정 일기장을 직접 만들어봅니다.
추가로 브라우저의 데이터베이스를 사용하고, 프로젝트를 배포해 사용자들이 접속할 수 있도록 만듭니다.
데모 링크 : https://emotion-diary.winterlood.com/

 

📌 섹션 13.  마치면서

강의는 끝나지만 우리의 학습은 끝나지 않습니다.
앞으로 어떤 방향성을 가지고 나아가야 할지 이야기 해 봅니다.


세상에서 가장 친절한
리액트 강의를 위한 4가지 원칙

📣 원칙 1. 반드시 쉽고 친절하게, 시각적으로 설명할 것

아무리 복잡하고 어려운 내용이더라도!
시각자료와 함께 친절하고 쉽게 설명하기 위해 부단히 노력했습니다.
모두 직접 만든 이미지들이라 캡처해서 학습 블로그 포스팅에 이용하셔도 됩니다. 😃

 

📣 원칙 2. 배속으로 재생해도 다 들리도록 발음할 것

복습을 위해 다시 듣는 중이거나, 바쁘다면 배속으로 들어보세요! 
최대 2배속 까지 발음이 잘 들리도록 각별히 신경썼어요 😎
(아래의 1.5배속으로 재생되는 영상을 한번 들어보세요!)

📣 원칙 3. 코드를 찾아보기 쉽게 저장해둘 것

애써 작성한 실습 코드들을 아무렇게나 보관하면 아쉽죠? 
언제든 다시 돌아볼 수 있도록 코드를 섹션별로 잘 나누어 보관할 수 있도록 신경 썼어요.
코드 보관소 링크 : https://github.com/winterlood/onebite-react-v2

📣 원칙 4. 끊임없이 소통할 것

수강생 전용 커뮤니티에 모여 서로 지식과 소식을 공유하며 성장합니다.

디스코드 채널 참가 : https://discord.gg/YDqhkH8XkN
(오픈채팅방은 수업 자료에서 확인하실 수 있습니다)

예상 질문 Q&A 💬

Q. 강의 수강 대상이 어떻게 되나요?

HTML, CSS에 대한 이해가 있으신 분들이 듣기에 최적화된 강의입니다.
다만 강의 중간중간에 설명이 존재하기에 내용 숙지가 빠삭하지 않아도 됩니다!

Q. 이제 막 시작하려 합니다. 자바스크립트, Node.js는 잘 모르는데 들어도 괜찮을까요?

네, 환영합니다! 🙋‍♂️
본 강의는 리액트를 학습하는데 꼭 필요한 자바스크립트 지식과 Node.js 지식까지 알려드려요.
따라서 본 강의 하나로 리액트에 필요한 기초 지식을 먼저 학습하고, 리액트까지 학습할 수 있습니다.

Q. 수업에서 어느 정도의 수준까지 다뤄지나요?

React가 탄생한 이유부터 기본적인 사용법, 실제 프로덕션 개발을 위한 성능 최적화 기법을 다룹니다.
또, Vercel를 이용하여 실제로 배포하고 Open Graph 설정으로 마무리하여
웹 프로젝트의 처음부터 끝까지 개발할 수 있는 모든 지식을 담고 있습니다.


포트폴리오 및 개인 영상

 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트를 배우고 싶은데, 자바스크립트/Node.js를 잘 모르는 사람
Angular, Backbone 등 타 프레임워크/라이브러리 경험이 있는 사람
강의 완주 시 자랑할만한 결과물을 만들고 싶은 사람
HTML, CSS를 학습해본 사람
📚
선수 지식,
필요할까요?
HTML, CSS에 대한 아주 기초적인 지식

안녕하세요
이정환 Winterlood 입니다.
이정환 Winterlood의 썸네일

무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람입니다.

인사이트 "한 입 크기로 잘라먹는 리액트" 도서의 저자입니다.

주니어 개발자 혹은 개발자들을 희망하는 이들을 돕기 위해

지식 공유사이트 DEVSTU를 개발해 약 2년간 운영했고

리액트 개발자들을 위한 오픈채팅방을 운영하고 있습니다.

좋은 발성과 딕션 그리고 시각자료에 언제나 진심입니다.

커리큘럼 총 97 개 ˙ 18시간 28분의 수업
이 강의는 영상, 수업 노트, 첨부 파일, 미션이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 들어가며
강의 및 강사 소개 미리보기 08:09
수강생 커뮤니티 참가 안내
예제 코드 및 강의 자료 안내
리뉴얼 이전 버전 강의 시청안내
섹션 2. JavaScript 심화
2.1) Truthy와 Falsy 10:12
2.2) 단락 평가 12:30
2.3) 구조분해할당 07:40
2.4) Spread 연산자와 Rest 매개변수 07:57
2.5) 원시타입 VS 객체타입 13:44
2.6) 반복문으로 배열과 객체 순회하기 12:09
2.7) 배열 메서드1. 요소 조작 12:20
2.8) 배열 메서드2. 순회와 탐색 14:25
2.9) 배열 메서드 3. 배열 변형 14:48
2.10) Date 객체와 날짜 10:31
2.11) 동기와 비동기 미리보기 11:41
2.12) 비동기 작업 처리하기 1. 콜백함수 10:46
2.13) 비동기 작업 처리하기 2. Promise 19:39
2.14) 비동기 작업 처리하기 3. Async&Await 06:39
섹션 3. Node.js 기초
3.1) Node.js를 소개합니다 미리보기 05:09 3.2) Node.js 설치하기 미리보기 07:16
3.3) Node.js 사용하기 09:03
3.4) Node.js 모듈 시스템 이해하기 14:42
3.5) Node.js 라이브러리 사용하기 09:03
섹션 4. React.js 개론
섹션 5. React.js 입문
5.1) 실습 준비하기 07:41
5.2) React 컴포넌트 10:26
5.3) JSX로 UI 표현하기 15:43
5.4) Props로 데이터 전달하기 12:15
5.5) 이벤트 처리하기 08:17
5.6) State로 상태관리하기 14:32
5.7) State와 Props 09:09
5.8) State로 사용자 입력 관리하기 1 14:25
5.9) State로 사용자 입력 관리하기 11:49
5.10) useRef로 컴포넌트의 변수 생성하기 14:03
5.11) React Hooks 10:57
섹션 6. 프로젝트1. 카운터 앱
6.1) 프로젝트 소개 및 준비 미리보기 04:25
6.2) UI 구현하기 08:02
6.3) 기능 구현하기 11:28
섹션 7. 라이프사이클
7.1) 라이프사이클이란? 미리보기 03:32
7.2) useEffect 사용하기 09:54
7.3) useEffect로 라이프사이클 제어하기 07:54
7.4) React 개발자 도구 사용하기 04:32
섹션 8. 프로젝트2. 투두리스트
8.1) 프로젝트 소개 및 준비 미리보기 03:25
8.2) UI 구현하기 19:05
8.3) 기능 구현 준비하기 04:54
8.4) Create - 투두 추가하기 11:32
8.5) Read - 투두리스트 렌더링하기 13:58
8.6) Update - 투두 수정하기 06:31
8.7) Delete - 투두 삭제하기 04:35
섹션 9. useReducer
9.1) useReducer를 소개합니다 14:20
9.2) 투두리스트 업그레이드 07:05
섹션 10. 최적화
10.1) 최적화란 02:24
10.2) useMemo와 연산 최적화 12:04
10.3) React.memo와 컴포넌트 렌더링 최적화 14:58
10.4) useCallback과 함수 재생성 방지 07:48
섹션 11. Context
11.1) Context란 05:34
11.2) Context 사용하기 12:01
11.3) Context 분리하기 11:32
섹션 12. 프로젝트3. 감정 일기장
12.1) 프로젝트 소개 및 준비 미리보기 02:30
12.2) 페이지 라우팅 1. 소개 14:01
12.3) 페이지 라우팅 2. 라우팅 설정하기 11:57
12.4) 페이지 라우팅 3. 페이지 이동 05:31
12.5) 페이지 라우팅 4. 동적 경로 06:04
12.6) 폰트, 이미지, 레이아웃 설정하기 17:53
12.7) 공통 컴포넌트 구현하기 17:49
12.8) 일기 관리 기능 구현하기 1 12:11
12.9) 일기 관리 기능 구현하기 2 16:25
12.10) Home 페이지 구현하기 1. UI 25:31
12.11) Home 페이지 구현하기 2. 기능 28:22
12.12) Home 페이지 구현하기 3. 회고 09:46
12.13) New 페이지 구현하기 1. UI 27:44
12.14) New 페이지 구현하기 2. 기능 27:25
12.15) Edit 페이지 구현하기 29:03
12.16) Diary 페이지 구현하기 27:59
12.17) 웹 스토리지 이용하기 35:14
12.18) 배포 준비하기 13:26
12.19) 배포하기 09:45
섹션 13. 마치면서
강의 게시일 : 2022년 01월 27일 (마지막 업데이트일 : 2024년 04월 12일)
수강평 총 269개
수강생분들이 직접 작성하신 수강평입니다.
4.9
269개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김영우 thumbnail
5
좋은 강의 감사합니다. React 를 처음 배우게 되었는데, 재밌고 빠르게 배울 수 있었습니다.
2022-05-10
학운학운 thumbnail
5
타사이트에서 영어로 먼저 리액트를 수강했습니다. 영어를 100% 이해하지 못한 상태에서 수강하다보니 개념을 잘못 이해하거나 설명을 했는데 이해하지 못하는 문제가 있었습니다. 그래서 인프런에서 리액트 강의를 찾아보다가 좋아보여서 듣게되었습니다. 강의는 자바스크립트부터 다시 알려주셔서 자바스크립트까지 공부하게 되어 좋았습니다. 리액트에 대해서도 개념을 잘 알려주셔서 공부가 많이 되었습니다. 한가지 아쉬운 것은 A->C를 설명하실 때 중간에 A->B->C 이렇게 B까지 설명해주신다면 이해하기 훨씬 좋았을 것 같은 부분도 몇군데 있었습니다. 그런 것들은 강의 질문답변란에서 다른 분들도 질문을 많이 남겨주셨더라구요. 이런 부분만 보완이 된다면 정말 100점 강의일 것 같습니다.
2022-08-22
peekaboo thumbnail
5
이런 설명력과 이런 내용들을 담고 있는데 이 가격은 말이 안 됩니다 두배로 받으셨어도 될 것 같은데 정말 사장님이 미쳤어요 같은 강의.. 아직 다 소화를 했다고 하긴 어렵지만 반복 학습하면서 마스터해보겠습니다 좋은 강의 만들어주셔서 감사합니다 :) !!
2022-05-12
seonjun Moon thumbnail
5
저는 사실 만우절에 천원에 강의를 뿌리시길래... 혹시 몰라서 사둿거든요 로또마냥... 그러런데 로또에 정말 당첨된 느낌입니다. 이렇게 좋은 강의를 거의 무료의 가격에 듣고 공부해서 미안합니다... 그만큼 강의가 너무 친절하면서 예제도 다 알기 쉽게 설명해주셔서 진짜 너무 좋아요. 너무 고맙고 사랑합니다... ㅠㅠ
2022-06-01
우리우리 thumbnail
5
리액트 개념 부터 배포까지, 찬찬히 따라하면서 잡을 수 있었습니다!
2022-05-09
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!