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

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

(4.9)
247개의 수강평 ∙  6,288명의 수강생

41,800원

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

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

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

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

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

📗 책으로까지 출판된 인기 리액트 강의

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

🧑‍💻 유감스럽지만, 리액트(React.js)
단순 사용법만 배워선 아무것도 할 수 없습니다.

단순 사용법만 배워 코딩만 하는 사람을 "개발자"라고 부르지 않습니다.
개발자는 맞닥뜨린 문제를 코드로 해결하는 사람입니다.
우리는 이 강의를 통해 리액트로 문제를 해결하는 방법을 배워나갈 것 입니다.

🌌 자바스크립트, Node.js 모르는데
리액트를 배우려 하시나요?

리액트는 Node.js 환경에서 구동되는 자바스크립트 라이브러리입니다.
즉, 이 두 개의 개념에 대한 사전 학습이 되어있지 않다면 이해도 활용도 제대로 할 수 없습니다.

이 강의는 자바스크립트의 아주 기본적인 스펙부터 엔진의 처리 과정과 Node.js 개념을 다루며,
여러분을 탄탄한 기본기를 갖춘 프론트엔드 개발자로 만들어 드립니다.


* 질문에 대한 답을 생각해보세요.

  1.  비동기 함수와 비동기 함수에 전달된 콜백함수는 어떻게 처리되나요? (웹 환경)
  2.  Node.js는 왜 필요하며, 어떤 자바스크립트 엔진을 이용하여 만들어졌나요?

아주 기초적인 질문임에도 만약 대답이 잘 떠오르지 않다면
아직 리액트를 학습하기에 필요한 기본기가 부족한 것일 수도 있습니다.
그렇다고 기초 강의부터 다시 학습하실 필요 없습니다, 이 강의는 All-in-One이니까요!

학습 내용 📚

1. 자바스크립트 기본

자바스크립트는 어떤 언어이고, 어디서 실행되는가? 초심자도 쉽게 들을 수 있도록 준비했어요!
이미 자바스크립트를 알아도 헷갈리는 부분을 복습하기 좋아요.

2. 자바스크립트 응용

단축표현부터 비동기 처리와 API 호출까지!
앞으로 작성하는 모든 코드가 이해될 수 있도록 자바스크립트 엔진을 직접 하나하나 뜯어볼 거예요.

3. Node.js

Node.js는 리액트의 런타임 (실행 환경)이예요.
피할 수 없다면 즐겨라! 필요한 부분만 쏙 뽑아서 알려드려요!

4. React.js 입문

맹목적으로 리액트 사용법을 빠르게 배우는 것보다 더 중요한 것은
왜 리액트가 필요한지, 어떤 상황에서 유용한지 아는 거랍니다!

5. React.js 기본

아주 간단한 원페이지 프로젝트를 만들어보면서 리액트의 기본 사용법을 배웁니다.

6. React.js 실전 프로젝트

감정일기장 프로젝트를 진행하며 페이지 라우팅, 스토리지, 배포 등의 개념도 같이 다룹니다.
지금까지 배운 모든 지식을 총동원하여 마지막에 실제로 배포해요!


강의 기획 배경 🔧

시중에 이미 출판된 리액트 강의는 많지만 몇가지 안타까운 수강 사례가 보였습니다.

🎯 자바스크립트나 Node.js와 같은 "기본기"는 포함되어 있지 않은 강의가 대다수
혼자 따로 공부해야 하는 번거로움이 존재하며 높은 진입장벽을 느꼈을 거라고 생각합니다.

🎯 너무 진부한 Todo List 만들기
Todo List가 프론트엔드 강의 시장에서 가장 매력적인 튜토리얼 프로젝트 주제였던 것 같습니다.
그러나 수강생의 입장에서는 조금 더 독특한 프로젝트를 만들고 싶은 마음도 있었을 거라는 생각에
감정일기장 프로젝트를 기획하게 되었습니다.

