인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

웹 게임을 만들며 배우는 React

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

(4.9) 수강평 331개

수강생 16,966명

React
Thumbnail

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

이런 걸 배울 수 있어요

  • 리액트 개발

  • 리액트 Hooks 사용

  • Context API 사용

  • 바벨&웹팩

  • React-Router 사용

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

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

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


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 리액트를 배우고 싶은 개발자

  • 프론트엔드 개발자 지망생

선수 지식,
필요할까요?

  • 자바스크립트 최신 문법

안녕하세요
제로초(조현영)입니다.

63,814

명

수강생

1,523

개

수강평

9,598

개

답변

4.8

점

강의 평점

22

개

강의

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

더보기

커리큘럼

전체

68개 ∙ (13시간 45분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

331개

4.9

331개의 수강평

  • tunion00님의 프로필 이미지
    tunion00

    수강평 2

    ∙

    평균 평점 5.0

    5

    94% 수강 후 작성

    약 4명의 강사님들의 React강의를 들었는데 단연 최고입니다. 초보자가 이해하기 가장 쉽게 설명하며 이론설명뿐 아니라 예제를 통해 실제로 써볼 수 있고 오류도 같이 내면서 쉽고 재미있게 학습이 가능합니다. 제 리액트 강좌 원픽이에요. 앞으로도 좋은 강의 많이 만들어주세요 :)

    • Hongcana님의 프로필 이미지
      Hongcana

      수강평 3

      ∙

      평균 평점 5.0

      5

      60% 수강 후 작성

      제로초님 강의는 처음에 따라하면서 학습하기에 좋구요. 스스로 한걸음 더 생각해보거나 개발하면서 실력도 쌓을 수 있는 도전과제도 생기기에 배운 내용을 까먹기 어렵다는 장점이 있습니다. 공식 문서에 대한 중요성을 강조하시기에, 학습 도중에 공식 문서를 직접 찾아보면서 함수의 작동 원리나 내부 동작을 이해하니까 배우는 재미도 있습니다. 제로초님 리액트 강의도 마찬가지로 좋은 강의입니다. 무료 강의임에도 불구하고 퀄리티가 아주 좋습니다. 리액트에 더 깊게 파고들 수 있는 기초를 잘 배울 수 있는 강의라고 생각합니다.

      • mhr님의 프로필 이미지
        mhr

        수강평 18

        ∙

        평균 평점 4.5

        5

        100% 수강 후 작성

        리액트를 애매하게 알고 있어서 들을지 말지 고민을 하다가 빠른 배속으로 해서 정주행 했는데 듣기를 잘 한 것 같습니다. 굉장히 유익하네요.

        • Michael Hur님의 프로필 이미지
          Michael Hur

          수강평 4

          ∙

          평균 평점 5.0

          5

          94% 수강 후 작성

          유튜브에서 1회독하고 여기서 2회차 수강중입니다. 기초부터 세세하게 알려주셔서 너무 감사합니다. 장점: - Class로 먼저 개발 후, Hooks로 개발하는 것을 보여주십니다. Hooks로 대세가 넘어갔지만 기존 코드들은 Class 기반일 수도 있으니 어떻게 작동하는지 알아야하는데 큰 도움이 됐습니다. 또한 같은 것을 두가지 방식으로 코딩해보니 제가 알고 있다고 생각하고 넘어간 부분도 다시 보게 되더라구요. - 중간 중간 에러가 나는 부분이 있는데 이를 실시간으로 디버깅해주시면서 어떤식으로 디버깅해야하는지 보여주십니다. 실무에서 큰 도움이 되는 스킬이라고 생각합니다. 단점: - 장점이자 단점인데 알고리즘 부분을 제외하고 리액트로 구현하는 법만 보여주십니다. 그래서 좋았지만 구현하고자 하는 것이 어떤것인지 간단하게라도 설명해주시면 좋을 것 같습니다. 강사님께서 자바스크립트 강의를 보면 나온다고 하셨지만 그것까지 자바스크립트 강의 들으면 처음부터 끝까지 다 듣고 리액트 강의로 돌아올 것 같았습니다. 그래서 그냥 했더니 코드를 따라치고 나서야 "아 숫자야구가 이런거구나"를 알수 있었습니다. 구현 알고리즘을 설명해주시지 않으셔도 "숫자야구는 4개의 숫자를 입력해서 숫자와 자리가 모두 맞으면 스트라이크, 숫자는 맞되 자리가 틀리면 볼, 4개의 숫자와 4개의 자리 모두 맞추면 홈런이 나옵니다" 정도만 말씀해주셨어도 따라치기전 무엇을 따라치는지 도움이 됐을 것 같습니다. 이부분때문에 100점 만점에 99.999999999점 드립니다. 담주에 월급들어오면 노드 교과서 강의 구입하러 갑니다. 좋은 강의 더 많이 찍어주세요

          • 민트클래식님의 프로필 이미지
            민트클래식

            수강평 8

            ∙

            평균 평점 4.9

            5

            87% 수강 후 작성

            지금 다른 유료 리액트 수업 결제해서 듣고 있는데 정말로 너무너무 하기가 싫더라구요😫😫😫 그래서 이 강의나 들어볼까 해서 보고 있는데 너무 재미있어요 게다가 무료라니...💛 유료강의 환불할까봐요.... 이거 듣고 트위터짝퉁 유료 수업 결제하러 갑니다

            제로초(조현영)님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

            React Native with Expo: 제로초에게 제대로 배우기

            제로초(조현영)

            웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

            초급

            초급

            React, React Native, 하이브리드 앱

            Next + React Query로 SNS 서비스 만들기강의 썸네일

            Next + React Query로 SNS 서비스 만들기

            제로초(조현영)

            리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

            중급이상

            중급이상

            Next.js, React, react-query

            [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지강의 썸네일

            [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

            제로초(조현영)

            노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

            초급

            초급

            Node.js, Express, MySQL

            TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기강의 썸네일

            TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

            제로초(조현영)

            타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

            중급이상

            중급이상

            디자인 패턴, 객체지향, TypeScript

            테스트 with Jest: 제로초에게 제대로 배우기강의 썸네일

            테스트 with Jest: 제로초에게 제대로 배우기

            제로초(조현영)

            본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

            초급

            초급

            소프트웨어 테스트, Jest, react-testing-library

            Slack 클론 코딩[실시간 채팅 with React]강의 썸네일

            Slack 클론 코딩[실시간 채팅 with React]

            제로초(조현영)

            Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

            중급이상

            중급이상

            클론코딩, React, TypeScript

            Slack 클론 코딩[백엔드 with NestJS + TypeORM]강의 썸네일

            Slack 클론 코딩[백엔드 with NestJS + TypeORM]

            제로초(조현영)

            Node.js의 스프링이라고 불리는 NestJS를 배우고, Dependency Injection의 편리함을 맛봅시다. API 개발부터, 익스프레스와의 비교, 배포, 테스팅까지 모두 배워봅시다.

            중급이상

            중급이상

            NestJS, TypeORM, Express

            [리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편강의 썸네일

            [리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

            제로초(조현영)

            타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

            중급이상

            중급이상

            TypeScript

            Vue로 Nodebird SNS 만들기강의 썸네일

            Vue로 Nodebird SNS 만들기

            제로초(조현영)

            Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

            중급이상

            중급이상

            Vue.js, Node.js, AWS

            비전공자의 전공자 따라잡기 - 네트워크, HTTP강의 썸네일

            비전공자의 전공자 따라잡기 - 네트워크, HTTP

            제로초(조현영)

            HTTP를 다루는 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 네트워크가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

            입문

            입문

            네트워크, tcpip, websockets

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

            네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

            중급이상

            중급이상

            JavaScript, Node.js, 웹 크롤링

            [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편강의 썸네일

            [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

            제로초(조현영)

            타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

            초급

            초급

            TypeScript

            [리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문강의 썸네일

            [리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

            제로초(조현영)

            본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카드 짝맞추기 게임, 텍스트 RPG, 지뢰 찾기, 2048게임, 두더지 잡기까지 함께 만들어봅시다.

            초급

            초급

            JavaScript

            비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)강의 썸네일

            비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

            제로초(조현영)

            알고리즘 공부의 필수 선수과목인 자료구조! 다양한 자료구조를 자바스크립트로 배워봅시다!

            초급

            초급

            JavaScript, 알고리즘, 코딩 테스트

            비전공자의 전공자 따라잡기 - 데이터베이스,SQL강의 썸네일

            비전공자의 전공자 따라잡기 - 데이터베이스,SQL

            제로초(조현영)

            이미 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 데이터베이스가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

            입문

            입문

            DBMS/RDBMS, SQL, MySQL

            배달앱 클론코딩 [with React Native]강의 썸네일

            배달앱 클론코딩 [with React Native]

            제로초(조현영)

            리액트 네이티브로 라이더용 배달앱을 만들어봅니다. 6년간 리액트 네이티브로 5개 이상의 앱을 만들고, 카카오 모빌리티에 매각한 개발자의 강의입니다.

            중급이상

            중급이상

            React Native

            [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

            [리뉴얼] React로 NodeBird SNS 만들기

            제로초(조현영)

            리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

            중급이상

            중급이상

            React, Redux, Node.js

            Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

            Node.js에 TypeScript 적용하기(feat. NodeBird)

            제로초(조현영)

            Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

            중급이상

            중급이상

            TypeScript, Node.js, 웹앱

            웹 게임을 만들며 배우는 React에 TypeScript 적용하기강의 썸네일

            웹 게임을 만들며 배우는 React에 TypeScript 적용하기

            제로초(조현영)

            리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

            중급이상

            중급이상

            React, TypeScript

            Redux vs MobX (둘 다 배우자!)강의 썸네일

            Redux vs MobX (둘 다 배우자!)

            제로초(조현영)

            리덕스와 몹엑스 뭘 선택할지 고민되시나요? 일단 둘 다 배우고나서 고민합시다!

            초급

            초급

            Redux, MobX

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            웹 게임을 만들며 배우는 React에 TypeScript 적용하기강의 썸네일

            웹 게임을 만들며 배우는 React에 TypeScript 적용하기

            제로초(조현영)

            리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

            중급이상

            중급이상

            React, TypeScript

            Next + React Query로 SNS 서비스 만들기강의 썸네일

            Next + React Query로 SNS 서비스 만들기

            제로초(조현영)

            리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

            중급이상

            중급이상

            Next.js, React, react-query

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

            초급

            초급

            React, Next.js, expo

            [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

            [리뉴얼] React로 NodeBird SNS 만들기

            제로초(조현영)

            리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

            중급이상

            중급이상

            React, Redux, Node.js

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

            초급

            초급

            React Native, React, ES6

            리액트로 NFT 랜딩 웹사이트 따라 만들기 시리즈3강의 썸네일

            리액트로 NFT 랜딩 웹사이트 따라 만들기 시리즈3

            인디코드

            리액트를 이용해서 NFT 반응형 랜딩페이지를 따라만들면서 프로젝트를 완성시켜보는 과정

            초급

            초급

            React, NFT

            React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

            React Native with Expo: 제로초에게 제대로 배우기

            제로초(조현영)

            웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

            초급

            초급

            React, React Native, 하이브리드 앱

            코드로 배우는 React with 스프링부트 API서버강의 썸네일

            코드로 배우는 React with 스프링부트 API서버

            구멍가게코딩단

            스프링 부트(Spring Boot ver3.4로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

            초급

            초급

            React, Spring Boot, JWT

            코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)강의 썸네일

            코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

            이동훈

            MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

            초급

            초급

            MongoDB, Express, React

            타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

            타입스크립트 코리아 : React with TypeScript 세미나

            이웅재

            타입스크립트와 리액트 관련 강좌입니다.

            중급이상

            중급이상

            React, TypeScript

            찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

            찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

            ludgi

            찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

            중급이상

            중급이상

            Next.js, React, GraphQL

            연관 로드맵

            강의가 포함된 로드맵으로 학습해 보세요!

            Javascript 풀스택 로드맵 (+ 트위터 클론앱 만들기 🐦) 로드맵 썸네일

            Javascript 풀스택 로드맵 (+ 트위터 클론앱 만들기 🐦)

            인프런

            무료