Thumbnail
BEST 개발 · 프로그래밍 게임 개발
웹 게임을 만들며 배우는 자바스크립트
(4.8)
76개의 수강평 ∙ 8752명의 수강생

무료

지식공유자 : 조현영
총 114개 수업˙총 22시간 3분
평생 무제한 수강
수료증 미발급 강의
입문 초급 대상 중급이상
내 목록 추가 공유
초급자를 위해 준비한
[게임 개발, 프로그래밍 언어] 강의입니다.

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

강의 미리보기 😊

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

 

이 강의의 목표 🙂

  • 자바스크립트 문법을 한눈에 알 수 있게 됩니다.
  • '프로그래머' 라면 꼭 가지고 있어야 할 사고를 갖출 수 있게 됩니다.
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
Javascript 개발 입문자
웹 프론트엔드 개발 입문자
Javascript를 활용해 웹 게임을 개발하고 싶은 분

안녕하세요
조현영 입니다.
조현영의 썸네일
– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
커리큘럼 총 114 개 ˙ 22시간 3분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 자바스크립트 기초와 끝말잇기
자바스크립트 프로그래밍이란? 미리보기 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. 객체 기본과 구구단 게임
반복문 연습: 별찍기 미리보기 21:54 객체 기본 미리보기 10:18
객체의 속성 12:28
배열 기본 12:09
구구단 구현 19:50
섹션 2. 웹 화면 구현
window 객체 미리보기 12:12 document 객체와 DOM 미리보기 05:14
script 태그 사용법 10:23
JS로 HTML 태그 만들기 10:30
끝말잇기 화면에 표시하기 12:21
이벤트 리스너 맛보기 10:13
구구단 화면 만들기 10:15
섹션 3. 숫자야구
비동기 & 숫자야구 순서도 12:36
배열 push, pop, shift, unshift 09:05
배열 splice 09:57
배열 split & join 13:05
indexOf & 숫자야구 구현 14:06
리팩토링 & 개념 복습 04:41
섹션 4. 틱택토
틱택토 순서도 & 화면 15:19
이차원 배열 12:41
e.target과 parentNode 13:00
틱택토 구현 16:28
forEach와 중첩 반복문 13:26
섹션 5. 로또 추첨기
로또추첨기 Array & fill 미리보기 10:12 배열 map 메서드 미리보기 10:52
배열 slice & sort 10:55
JS로 HTML 태그 선택하기 10:18
JS로 CSS 조작하기 14:02
로또추첨기 마무리 & querySelector 10:22
섹션 6. 가위바위보
가위바위보(이미지 스프라이트) 13:32
딕셔너리 자료구조 08:06
Object, entries, find, findIndex 12:44
setTimeout, clearTimeout 11:16
가위바위보 규칙 찾기 08:43
변수를 사용해 중복 제거하기 10:14
섹션 7. 지뢰찾기
지뢰찾기 기본 화면 미리보기 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. 반응속도 테스트
반응속도 테스트 11:04
시간 체크와 예약어 15:58
호출 스택(call stack) 16:19
타이머 제거 10:52
재귀, 비동기와 호출 스택 10:09
섹션 9. 틱택토 심화
틱택토(컴퓨터의 턴) 14:37
틱택토 리펙토링 08:40
승리와 무승부 메시지 07:39
섹션 10. 카드 짝맞추기 게임
카드 뒤집기 구현 미리보기 09:47 카드 색 부여하기 미리보기 07:02
카드 짝 맞추기 08:00
게임 초기화 08:39
참조와 복사 07:05
복사하는 방법 12:16
깊은 복사 09:02
팩토리 패턴과 프로토타입 12:22
프로토타입을 쓰는 이유 07:03
Object.create() 06:56
섹션 11. 자스스톤
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 게임
2048 게임 기본 세팅 08:51
mousedown, mouseup, mousemove 08:35
드래그 방향 판단하기 10:45
드래그에 따라 숫자 이동하기 17:26
숫자 합쳐서 두 배로 만들기 24:33
게임 오버와 핵심 정리 06:33
섹션 13. 테트리스
테트리스 세팅과 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일)
수강평 총 76개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
76개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Break Day (Day Break) thumbnail
역시 제로초님.. 이런 멋진 강좌를 무료로 풀어주시다니... 너무 감사합니다. 열심히 보겠습니다!
2019-01-20
Blockmonkey thumbnail
아직 절반밖에 보지않아, 완벽한 수강평을 남길 수는 없으나, 너무 감사해서 이렇게 먼저 수강평 남깁니다. 본래 3개월가량 생활xx에서 HTML - CSS- JS - Node - Express - DB 까지 사이클 돌면서 공부했습니다. 그리고 취업지원, 중급자바스크립트 서적들을 찾아보기 시작했습니다. 그러면서 깨닿게 되었는데, 아직 자바스크립트를 기초문법만 '이해만' 하는 수준 이더군요. "아직도 내가 기초도 잘 모르는 수준이라니.."하면서 꽤나 좌절했습니다. 소질이없나? 하고서요. 포기하려던 찰나, 제로초님 강의를 보게되었습니다. 많은 게임들을 만들며 배우니, 개념만 어느정도 이해를 가지고 있던게 이제 제 것이 되는 느낌을 확 받습니다. 생활xx에서 학습 하면서 코딩에 입문을하고 , 전체적인 맥락, 그리고 좁게나마 시야를 가질 수 있었다면, 제로초님 강의에서는 그것을 정말 내가 요리사가되어, 조리하는 법을 강의에서 배우고 있다는 느낌을 받습니다. "친한 친구, 형, 동생처럼 날 알려줄 사람은 없으려나?" "왜 내 코딩 실력이 안늘지?" "아는데 왜 못쓰지?" 하는 분들께 정말 좋은 강의가 될 것 같습니다. 아, 한가지 아쉬운 점은 유튜브에 있는 ES6 2020 강의와, 이 강의중 어떤걸 수강할지 처음 많이 고민했었는데 이 점 명확히 표기해주시면 더 좋을 것 같습니다.
2020-10-13
진호
다른 JS 강의도 10시간 이상이라 어떤걸 들어야하나 고민되었는데 좋은 후기 때문에 정하기 쉬워졌네요 고맙습니다
2020-11-21
박무뭉 thumbnail
자바스크립트 문법 강의 듣고 뭘 만들지? 어떻게 활용하지? 를 모를때 듣기좋은 강의 입니다.
2021-01-25
데구리 thumbnail
일반적인 책으로 언어를 공부하면 딱 언어에 대한 지식까지만 얻을 수 있는데, 이 강의는 자바스크립트로 내가 무엇을 할 수 있는지 배울 수 있습니다. 실제 결과물을 만들면서 공부하니 지루하지도 않고 재밌게 공부할 수 있습니다.
2019-12-27
CoderH thumbnail
실제로 프로그램을 만들어가면서 배우니까 성취감도 생기는 좋은 강의
2019-08-11

무료

내 목록 추가 공유
지식공유자 : 조현영
총 114개 수업˙총 22시간 3분
평생 무제한 수강
수료증 미발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스