패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

웹 게임을 만들며 배우는 React(리액트)

'끝말잇기'부터 '테트리스'까지! 실제로 동작하는 웹 게임을 개발하며 쉽고 재밌게 자바스크립트와 리액트를 배울 수 있는 강의입니다.

강좌 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
리액트, 자바스크립트
추천 수강대상
- 리액트를 활용해 웹 게임을 개발하고 싶은 누구나
- 지루한 이론보다 유용한 꿀팁을 많이 챙기고 싶은 분
- 프론트엔드 개발자를 지망하시는 분
- 리액트를 처음 접하는 프레임워크 입문자

앵귤러, 뷰, 리액트?
프레임워크 도대체 뭐 써야 하나요?
알면 알수록 매력적인 프레임워크를
웹 게임으로 재밌게 배울 수 있다면?



<Node.js 교과서> 저자와 함께
웹 게임으로 리액트를 배워보자🌟

무심한 듯 콕콕 짚어주는 제로초 님과 함께!


React라는 프레임워크는
2019 stackoverflow 개발자들에게
가장 사랑받는 웹 프레임워크로 선정되었습니다.
페이스북에서 개발한 JS 라이브러리인 리액트는
현재 Vue.js와 프론트엔드 양대산맥을 이루고 있습니다.
좀 더 편안한 사용자 경험을 제공하고,
Single Page Application을 구현하기 위해
리액트를 사용할 수 있습니다.


웹 게임으로 좀 더 재밌게 배워볼까요?
본 강의는 리액트 웹 게임 개발 강좌입니다.
완강하시면 리액트 사용법뿐만 아니라
끝말잇기, 테트리스 등 실제로 동작하는
웹 게임 또한 포트폴리오로 사용할 수 있습니다.




🤔개발강좌가 노잼이라구?

내 손길 하나 하나에 완성되는 재미를 느껴보세요!






수업 전 꼭 확인하세요🎲
알고 들으면 수업효과 UP!






🙌웹 강좌 == 제로초

웹 강좌를 평정하기 위해 부지런히 움직이는
강의자님을 소개합니다.


제로초 조현영


웹과 관련된 모든 것에 관심 있습니다.
前 바리엘 크리에이티브 프론트엔드 개발자
前 myFit 개발 총괄 CTO


Node.js 교과서 저자 (길벗출판사)


블로그 및 유튜브 채널 운영


all Icon made by Freepik from www.flaticon.com

교육 과정
모두 펼치기
  • 01
    1. 구구단
    • 1-1. 리액트를 왜 쓰는가
    1-2. 첫 리액트 컴포넌트
    1-3. HTML 속성과 상태(state)
    1-4. JSX와 바벨(babel)
    1-5. 첫 번째 Q&A
    1-6. 구구단 리액트로 만들기
    1-7. 클래스 메서드
    1-8. Fragment와 기타 팁들
    1-9. 함수형 setState
    1-10. ref
  • 02
    2. 끝말잇기
    • 2-1. React Hooks 사용하기
    2-2. Class와 Hooks 비교하기
    2-3. 웹팩 설치하기
    2-4. 모듈 시스템과 웹팩 설정
    2-5. 웹팩으로 빌드하기
    2-6. 구구단 웹팩으로 빌드하기
    2-7. @babel/preset-env와 plugins
    2-8. 끝말잇기 Class 만들기
    2-9. webpack-dev-server와 hot-loader
    2-10. 끝말잇기 Hooks로 전환하기
  • 03
    3. 숫자야구
    • 3-1. import와 require 비교
    3-2. 리액트 반복문(map)
    3-3. 리액트 반복문(key)
    3-4. 컴포넌트 분리와 props
    3-5. 주석과 메서드 바인딩
    3-6. 숫자야구 만들기
    3-7. Q&A
    3-8. 숫자야구 Hooks로 전환하기
    3-9. React Devtools
    3-10. shouldComponentUpdate
    3-11. PureComponent와 React.memo
    3-12. React.createRef
    3-13. props와 state 연결하기
  • 04
    4. 반응속도체크
    • 4-1. React 조건문
    4-2. setTimeout 넣어 반응속도체크
    4-3. 성능 체크와 Q&A
    4-4. 반응속도체크 Hooks로 전환하기
    4-5. return 내부에 for과 if 쓰기
  • 05
    5. 가위바위보
    • 5-1. 리액트 라이프사이클 소개
    5-2. setInterval과 라이프사이클 연동하기
    5-3. 가위바위보 게임 만들기
    5-4. 고차 함수와 Q&A
    5-5. Hooks와 useEffect
    5-6. 클래스와 Hooks 라이프사이클 비교
  • 06
    6. 로또 추첨기
    • 6-1. 로또 추첨기 컴포넌트
    6-2. setTimeout 여러 번 사용하기
    6-3. componentDidUpdate
    6-4. useEffect로 업데이트 감지하기
    6-5. useMemo와 useCallback
    6-6. Hooks에 대한 자잘한 팁들
  • 07
    7. 틱택토
    • 7-1. 틱택토와 useReducer 소개
    7-2. reducer, action, dispatch의 관계
    7-3. action 만들어 dispatch 하기
    7-4. 틱택토 구현하기
    7-5. 테이블 최적화하기
  • 08
    8. 지뢰찾기
    • 8-1. Context API 소개와 지뢰찾기
    8-2. createContext와 Provider
    8-3. useContext 사용해 지뢰 칸 렌더링
    8-4. 왼쪽 오른쪽 클릭 로직 작성하기
    8-5. 지뢰 개수 표시하기
    8-6. 빈 칸들 한 번에 열기
    8-7. 승리 조건 체크와 타이머
    8-8. Context API 최적화
  • 09
    9. React Router
    • 9-1. React Router 도입하기
    9-2. Link와 브라우저라우터
    9-3. 해시라우터, params, withRouter
    9-4. location, match, history
    9-5. 쿼리스트링과 URLSearchParams
    9-6. render props, switch, exact
마지막 업데이트|2019년 08월 19일
강의자 소개
조현영캡틴
안녕하세요. 구름에듀 캡틴 조현영입니다. 함께 학습을 시작해봐요!
강좌 후기
무료
평균평점
4.8
난이도
쉬움
수강기간
평생 무제한