웹 게임을 만들며 배우는 자바스크립트

본 강의에서는 자바스크립트를 활용해 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게임, 자스스톤, 2048 게임, 테트리스까지 함께 만들어봅시다.

(4.8) 수강평 79개

수강생 8,059명

제로초(조현영)

JavaScript

먼저 경험한 수강생들의 후기

강의 미리보기 😊

자바스크립트는 컴퓨터에 명령할 때 사용하는 언어 중 하나입니다. 과거에는 웹사이트를 만드는 데에만 국한되었다면 현재는 웹 앱, Desktop 프로그램을 만드는 데에도 활용되고 있습니다. 심지어 인스타그램과 페이스북 등의 앱 일부를 만드는 데에도 활용되고 있죠. 본 강의에서는 자바스크립트를 배우며 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게임, 자스스톤, 2048 게임, 테트리스까지 함께 만들어 봅시다.

이 강의의 목표 🙂

자바스크립트 문법을 한눈에 알 수 있게 됩니다.
'프로그래머' 라면 꼭 가지고 있어야 할 사고를 갖출 수 있게 됩니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

Javascript 개발 입문자
웹 프론트엔드 개발 입문자
Javascript를 활용해 웹 게임을 개발하고 싶은 분

안녕하세요
입니다.

65,891

명

수강생

1,644

개

수강평

9,722

개

답변

4.8

점

강의 평점

개

강의

제 강의의 장점은 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)

커리큘럼

전체

114개 ∙ (21시간 35분)

섹션 1. 자바스크립트 기초와 끝말잇기

14개 ∙ (2시간 33분)

1. 자바스크립트 프로그래밍이란?
10:41
2. 값: 숫자, 문자, 불린
07:55
3. 연산자
09:41
4. 비교 연산자
07:21
5. 변수(var)
14:36
6. null, undefined
10:53
7. 조건문(if)
09:09
8. 반복문(while)
12:24
9. 복습 & 연산자 심화
10:04
10. 함수
10:25
11. 문자열 심화
05:22
12. else if
08:19
13. 반복문(for)
14:53
14. 끝말잇기 구현
21:28

섹션 2. 객체 기본과 구구단 게임

5개 ∙ (1시간 16분)

섹션 3. 웹 화면 구현

7개 ∙ (1시간 11분)

20. window 객체
12:13
21. document 객체와 DOM
05:15
22. script 태그 사용법
10:24
23. JS로 HTML 태그 만들기
10:31
24. 끝말잇기 화면에 표시하기
12:22
25. 이벤트 리스너 맛보기
10:14
26. 구구단 화면 만들기
10:16

섹션 4. 숫자야구

6개 ∙ (1시간 3분)

섹션 5. 틱택토

5개 ∙ (1시간 10분)

섹션 6. 로또 추첨기

6개 ∙ (1시간 6분)

섹션 7. 가위바위보

6개 ∙ (53분)

섹션 8. 지뢰찾기

16개 ∙ (3시간 11분)

섹션 9. 반응속도 테스트

5개 ∙ (1시간 4분)

섹션 10. 틱택토 심화

3개 ∙ (30분)

섹션 11. 카드 짝맞추기 게임

10개 ∙ (1시간 28분)

섹션 12. 자스스톤

14개 ∙ (3시간 0분)

섹션 13. 2048 게임

6개 ∙ (1시간 16분)

섹션 14. 테트리스

11개 ∙ (1시간 47분)

강의 게시일:

마지막 업데이트일:

수강평

전체

79개

4.8

79개의 수강평

blockmonkey1992
수강평 11
∙
평균 평점 4.8
5
100% 수강 후 작성
I've only seen half of it, so I can't write a perfect review, but I'm so grateful that I'm leaving this review first. Originally, I studied in a cycle from HTML - CSS - JS - Node - Express - DB in Livingxx for about 3 months. And then I started looking for books on job support and intermediate JavaScript. Then I realized that I was still at the level of 'understanding' the basic grammar of JavaScript. I was quite frustrated, thinking, "I still don't know the basics.." Do I have no talent? I was about to give up, when I happened to watch Zerocho's lecture. As I learned while making many games, I definitely feel like the concepts that I had only understood to some extent are now mine. If you are learning from Lifexx and are getting started with coding, and were able to have a general context and a narrow perspective, then in Zerocho's lecture, I feel like I am learning how to cook as a chef. "Isn't there anyone who can teach me like a close friend, brother, or younger sibling?" "Why aren't my coding skills improving?" "I know it, but why can't I use it?" I think this will be a really good lecture for those who ask. Oh, one thing I regret is that I had a lot of trouble deciding which lecture to take between the ES6 2020 lecture on YouTube and this lecture, so it would be better if you clearly stated this point.
- rancho9746937
  I was worried about which one to take because other JS lectures are over 10 hours long, but thanks to the good reviews, it became easy to decide. Thank you.
sansam7091113
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
If you study a language with a general book, you can only gain knowledge about the language, but this course will teach you what you can do with JavaScript. You can study while creating actual results, so it is not boring and you can study in a fun way.
hwanggc35726436
수강평 4
∙
평균 평점 5.0
5
100% 수강 후 작성
It's a good lecture that gives you a sense of accomplishment because you learn while actually creating a program.
j0urneyk3210142
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
As expected, Zerocho-nim.. You're giving such a great lecture for free... Thank you so much. I'll work hard!
milktea
수강평 26
∙
평균 평점 4.8
4
32% 수강 후 작성
This is a good lecture to listen to when you don't know what to create or how to use it after listening to the JavaScript grammar lecture.

