
무료
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
초급자를 위해 준비한
[개발 ・ 프로그래밍] 강의입니다.
[개발 ・ 프로그래밍] 강의입니다.
본 강의에서는 자바스크립트를 활용해 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게임, 자스스톤, 2048 게임, 테트리스까지 함께 만들어봅시다.
웹 게임 개발 자바스크립트
자바스크립트 게임 개발! 자바스크립트는 컴퓨터에 명령할 때 사용하는 언어 중 하나입니다. 과거에는 웹사이트를 만드는 데에만 국한되었다면 현재는 웹앱, Desktop 프로그램을 만드는 데에도 활용되고 있습니다. 인스타그램과 페이스북 등의 앱 일부를 만드는 데에도 활용됩니다.본 강의에서는 자바스크립트를 배우며 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게임, 자스스톤, 2048 게임, 테트리스까지 함께 만들어봅시다. 소스 코드는 https://github.com/zerocho/webgame-lecture
학습 목표
- 자바스크립트 문법을 배운다.
- 프로그래밍 사고를 갖춘다.


도움이 되는 분들
- Javascript 개발 입문자
- 웹 프론트엔드 개발 입문자
- Javascript를 활용해 웹 게임을 개발하고 싶은 분
지식공유자 소개
조현영– Node.js교과서 저자 – ZeroCho.com 운영자 – 스타트업 CTO
안녕하세요
조현영 입니다.
조현영 입니다.

– Node.js교과서 저자
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중
– 스타트업 CTO
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중
– 스타트업 CTO
– 글로벌SW전담개발자
커리큘럼
총 114개 ˙ 22시간 3분의 수업
이 강의는 영상, 수업 노트이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 자바스크립트 기초와 끝말잇기
14강 ∙ 2시간 32분
자바스크립트 프로그래밍이란?
미리보기
10:40
값: 숫자, 문자, 불린
미리보기
07:54
연산자
09:40
비교 연산자
07:20
변수(var)
14:35
null, undefined
10:52
조건문(if)
09:08
반복문(while)
12:23
복습 & 연산자 심화
10:03
함수
10:24
문자열 심화
05:21
else if
08:18
반복문(for)
14:52
끝말잇기 구현
21:27
섹션 1. 객체 기본과 구구단 게임
5강 ∙ 1시간 16분
섹션 2. 웹 화면 구현
7강 ∙ 1시간 11분
window 객체
미리보기
12:12
document 객체와 DOM
미리보기
05:14
script 태그 사용법
10:23
JS로 HTML 태그 만들기
10:30
끝말잇기 화면에 표시하기
12:21
이벤트 리스너 맛보기
10:13
구구단 화면 만들기
10:15
섹션 3. 숫자야구
6강 ∙ 1시간 3분
비동기 & 숫자야구 순서도
12:36
배열 push, pop, shift, unshift
09:05
배열 splice
09:57
배열 split & join
13:05
indexOf & 숫자야구 구현
14:06
리팩토링 & 개념 복습
04:41
섹션 4. 틱택토
5강 ∙ 1시간 10분
틱택토 순서도 & 화면
15:19
이차원 배열
12:41
e.target과 parentNode
13:00
틱택토 구현
16:28
forEach와 중첩 반복문
13:26
섹션 5. 로또 추첨기
6강 ∙ 1시간 6분
로또추첨기 Array & fill
미리보기
10:12
배열 map 메서드
미리보기
10:52
배열 slice & sort
10:55
JS로 HTML 태그 선택하기
10:18
JS로 CSS 조작하기
14:02
로또추첨기 마무리 & querySelector
10:22
섹션 6. 가위바위보
6강 ∙ 1시간 4분
가위바위보(이미지 스프라이트)
13:32
딕셔너리 자료구조
08:06
Object, entries, find, findIndex
12:44
setTimeout, clearTimeout
11:16
가위바위보 규칙 찾기
08:43
변수를 사용해 중복 제거하기
10:14
섹션 7. 지뢰찾기
16강 ∙ 3시간 10분
지뢰찾기 기본 화면
미리보기
11:26
지뢰 심기
미리보기
17:33
우클릭으로 깃발 꼽기
20:17
target vs e.currentTarget
03:24
물음표 기능과 중간 정리
10:01
주변 지뢰 개수 세기
11:24
스코프
12:57
스코프 체인
07:44
렉시컬 스코프
15:10
클로저
17:40
클로저 문제 해결법
11:18
주변 칸 한 번에 열기(재귀)
11:35
재귀 코드 효율 개선하기
09:37
에러 잡아내기
11:08
데이터 딕셔너리로 정리
10:21
남은 버그 해결하기
09:16
섹션 8. 반응속도 테스트
5강 ∙ 1시간 4분
반응속도 테스트
11:04
시간 체크와 예약어
15:58
호출 스택(call stack)
16:19
타이머 제거
10:52
재귀, 비동기와 호출 스택
10:09
섹션 9. 틱택토 심화
3강 ∙ 30분
틱택토(컴퓨터의 턴)
14:37
틱택토 리펙토링
08:40
승리와 무승부 메시지
07:39
섹션 10. 카드 짝맞추기 게임
10강 ∙ 1시간 28분
카드 뒤집기 구현
미리보기
09:47
카드 색 부여하기
미리보기
07:02
카드 짝 맞추기
08:00
게임 초기화
08:39
참조와 복사
07:05
복사하는 방법
12:16
깊은 복사
09:02
팩토리 패턴과 프로토타입
12:22
프로토타입을 쓰는 이유
07:03
Object.create()
06:56
섹션 11. 자스스톤
14강 ∙ 3시간
call by value, call by reference, call by sharing
14:41
생성자와 new
10:58
자스스톤 화면 세팅
15:06
자스스톤 스크립트 초기 세팅(진입점)
14:55
cloneNode와 생성자 활용
09:10
리팩토링과 진입점 함수의 중요성
07:05
쫄병카드 코스트에 맞춰 뽑기
17:15
턴 넘기기
17:08
리팩토링과 삼항연산자
14:17
필드 카드 선택과 턴 오버
15:36
카드끼리 치고 받고 싸우기
16:08
죽은 카드 정리하기
09:14
자스스톤 마무리와 최종 리팩토링
11:25
코드 깔끔하게 작성하기
07:05
섹션 12. 2048 게임
6강 ∙ 1시간 16분
2048 게임 기본 세팅
08:51
mousedown, mouseup, mousemove
08:35
드래그 방향 판단하기
10:45
드래그에 따라 숫자 이동하기
17:26
숫자 합쳐서 두 배로 만들기
24:33
게임 오버와 핵심 정리
06:33
섹션 13. 테트리스
11강 ∙ 2시간 6분
테트리스 세팅과 switch문
미리보기
09:07
keyup, keydown, keypress
03:48
테트리스 블록 데이터 만들기
08:55
테트리스 블록 화면에 표시
09:19
내려가는 테트리스 만들기
16:30
호출 스택과 이벤트 루프
18:41
ES2015 const, let, 화살표 함수
14:19
테트리스 블록 생성, 그리기
13:49
한 칸씩 내리기, 다 찬 줄 지우기
15:38
테트리스 좌우 이동, 내리기, 회전
09:13
테트리스 및 웹게임 강좌 마무리
07:02
강의 게시일 : 2019년 01월 16일
(마지막 업데이트일 : 2019년 02월 07일)
수강평
총 57개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
57개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순

