인프런 업데이트 소식 🔨👷🏼‍♂️
실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

(37개의 수강평)

864명의 수강생
44,000원
지식공유자 · 김정환
59회 수업 · 총 3시간 57분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급, 중급'

이런 걸 배울 수 있어요

  • Javascript 실전 개발 방법
  • Vue.JS 기초
  • MVC/MVVM 아키텍처
  • 컴퍼넌트 개발
  • 순수 JS 와 Vue.js 와의 개발 방법론 차이
  • 순수 JS 로 기능 구현 실습

1. 강좌 소개

Vue.JS라는 UI Library를 학습하는 강의로 쇼핑몰 검색 페이지를 만들어 봅니다! 먼저는 순수 자바스크립트를 이용해 가장 많이 쓰이는 MVC 디자인 패턴으로 구현 합니다. 그리고나서 Vue.JS로 MVVM 디자인 패턴을 개발하면서 라이브러리의 장점에 대해 알아보구요. 마지막으로 컴포넌트를 공부하면서 어떻게 UI를 모듈화 하고 조립하여 화면을 구성할수 있는지 알아보겠습니다. 각 강의는 10분 미만의 짧은 영상으로 만들었어요. 챕터 마지막에는 실습 문제를 준비했구요. 직접 고민하고 풀어보는 과정을 통해 코딩 실력을 키워보세요~

2. 학습목표

MVVM 아키텍쳐를 왜 써야하는지 이해하고 그 구현체인 Vue.JS를 공부하는 것이 목표입니다. 단순히 라이브러리 소개가 아니라, 기존 UI개발 방식의 한계를 파악한 뒤 해결책으로 Vue.JS라는 기술을 공부하는 것이죠~ 또한 컴포넌트 기반의 웹프론트 개발방법이 주는 이점도 짚고 넘어갑니다.

3. 도움이 되는 분들

  • 자바스크립트 개발 입문자
  • 웹 프론트엔드 개발 입문자
  • 자바스크립트 디자인 패턴의 의미를 이해하고 싶은 분
  • VueJS 개발을 배우고 싶은 분

4. 배우는 것들

  • Vue.JS 기초
  • MVC/MVVM 아키텍처
  • 컴포넌트 개발

     

5. 지식공유자 소개

김정환
웹 기술을 이용한 서버/클라이언트 어플리케이션을 만드는 자바스크립트 개발자입니다. 기술을 학습하고 공유하는 것을 좋아하구요.^^

수강 대상

  • 자바스크립트 개발 입문자
  • 웹 프론트엔드 개발 입문자
  • 자바스크립트 디자인 패턴 의미를 이해하고 싶은 분
  • VueJS 개발을 배우고 싶은 분
  • 성장하고 싶지만 막막한 초보 개발자
  • 순수 JS로 개발 해보고 싶은 분

선수 지식

  • Javascript 기본
  • HTML, CSS 마크업 지식

지식공유자 소개

김정환

교육과정