비공개 강의로
수강이 제한됩니다.

비공개 강의

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

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

React Native with Expo: Learning Properly from ZeroCho

zerocho

Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.

초급

React, React Native, Hybrid App

React Native with Expo: Learning Properly from ZeroCho

zerocho

Next + Create a SNS service with React Query

zerocho

We will create an SNS service similar to Twitter (X.com) using the React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand stack. Finally, we will add SSR for search engine optimization!

중급이상

Next.js, React, react-query

Next + Create a SNS service with React Query

zerocho

[Renewal] Creating NodeBird SNS with React

zerocho

Let's create a Twitter-like SNS service with React & Next & Redux & Redux Saga & Express stack. Finally, we will deploy it to AWS after SEO.

중급이상

React, Redux, Node.js

[Renewal] Creating NodeBird SNS with React

zerocho

TS/JS Design Patterns with Canvas: Learn Properly from Zerocho

zerocho

Learn about the uses, pros and cons of various design patterns while creating a drawing board with TypeScript/JavaScript. Learning the canvas API is a bonus!

중급이상

Design Pattern, oop, TypeScript

TS/JS Design Patterns with Canvas: Learn Properly from Zerocho

zerocho

Test with Jest: Learn Properly from Zerocho

zerocho

In this lecture, we will show you when testing is necessary and the advantages of testing using the Jest framework. We will apply unit testing and integration testing to React, Express, etc.

초급

Software Test, Jest, react-testing-library

Test with Jest: Learn Properly from Zerocho

zerocho

[Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

zerocho

You will learn about what a node is, the latest JavaScript grammar, the node API, npm, the module system, databases, testing, and more. You will create a project using five practical examples. You will also deploy a service to the cloud and convert a node project to TypeScript.

초급

Node.js, Express, MySQL

[Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

zerocho

Non-majors catching up with majors - Data Structures (with JavaScript)

zerocho

Data structures are essential subjects for studying algorithms! Let's learn various data structures using JavaScript!

초급

JavaScript, Algorithm, Coding Test

Non-majors catching up with majors - Data Structures (with JavaScript)

zerocho

Delivery App Clone Coding [with React Native]

zerocho

Let's create a delivery app for riders with React Native. This is a lecture by a developer who has created more than 5 apps with React Native over the past 6 years and sold them to Kakao Mobility.

중급이상

React Native

Delivery App Clone Coding [with React Native]

zerocho

Slack Clone Coding [Real-time Chat with React]

zerocho

Let's start serious React web development by creating it following the Slack service! From sign-up, login, room creation, to real-time chat!

중급이상

Clone Coding, React, TypeScript

Slack Clone Coding [Real-time Chat with React]

zerocho

[Renewal] TypeScript All-in-One: Part 2. Practical Analysis

zerocho

Now that you've learned the basic grammar of TypeScript, let's learn how to analyze complex types from popular libraries.

중급이상

TypeScript

[Renewal] TypeScript All-in-One: Part 2. Practical Analysis

zerocho

[Renewal] TypeScript All-in-One: Part 1. Basic Grammar

zerocho

Learn the basic syntax of TypeScript, how to analyze types written by others, and how to write your own types.

초급

TypeScript

[Renewal] TypeScript All-in-One: Part 1. Basic Grammar

zerocho

Creating Nodebird SNS with Vue

zerocho

Create a SNS service using Vue and Nuxt frameworks. Learn the full stack knowledge required for the service.

중급이상

Vue.js, Node.js, AWS

Creating Nodebird SNS with Vue

zerocho

[Renewal] Introduction to JavaScript in Zero Seconds through Coding Self-Study

zerocho

In this lecture, we will practice developing programming thinking skills using JavaScript. Let's start with the web game, the multiplication table, and then create a word game, number baseball, a reaction speed test, tic-tac-toe, a lottery machine, rock-paper-scissors, a card matching game, a text RPG, a minesweeper, a 2048 game, and a mole catching game.

초급

JavaScript

[Renewal] Introduction to JavaScript in Zero Seconds through Coding Self-Study

zerocho

Non-majors catching up with majors - Database, SQL

zerocho

If you are already a developer or want to become a developer but did not major in computer science and are weak in databases, gain lifelong knowledge with this one course!

입문

DBMS/RDBMS, SQL, MySQL

Non-majors catching up with majors - Database, SQL

zerocho

Catching up with non-majors - Networks, HTTP

zerocho

If you are a developer who deals with HTTP or want to become a developer but did not major in computer science and are weak in networking, gain lifelong knowledge with this one course!

입문

Network, tcpip, websockets

Catching up with non-majors - Networks, HTTP

zerocho

Slack Clone Coding [Backend with NestJS + TypeORM]

zerocho

Let's learn NestJS, which is called the Spring of Node.js, and experience the convenience of Dependency Injection. Let's learn everything from API development, comparison with Express, deployment, and testing.

중급이상

NestJS, TypeORM, Express

Slack Clone Coding [Backend with NestJS + TypeORM]

zerocho