역시 제로초님..
이런 멋진 강좌를 무료로 풀어주시다니...
너무 감사합니다.
열심히 보겠습니다!
2019-01-20
아직 절반밖에 보지않아, 완벽한 수강평을 남길 수는 없으나, 너무 감사해서 이렇게 먼저 수강평 남깁니다.
본래 3개월가량 생활xx에서 HTML - CSS- JS - Node - Express - DB 까지 사이클 돌면서 공부했습니다.
그리고 취업지원, 중급자바스크립트 서적들을 찾아보기 시작했습니다.
그러면서 깨닿게 되었는데, 아직 자바스크립트를 기초문법만 '이해만' 하는 수준 이더군요.
"아직도 내가 기초도 잘 모르는 수준이라니.."하면서 꽤나 좌절했습니다. 소질이없나? 하고서요. 포기하려던 찰나, 제로초님 강의를 보게되었습니다.
많은 게임들을 만들며 배우니, 개념만 어느정도 이해를 가지고 있던게 이제 제 것이 되는 느낌을 확 받습니다.
생활xx에서 학습 하면서 코딩에 입문을하고 , 전체적인 맥락, 그리고 좁게나마 시야를 가질 수 있었다면, 제로초님 강의에서는 그것을 정말 내가 요리사가되어, 조리하는 법을 강의에서 배우고 있다는 느낌을 받습니다.
"친한 친구, 형, 동생처럼 날 알려줄 사람은 없으려나?"
"왜 내 코딩 실력이 안늘지?"
"아는데 왜 못쓰지?"
하는 분들께 정말 좋은 강의가 될 것 같습니다.
아, 한가지 아쉬운 점은 유튜브에 있는 ES6 2020 강의와, 이 강의중 어떤걸 수강할지 처음 많이 고민했었는데 이 점 명확히 표기해주시면 더 좋을 것 같습니다.
2020-10-13

일반적인 책으로 언어를 공부하면 딱 언어에 대한 지식까지만 얻을 수 있는데, 이 강의는 자바스크립트로 내가 무엇을 할 수 있는지 배울 수 있습니다.
실제 결과물을 만들면서 공부하니 지루하지도 않고 재밌게 공부할 수 있습니다.
2019-12-27

실제로 프로그램을 만들어가면서 배우니까 성취감도 생기는 좋은 강의
2019-08-11

너무 도움이 됐습니다 감사합니다.
2019-07-13
무료
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
조현영님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
[리뉴얼] React로 NodeBird SNS 만들기
₩88,000
웹 게임을 만들며 배우는 TypeScript
₩33,000
비슷한 강의들
같은 분야의 다른 강의를 만나보세요!