모두 펼치기 59 강의 3시간 57분
섹션 1. 순수JS (MVC)
2 강의 13 : 00
섹션 2. - 검색폼
5 강의 20 : 00
검색폼 구현 1
07 : 00
검색폼 구현 2
03 : 00
검색폼 구현 3
04 : 00
검색폼 구현 4 (실습)
02 : 00
검색폼 구현 4 (구현)
04 : 00
섹션 3. - 검색결과
4 강의 16 : 00
검색결과 구현 1
10 : 00
검색결과 구현 2
03 : 00
검색결과 구현 3 (실습)
01 : 00
검색결과 구현 3 (구현)
02 : 00
섹션 4. - 탭
4 강의 13 : 00
탭 구현 1
02 : 00
탭 구현 2
06 : 00
탭 구현 3 (실습)
01 : 00
탭 구현 3 (구현)
04 : 00
섹션 5. - 추천 검색어
4 강의 21 : 00
추천 검색어 구현 1
09 : 00
추천 검색어 구현 2
07 : 00
추천 검색어 구현 3 (실습)
01 : 00
추천 검색어 구현 3 (구현)
04 : 00
섹션 6. - 최근 검색어
7 강의 21 : 00
최근 검색어 구현 1, 2
06 : 00
최근 검색어 구현 3
03 : 00
최근 검색어 구현 4 (실습)
01 : 00
최근 검색어 구현 4 (구현)
06 : 00
최근 검색어 구현 checkout
02 : 00
최근 검색어 구현 5 (실습)
01 : 00
최근 검생어 구현 5 (구현)
02 : 00
섹션 7. Vue.js (MVVM)
2 강의 10 : 00
섹션 8. - 검색폼
3 강의 12 : 00
검색폼
08 : 00
검색폼 (실습)
01 : 00
검색폼 (구현)
03 : 00
섹션 9. - 검색결과
3 강의 10 : 00
검색결과
08 : 00
검색결과 (실습)
01 : 00
검색결과 (구현)
01 : 00
섹션 10. - 탭
3 강의 09 : 00
05 : 00
탭 (실습)
01 : 00
탭 (구현)
03 : 00
섹션 11. - 추천 검색어
1 강의 07 : 00
추천 검색어 구현
07 : 00
섹션 12. - 최근 검색어
3 강의 10 : 00
최근 검색어
06 : 00
최근 검색어 (실습)
01 : 00
최근 검색어 (구현)
03 : 00
섹션 13. - 개선된 점
1 강의 02 : 00
섹션 14. 컴포넌트
8 강의 44 : 00
Vue Component 소개
03 : 00
FormComponent 구현 1
07 : 00
FormComponent 구현 2
10 : 00
ResultComponent 구현
04 : 00
List Component 구현 1
09 : 00
List Component 구현 2
05 : 00
Tab Component 1
02 : 00
Tab Component 2
04 : 00
섹션 15. 단일 파일 컴포넌트 구현
5 강의 18 : 00
단일 파일 컴포넌트 1
04 : 00
단일 파일 컴포넌트 2
03 : 00
단일 파일 컴포넌트 3
05 : 00
단일 파일 컴포넌트 (실습)
01 : 00
단일 파일 컴포넌트 (구현)
05 : 00
섹션 16. 정리
1 강의 02 : 00

공개 일자

2018년 1월 13일 (마지막 업데이트 일자 : 2018년 8월 20일)

수강 후기

4.9
37개의 수강평
김동혁 5달 전
강의 장점 1. 편집을 엄청 잘해놓으셔서 강의시간이 짧고 이로 인해 2회독 3회독 하는데 부담이 없음. 마치 공단기나 수능의 1타 인강처럼 편집이 장난 아님. 사용자의 시간을 안뺏고 진짜 강의도 짧으면서 안에 핵심 내용은 다들어가있음. 2. 강의 커리큘럼을 완벽하게 짜놓음. 처음부터 vuejs를 배웠으면 vuejs가 가지고 있는 장점이나 이점을 이해하기 힘들었을 것임. 순수 자바스크립트로 기능 구현을 하면서 고생을 뻘뻘하고, 이후에 같은 기능을 vuejs로 구현하면서 암을 치유하는 이 기법은 참으로 대단함 단점 없음. 인프런에서 강의 4-5개 들었지만 없다고 쓴건 처음임.. 시작할려고하는 분들에게 ES6 기본 커리큘럼은 듣고 오셔야 이 강의를 듣기 쉬움. 저같은 경우 Es6를 제대로 모르고 자바스크립트 기초강의만 듣고 와서 이 강의를 처음 수강했는데 처음 자바스크립트로 구현하는 곳에서 이해가 안되서 꽤 힘들었고 인터넷 찾아보면서 하나하나 개념익혔는데 이게 알고보니 ES6 기초강의 하나 들었으면 해결될 문제였음 마지막으로 강사분에게 좋은 강의 감사합니다. 무조건 다른 강의도 수강하겠다는 생각 듭니다. (__) 한줄평 : 인프런 1타 강사 & 강의입니다.
이유정 7달 전
강좌 엄청 좋아요. 퍼블리셔 일하다 웹 개발쪽으로 가고 싶다고 생각해서 인프런에서 강의 찾다가 vue.js가 제일 가벼운 framework라고 듣고, 강사님 강의 듣게 됬는데... 좋아요.. 엄청... 인터넷에서 강의 듣다가 내용이 공중분해 되는 느낌을 받은 적이 빈번했는데, 강사님 강의는 전혀 아니네요... 신기합니다... 질문 응답도 빨리 해주시네요. 감사합니다. vue.js 좀더 심도 있게 공부하고 싶어졌어요
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스