🎯 배포되지 않는 결과물 (프로젝트)
웹서비스는 기획하고 개발하는 것도 중요하지만, 실제 배포하는 과정 또한 매우 중요합니다.
그러나 대다수의 강의가 실제 배포까지 이어지는 과정을 담지 않다보니 아쉬웠습니다.
따라서 위에 언급한 감정일기장을 Firebase를 이용해 간단하게 배포하는 과정을 추가하였습니다.

🎯 Open Graph : 사소한 디테일
우리 사이트를 설명하는 Open Graph 설정은 쉽고 간단하지만,
SNS에 공유 시 더 완성도 있는 서비스처럼 보일 수 있게 해주는 훌륭한 기술입니다. 
대부분의 강의가 이를 다루지 않고 있어 간단하게 Open Graph 설정 부분을 포함하였습니다.


혹시, 여러분의 고민은 아닌가요? 😵

HTML, CSS 기초만 배웠는데
프론트엔드 개발자가 되려면 또 무엇을 배워야 하나요?

Vue, Angular, Svelte 등
이렇게 많은 기술 중 어떤 것을 배워야 하나요?

전형적인 프로젝트가 아닌,
독특한 결과물을 만들어보고 싶어요!


강의 특징 ✨

배웠으면 바로 써먹어야죠,
실제 배포되는 프로젝트 개발!

