패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

웹 게임을 만들며 배우는 Vue

'로또추첨기', '틱택토', '지뢰찾기' 등등 실제로 동작하는 웹 게임을 개발하며 쉽고 재밌게 자바스크립트와 뷰를 배울 수 있는 강의입니다.

클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트, vue
추천 학습대상
- 뷰를 처음 접하는 프레임워크 입문자
- 뷰를 좀 더 재밌게 배우며 유용한 꿀팁까지 챙기고 싶은 분
- 프론트엔드 개발자를 지망하시는 분
- 뷰를 활용해 웹 게임을 개발하고자 하는 분

앵귤러, 뷰, 리액트?
프레임워크 도대체 뭐 써야 하나요?
알면 알수록 매력적인 프레임워크를
웹 게임으로 재밌게 배울 수 있다면?



<Node.js 교과서> 저자와 함께
웹 게임으로 뷰를 배워보자🌟

무심한 듯 콕콕 짚어주는 제로초 님과 함께!


Vue.js라는 프레임워크는
앵귤러나 리액트에 비해 가볍고 빠르며,
문법이 단순하고 간결해서 초기 진입 장벽이 낮은
프런트엔드 프레임워크입니다.


웹 게임으로 좀 더 재밌게 배워볼까요?
본 강의는 뷰 웹 게임 개발 강좌입니다.
완강하시면 뷰 사용법뿐만 아니라
틱택토, 지뢰찾기 등 실제로 동작하는
웹 게임 또한 포트폴리오로 사용할 수 있습니다.




🤔개발강좌가 노잼이라구?

내 손길 하나 하나에 완성되는 재미를 느껴보세요!






수업 전 꼭 확인하세요🎲
알고 들으면 수업효과 UP!






🙌웹 강좌 == 제로초

웹 강좌를 평정하기 위해 부지런히 움직이는
강의자님을 소개합니다.


제로초 조현영


웹과 관련된 모든 것에 관심 있습니다.
前 바리엘 크리에이티브 프론트엔드 개발자
前 myFit 개발 총괄 CTO


Node.js 교과서 저자 (길벗출판사)


블로그 및 유튜브 채널 운영


all Icon made by Freepik from www.flaticon.com

체험하기
모두 펼치기
교육 과정
모두 펼치기
  • 01
    끝말잇기
    • 1-1. 강좌 소개와 맛보기
    체험하기
    1-2. data와 v-if, v-else
    체험하기
    1-3. 보간법과 v-model
    체험하기
    1-4. ref와 구구단 완성하기
    체험하기
    1-5. 끝말잇기 만들며 복습
    1-6. Q&A
  • 02
    구구단
    • 2-1. 컴포넌트의 필요성
    2-2. 컴포넌트의 특성
    2-3. props와 웹팩의 필요성
  • 03
    숫자야구
    • 3-1. 웹팩 사용하기
    3-2. 프로젝트 구조와 웹팩 빌드
    3-3. 웹팩 로더 사용하기
    3-4. v-for로 반복문 사용하기
    3-5. 숫자야구 완성하기
  • 04
    반응속도체크
    • 4-1. 반응속도체크와 webpack watch
    4-2. v-bind와 vue style
    4-3. webpack-dev-server
    4-4. 반응속도체크 게임 완성하기
    4-5. computed와 v-show, template
  • 05
    가위바위보
    • 5-1. vue-devtools와 기타 정보들
    5-2. :class와 :style
    5-3. vue 라이프사이클
    5-4. 가위바위보 완성과 devtools 분석
  • 06
    로또 추첨기
    • 6-1. vue 스타일 가이드
    6-2. 자식 컴포넌트와 props
    6-3. 로또 추첨기 구현하기
    6-4. watch 사용해보기
  • 07
    틱택토
    • 7-1. 2차원배열(테이블 구조 짜기)
    7-2. this.$root, this.$parent
    7-3. Vue.set
    7-4. 틱택토 완성하기
    7-5. EventBus 사용하기
    7-6. Vuex 구조 세팅하기
    7-7. Vuex Mutations
    7-8. Vuex state 사용하기
    7-9. mapState와 Q&A
    7-10. Vuex devtools 분석하기
    7-11. slot
  • 08
    지뢰찾기
    • 8-1. 지뢰찾기 구조 만들기
    8-2. 지뢰찾기 코드 부여하기
    8-3. 데이터 가공해 화면 그리기
    8-4. 타이머 켜고 끄기
    8-5. 칸 클릭하기
    8-6. 지뢰 밟기와 주변 지뢰 개수 찾기
    8-7. 주변 칸 한 번에 열기
    8-8. 승리 조건 체크하기와 마무리
  • 09
    Vue Router
    • 9-1. Vue Router 설정하기
    9-2. router-view와 히스토리 라우터
    9-3. 동적 라우트 매칭
    9-4. 주소 쿼리스트링
마지막 업데이트|2019년 12월 19일
선생님 소개
조현영캡틴
안녕하세요. 구름에듀 캡틴 조현영입니다. 함께 학습을 시작해봐요!
클래스 후기
무료
평균평점
5.0
난이도
보통
학습기간
평생 무제한