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

웹 게임을 만들며 배우는 React

(5.0)
249개의 수강평 ∙ 9834명의 수강생

무료

지식공유자: 조현영
총 68개 수업 (13시간 45분)
수강기한: 무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다.

✍️
이런 걸
배워요!
리액트 개발
리액트 Hooks 사용
Context API 사용
바벨&웹팩
React-Router 사용

8개의 간단한 웹게임을 만들어보며 배우는 리액트 강좌입니다.
React Hooks에서부터 Context API까지 최신 API를 활용합니다.

다 배우신 후에는 리액트 유료강좌(SNS 만들기)를 수강하시면 좋습니다.

다양한 웹 게임을 만들어볼까요? :D


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트를 배우고 싶은 개발자
프론트엔드 개발자 지망생
📚
선수 지식,
필요한가요?
자바스크립트 최신 문법

안녕하세요
조현영 입니다.
조현영의 썸네일
– Node.js교과서, Let's Get IT 자바스크립트 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 오늘의픽업 CTO(카카오모빌리티에 엑싯)
- 카카오모빌리티 기술파트장
커리큘럼 총 68 개 ˙ 13시간 45분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 구구단
리액트를 왜 쓰는가 미리보기 10:52 강의 수강 시 주의할 점 미리보기 07:37 첫 리액트 컴포넌트(아직은 Class) 미리보기 12:41
가독성을 위한 JSX(XML임!) 14:13
클래스 컴포넌트의 형태와 리액트 데브툴즈 11:03
함수 컴포넌트(함수형 아님) 15:11
구구단 리액트로 만들기 11:49
클래스 메서드 10:47
Fragment와 기타 팁들 09:57
함수형 setState 06:29
ref 07:51
섹션 1. 끝말잇기
2-1. React Hooks 사용하기 13:48
2-2. Class와 Hooks 비교하기 12:41
2-3. 웹팩 설치하기 15:48
2-4. 모듈 시스템과 웹팩 설정 13:26
2-5. 웹팩으로 빌드하기 14:43
2-6. 구구단 웹팩으로 빌드하기 12:10
2-7. @babel/preset-env와 plugins 15:02
2-8. 끝말잇기 Class 만들기 12:21
2-9. 웹팩 데브 서버와 핫 리로딩 미리보기 12:10
2-10. 끝말잇기 Hooks로 전환하기 11:41
컨트롤드 인풋 vs 언컨트롤드 인풋 11:06
섹션 2. 숫자야구
3-1. import와 require 비교 09:02
3-2. 리액트 반복문(map) 11:42
3-3. 리액트 반복문(key) 10:57
3-4. 컴포넌트 분리와 props 12:12
3-5. 주석과 메서드 바인딩 09:34
3-6. 숫자야구 만들기 17:52
3-7. Q&A 06:56
숫자야구 Hooks로 전환하기(+useState lazy init) 12:14
3-9. React Devtools 08:59
3-10. shouldComponentUpdate 08:50
3-11. 억울한 자식 리렌더링 막기(PureComponent와 memo) 13:30
3-12. React.createRef 07:12
3-13. props와 state 연결하기 09:45
섹션 3. 반응속도체크
4-1. React 조건문 13:59
4-2. setTimeout 넣어 반응속도체크 13:21
4-3. 성능 체크와 Q&A 11:18
4-4. 반응속도체크 Hooks로 전환하기 11:45
4-5. return 내부에 for과 if 쓰기 05:44
섹션 4. 가위바위보
5-1. 리액트 라이프사이클 소개 14:26
5-2. setInterval과 라이프사이클 연동하기 10:48
5-3. 가위바위보 게임 만들기 09:56
5-4. 고차 함수와 Q&A 07:53
5-5. Hooks와 useEffect 13:48
5-6. 클래스와 Hooks 라이프사이클 비교 08:12
커스텀 훅으로 우아하게 interval하기 12:56
섹션 5. 로또 추첨기
6-1. 로또 추첨기 컴포넌트 14:59
6-2. setTimeout 여러 번 사용하기 11:14
6-3. componentDidUpdate 13:18
6-4. useEffect로 업데이트 감지하기 14:13
6-5. useMemo와 useCallback 15:04
6-6. Hooks에 대한 자잘한 팁들 13:31
섹션 6. 틱택토
7-1. 틱택토와 useRedcuer 소개 12:37
7-2. reducer, action. dispatch의 관계 11:21
7-3. action 만들어 dispatch 하기 13:47
7-4. 틱택토 구현하기 18:06
7-5. 테이블 최적화하기 19:50
섹션 7. 지뢰찾기
8-1. Context API 소개와 지뢰찾기 10:46
8-2. createContext와 Provider 11:12
8-3. useContext 사용해 지뢰 칸 렌더링 15:26
8-4. 왼쪽 오른쪽 클릭 로직 작성하기 20:11
8-5. 지뢰 개수 표시하기 10:20
8-6. 빈 칸들 한 번에 열기 17:25
8-7. 승리 조건 체크와 타이머 18:06
8-8. Context api 최적화 11:39
섹션 8. React-router
유튜브에서 제공합니다. ZeroCho TV 유튜브 재생목록 확인해주세요!
섹션 9. React 18
useLayoutEffect, useTransition, useDeferredValue 15:42
강의 게시일 : 2019년 06월 17일 (마지막 업데이트일 : 2022년 11월 23일)
수강평 총 249개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5
249개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
민트클래식 thumbnail
지금 다른 유료 리액트 수업 결제해서 듣고 있는데 정말로 너무너무 하기가 싫더라구요😫😫😫 그래서 이 강의나 들어볼까 해서 보고 있는데 너무 재미있어요 게다가 무료라니...💛 유료강의 환불할까봐요.... 이거 듣고 트위터짝퉁 유료 수업 결제하러 갑니다
2020-09-15
mhr thumbnail
리액트를 애매하게 알고 있어서 들을지 말지 고민을 하다가 빠른 배속으로 해서 정주행 했는데 듣기를 잘 한 것 같습니다. 굉장히 유익하네요.
2021-04-04
tunion00 thumbnail
약 4명의 강사님들의 React강의를 들었는데 단연 최고입니다. 초보자가 이해하기 가장 쉽게 설명하며 이론설명뿐 아니라 예제를 통해 실제로 써볼 수 있고 오류도 같이 내면서 쉽고 재미있게 학습이 가능합니다. 제 리액트 강좌 원픽이에요. 앞으로도 좋은 강의 많이 만들어주세요 :)
2020-11-12
허준혁 thumbnail
유튜브에서 1회독하고 여기서 2회차 수강중입니다. 기초부터 세세하게 알려주셔서 너무 감사합니다. 장점: - Class로 먼저 개발 후, Hooks로 개발하는 것을 보여주십니다. Hooks로 대세가 넘어갔지만 기존 코드들은 Class 기반일 수도 있으니 어떻게 작동하는지 알아야하는데 큰 도움이 됐습니다. 또한 같은 것을 두가지 방식으로 코딩해보니 제가 알고 있다고 생각하고 넘어간 부분도 다시 보게 되더라구요. - 중간 중간 에러가 나는 부분이 있는데 이를 실시간으로 디버깅해주시면서 어떤식으로 디버깅해야하는지 보여주십니다. 실무에서 큰 도움이 되는 스킬이라고 생각합니다. 단점: - 장점이자 단점인데 알고리즘 부분을 제외하고 리액트로 구현하는 법만 보여주십니다. 그래서 좋았지만 구현하고자 하는 것이 어떤것인지 간단하게라도 설명해주시면 좋을 것 같습니다. 강사님께서 자바스크립트 강의를 보면 나온다고 하셨지만 그것까지 자바스크립트 강의 들으면 처음부터 끝까지 다 듣고 리액트 강의로 돌아올 것 같았습니다. 그래서 그냥 했더니 코드를 따라치고 나서야 "아 숫자야구가 이런거구나"를 알수 있었습니다. 구현 알고리즘을 설명해주시지 않으셔도 "숫자야구는 4개의 숫자를 입력해서 숫자와 자리가 모두 맞으면 스트라이크, 숫자는 맞되 자리가 틀리면 볼, 4개의 숫자와 4개의 자리 모두 맞추면 홈런이 나옵니다" 정도만 말씀해주셨어도 따라치기전 무엇을 따라치는지 도움이 됐을 것 같습니다. 이부분때문에 100점 만점에 99.999999999점 드립니다. 담주에 월급들어오면 노드 교과서 강의 구입하러 갑니다. 좋은 강의 더 많이 찍어주세요
2022-03-08
야호 thumbnail
리액트 개발를 기본부터 차근차근 설명해주셔서 큰 흐름 잡기에 좋습니다.
2022-11-12
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!