데이터를 추가 / 수정 / 삭제하는 방법과 Local Storage를 이용하여 웹 브라우저를
DB처럼 이용하는 방법까지 배워 firebase를 이용해 무료로 인터넷에 배포합니다.
(데모 :  https://emotion-diary-winterlood.web.app/ )

감성은 이렇게!
링크까지 예쁜 프로젝트 개발

배포만으로 끝나진 않아요. 언제나 사소한 디테일이 진짜와 가짜를 가르는 법!
Open Graph 설정을 통해 마지막의 마지막인 링크 공유까지 예쁘게 만들어봅니다.

개념 설명은 시각자료가 가장 이해하기 편하기에,
직접 제작한 다크모드 PPT로 알려드립니다. 


강의 이후에도 함께!
수강생 전용 커뮤니티

학습에는 끝이 없습니다. 이 강의가 끝나더라도 수강생 전용 커뮤니티에 모여 서로 지식과 소식을 공유하며 성장합니다.
디스코드 채널 참가 : https://discord.gg/YDqhkH8XkN
(오픈채팅방은 수업 자료에서 확인하실 수 있습니다)


예상 질문 Q&A 💬

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

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

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

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

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

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


지식공유자 소개 ✒️

이력 사항

  • 22Hours CTO | FrontEnd Developer
  • 대학생 개발자 지식 공유 커뮤니티 DEVSTU 개발 및 운영 
  • 가톨릭대학교 컴퓨터정보공학부 졸업

포트폴리오/개인 영상



이런 분들께 추천드려요!

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

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

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

IT 스타트업에서 2년간 CTO로 근무했으며

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

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

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

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

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

커리큘럼 총 67 개 ˙ 16시간 57분의 수업
이 강의는 영상, 수업 노트, 첨부 파일, 미션이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 들어가며
섹션 2. JavaScript 응용
Truthy & Falsy 09:09
삼항 연산자 10:25
단락회로 평가 07:15
조건문 업그레이드 06:27
비 구조화 할당 09:51
Spread 연산자 04:53
동기 & 비동기 미리보기 26:00
Promise - 콜백 지옥에서 탈출하기 26:12
async & await - 직관적인 비 동기 처리 코드 작성하기 08:31
API 호출하기 13:08
섹션 3. Node.js 기초
Node.js란? 미리보기 07:10 Node.js & VsCode 설치하기 미리보기 17:50
Node.js Hello World & Common JS 13:44
Node.js 패키지 생성 및 외부 패키지 사용하기 17:17
섹션 4. React.js 기초
섹션 5. React 기본 - 간단한 일기장 프로젝트
프로젝트 소개 미리보기 01:02
React에서 사용자 입력 처리하기 32:50
React에서 DOM 조작하기 - useRef 08:11
React에서 배열 사용하기 1 - 리스트 렌더링 (조회) 22:57
React에서 배열 사용하기 2 - 데이터 추가하기 16:07
React에서 배열 사용하기 3 - 데이터 삭제하기 07:20
React에서 배열 사용하기 4 - 데이터 수정하기 20:45
React Lifecycle 제어하기 - useEffect 21:39
React에서 API 호출하기 10:32
React developer tools 06:28
최적화 1 - useMemo 15:12
최적화 2 - React.memo 28:25
최적화 3 - useCallback 15:56
최적화 4 - 최적화 완성 06:22
복잡한 상태 관리 로직 분리하기 - useReducer 23:11
컴포넌트 트리에 데이터 공급하기 - Context 23:39
섹션 6. React 실전 프로젝트 - 감정 일기장 만들기
프로젝트 완성 예시 미리보기
페이지 라우팅 0 - React SPA & CSR 14:34
페이지 라우팅 1 - React Router 기본 21:55
페이지 라우팅 2 - React Router 응용 15:19
프로젝트 기초 공사 1 37:33
프로젝트 기초 공사 2 12:38
페이지 구현 - 홈 (/) 58:07
페이지 구현 - 일기 쓰기 (/new) 41:26
페이지 구현 - 일기 수정 (/edit) 14:46
페이지 구현 - 일기 상세 (/diary) 23:07
(서브 챕터) 흔히 발생하는 버그 수정 하기 07:21
LocalStorage를 일기 데이터베이스로 사용하기 21:41
프로젝트 최적화 16:11
배포 준비 & 프로젝트 빌드하기 19:55
Firebase로 프로젝트 배포하기 14:40
Open Graph 설정하기 미리보기 06:10
강의 게시일 : 2022년 01월 27일 (마지막 업데이트일 : 2023년 12월 12일)
수강평 총 247개
수강생분들이 직접 작성하신 수강평입니다.
4.9
247개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김영우 thumbnail
5
좋은 강의 감사합니다. React 를 처음 배우게 되었는데, 재밌고 빠르게 배울 수 있었습니다.
2022-05-10
우리우리 thumbnail
5
리액트 개념 부터 배포까지, 찬찬히 따라하면서 잡을 수 있었습니다!
2022-05-09
seonjun Moon thumbnail
5
저는 사실 만우절에 천원에 강의를 뿌리시길래... 혹시 몰라서 사둿거든요 로또마냥... 그러런데 로또에 정말 당첨된 느낌입니다. 이렇게 좋은 강의를 거의 무료의 가격에 듣고 공부해서 미안합니다... 그만큼 강의가 너무 친절하면서 예제도 다 알기 쉽게 설명해주셔서 진짜 너무 좋아요. 너무 고맙고 사랑합니다... ㅠㅠ
2022-06-01
학운학운 thumbnail
5
타사이트에서 영어로 먼저 리액트를 수강했습니다. 영어를 100% 이해하지 못한 상태에서 수강하다보니 개념을 잘못 이해하거나 설명을 했는데 이해하지 못하는 문제가 있었습니다. 그래서 인프런에서 리액트 강의를 찾아보다가 좋아보여서 듣게되었습니다. 강의는 자바스크립트부터 다시 알려주셔서 자바스크립트까지 공부하게 되어 좋았습니다. 리액트에 대해서도 개념을 잘 알려주셔서 공부가 많이 되었습니다. 한가지 아쉬운 것은 A->C를 설명하실 때 중간에 A->B->C 이렇게 B까지 설명해주신다면 이해하기 훨씬 좋았을 것 같은 부분도 몇군데 있었습니다. 그런 것들은 강의 질문답변란에서 다른 분들도 질문을 많이 남겨주셨더라구요. 이런 부분만 보완이 된다면 정말 100점 강의일 것 같습니다.
2022-08-22
peekaboo thumbnail
5
이런 설명력과 이런 내용들을 담고 있는데 이 가격은 말이 안 됩니다 두배로 받으셨어도 될 것 같은데 정말 사장님이 미쳤어요 같은 강의.. 아직 다 소화를 했다고 하긴 어렵지만 반복 학습하면서 마스터해보겠습니다 좋은 강의 만들어주셔서 감사합니다 :) !!
2022-05-12