Thumbnail

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

(4.8)
78개의 수강평 ∙  8,186명의 수강생
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자: 조현영
총 114개 수업 (21시간 35분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공

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

강의 미리보기 😊

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

 

이 강의의 목표 🙂

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

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Javascript 개발 입문자
웹 프론트엔드 개발 입문자
Javascript를 활용해 웹 게임을 개발하고 싶은 분

안녕하세요
조현영 입니다.
조현영의 썸네일

제 강의의 장점은 Q&A입니다. 24시간 이내에 무조건 답변드립니다! 다만 여러분들도 질문을 잘 해주셔야 합니다.

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

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

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