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

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

(30개의 수강평)

703명의 수강생

44,000원

김정환
평생
초급, 중급
수료증
59개 수업, 총 3시간 57분
Wishlist

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. 지식공유자 소개

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

지식공유자 소개

김정환

교육과정

준비
강의 소개
02 : 00
개발환경 구성
03 : 00
요구사항 분석
04 : 00
순수JS (MVC)
MVC 패턴 설명
02 : 00
폴더 구조
11 : 00
- 검색폼
검색폼 구현 1
07 : 00
검색폼 구현 2
03 : 00
검색폼 구현 3
04 : 00
검색폼 구현 4 (실습)
02 : 00
검색폼 구현 4 (구현)
04 : 00
- 검색결과
검색결과 구현 1
10 : 00
검색결과 구현 2
03 : 00
검색결과 구현 3 (실습)
01 : 00
검색결과 구현 3 (구현)
02 : 00
- 탭
탭 구현 1
02 : 00
탭 구현 2
06 : 00
탭 구현 3 (실습)
01 : 00
탭 구현 3 (구현)
04 : 00
- 추천 검색어
추천 검색어 구현 1
09 : 00
추천 검색어 구현 2
07 : 00
추천 검색어 구현 3 (실습)
01 : 00
추천 검색어 구현 3 (구현)
04 : 00
- 최근 검색어
최근 검색어 구현 1, 2
06 : 00
최근 검색어 구현 3
03 : 00
최근 검색어 구현 4 (실습)
01 : 00
최근 검색어 구현 4 (구현)
06 : 00
최근 검색어 구현 checkout
02 : 00
최근 검색어 구현 5 (실습)
01 : 00
최근 검생어 구현 5 (구현)
02 : 00
Vue.js (MVVM)
MVVM 구조설명
04 : 00
vue.js 설치
06 : 00
- 검색폼
검색폼
08 : 00
검색폼 (실습)
01 : 00
검색폼 (구현)
03 : 00
- 검색결과
검색결과
08 : 00
검색결과 (실습)
01 : 00
검색결과 (구현)
01 : 00
- 탭
05 : 00
탭 (실습)
01 : 00
탭 (구현)
03 : 00
- 추천 검색어
추천 검색어 구현
07 : 00
- 최근 검색어
최근 검색어
06 : 00
최근 검색어 (실습)
01 : 00
최근 검색어 (구현)
03 : 00
- 개선된 점
개선된 점
02 : 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
단일 파일 컴포넌트 구현
단일 파일 컴포넌트 1
04 : 00
단일 파일 컴포넌트 2
03 : 00
단일 파일 컴포넌트 3
05 : 00
단일 파일 컴포넌트 (실습)
01 : 00
단일 파일 컴포넌트 (구현)
05 : 00
정리
정리
02 : 00

수강 후기

4.9
30개의 수강평
김동혁 23시간 전
강의 장점 1. 편집을 엄청 잘해놓으셔서 강의시간이 짧고 이로 인해 2회독 3회독 하는데 부담이 없음. 마치 공단기나 수능의 1타 인강처럼 편집이 장난 아님. 사용자의 시간을 안뺏고 진짜 강의도 짧으면서 안에 핵심 내용은 다들어가있음. 2. 강의 커리큘럼을 완벽하게 짜놓음. 처음부터 vuejs를 배웠으면 vuejs가 가지고 있는 장점이나 이점을 이해하기 힘들었을 것임. 순수 자바스크립트로 기능 구현을 하면서 고생을 뻘뻘하고, 이후에 같은 기능을 vuejs로 구현하면서 암을 치유하는 이 기법은 참으로 대단함 단점 없음. 인프런에서 강의 4-5개 들었지만 없다고 쓴건 처음임.. 시작할려고하는 분들에게 ES6 기본 커리큘럼은 듣고 오셔야 이 강의를 듣기 쉬움. 저같은 경우 Es6를 제대로 모르고 자바스크립트 기초강의만 듣고 와서 이 강의를 처음 수강했는데 처음 자바스크립트로 구현하는 곳에서 이해가 안되서 꽤 힘들었고 인터넷 찾아보면서 하나하나 개념익혔는데 이게 알고보니 ES6 기초강의 하나 들었으면 해결될 문제였음 마지막으로 강사분에게 좋은 강의 감사합니다. 무조건 다른 강의도 수강하겠다는 생각 듭니다. (__) 한줄평 : 인프런 1타 강사 & 강의입니다.
깜도링 7일 전
순수 javascript부터 vue.js까지 흐름이 너무 좋았습니다.
Hyunju Lee 10일 전
모듈 방식으로 개발하는 게 궁금해서 수강하게 되었습니다. 단계별로 구현방식을 달리해서 진행되어 더 이해하기 좋았고 미니프로젝트로 한번 더 복기하면 완전히 내것이 되지 않을까 싶습니다.
이유정 1달 전
강좌 엄청 좋아요. 퍼블리셔 일하다 웹 개발쪽으로 가고 싶다고 생각해서 인프런에서 강의 찾다가 vue.js가 제일 가벼운 framework라고 듣고, 강사님 강의 듣게 됬는데... 좋아요.. 엄청... 인터넷에서 강의 듣다가 내용이 공중분해 되는 느낌을 받은 적이 빈번했는데, 강사님 강의는 전혀 아니네요... 신기합니다... 질문 응답도 빨리 해주시네요. 감사합니다. vue.js 좀더 심도 있게 공부하고 싶어졌어요
성하나 2달 전
만족해요 혼자 독학하기 너무 힘들어서 강의 들어봣어요... 이제야 조금은 이해가 될거같아요, 감사합니다.
MINSEOK SONG 2달 전
만족합니다. 순수 자바스크립트 -> vue -> 단계 별로 변형 해서 이해하기 좋게 된거 같습니다. 좋은강의 감사합니다.
김호균 4달 전
vue를 왜 써야하는지 이해하게 해주는 강의 바닐라JS로도 모든걸 다 할 수 있지만 VueJS를 사용하면 어떤 이득을 얻게 되는지 강의를 듣기만하면 이해할 수 있도록 커리큘럼이 잘 구성되어 있네요. 바닐라JS를 많이 사용하지 않은 초보분들은 조금 어려울 수 있지만 반복적으로 보면 이해 될거라 생각해요. 저도 그랬으니까요 ㅋㅋ 좋은 강의 감사합니다!
김정환 프로필

김정환 4달 전
그러셨군요 여러번 반복해서 들으셨다니 감사합니다.

서상연 4달 전
바닐라 JS 에서 Vue.js까지 변하는 과정을 한눈에 알아볼 수 있어서 좋았습니다. 순수 Javascript를 가지고 MVC패턴으로 구현하는 모습도 인상깊었지만 이를 다시 Vue.js를 활용해서 구현하고 변화되는 과정을 보면서 자바스크립트 가능성과 Vue.js를 사용하면서 얻는 이득에 대해서 다시한번 깨닫게 되었습니다. 또한 Vue.js에서 사용방법도 직접 사용에서 부터 컴퍼넌트와 단일컴퍼넌트까지 순차적으로 발전시켜 나가는 모습이 인상깊었습니다. 좋은 강의 잘 들었습니다.
김정환 프로필

김정환 4달 전
수고하셨습니다

Hanwook Kim 4달 전
재미있게 잘 봤습니다. 좋은 강의 감사합니다.
김정환 프로필

김정환 4달 전
수고하셨습니다.

choh 5달 전
정말 좋은 강의였습니다. 단순 vue의 사용법만을 설명한 강의가 아니라 순수 js에서부터 vue로의 변화를 보여주셔서 더욱 좋았습니다. vue를 써서 어느면에서 편리하게 변화가 왔는지에 대해 이해하기 좋았네요. 수고하셨습니다.
김정환 프로필

김정환 5달 전
수고하셨습니다. 제대로 들으셨네요. 감사합니다.

박시중 박 5달 전
휼륭합니다. Vue 초보자로서 전체의 흐름을 잡을 수 있어서 아주 좋았습니다. 전작 기초 부분은 많이 아쉬웠는데, 이번이 참 좋네요~
김태정 6달 전
재밋엇습니다. 덕분에 vue를 잘 배운거 같애여
zerotiger 6달 전
일단 시작하세요. 그리고 배우세요 !
YOUNGHEE KWON 7달 전
많은 도움이 됩니다. 실무에서 갑자기 vue를 적용하게 되어 막막하던 차였고 속성으로 개념 파악이 필요했는데,본 강의를 듣고 환벽히는 아니겠지만 어떤건지 알게 되었습니다...좋은 강의 감사합니다~
Jung Cheol 7달 전
굉장히 즐거운 강의였습니다. 현업에서 자바스크립트의 컴포넌트화에 대한 욕심만 있었는데, 이 강의를 듣고 감이 잡혀서 적용해보려고 합니다. 아직 Vue 도입은 어렵지만 순수 js만으로도 만족할만한 코드를 작성할 수 있을 것 같습니다. 감사합니다.
이정진 8달 전
괜찮았습니다. 기존 바닐라 자바스크립트로 개발했을때 부가적으로 해야하는 일들을 어떻게 Vue.js가 처리해주는지 이해하기 쉽게 잘 설명해주십니다.
케이라우트 9달 전
괜찮은 편입니다 왜 배달의민족 프론트엔지니어 인지 알만한 JS 실력보유자임을 영상을 통해 알 수 있습니다. 바닐라JS 에 대한 이해도가 높으십니다. 다만, 저는 프론트를 Vue.js 로만 다룰 생각이기에 바닐라JS 를 통한 구현 강좌는 몇 편 보다가 건너 뛰었습니다. 이쉬운 점은, Vue.js 에 대해서 깊숙히 다루진 않았단 느낌입니다. 다만, Vue.js 를 쉽고, 실무에서 다루는 내용으로 결과에 대한 가시성이 있어 재미있게 접근 할 수 있습니다. Vue.js 를 새로 배워보시고자 하거나, Vue.js 공부는 마쳤는데, 실무 응용은 못하겠다 하는 분들께 추천드리는 강좌입니다.
김정환 프로필

김정환 9달 전
감사합니다 뷰의 필요성에 대해 어필하려다보니 앞부분에 순수js 내용을 담았습니다. 활용에 대한 내용은 지금 준비중인데요 이번 강의에서 아쉬우셨던 부분을 다소 채워줄수 있지 않을까 싶네요.

이동준 이 10달 전
과외받는 느낌이네요 ㅋㅋㅋ 많은 동영상 강의를 봤지만 매번 왜 쓰는지, 왜 해야하는지 왜? 라는 의구심을 지우지 못했는데 이강의는 의구심이 생기기전에 왜 사용해야하는지 왜 컴포넌트를 쓰게 되는지 알려주어서 수월하게 들었습니다. 강사님 더 좋은 vue강의 만들어주세요 ㅎㅎ vue공부 더 해보고 싶네요
김정환 프로필

김정환 9달 전
감사합니다 강의 의도를 제대로 알아주셨네요. ????? 계속 노력하겠습니다!

coookk er 10달 전
잘었었 좋은강의 감사합니다. 많은 도움이 되었습니다.
김정환 프로필

김정환 9달 전
감사합니다

pison 10달 전
최고의 프론트엔드 강의 입니다! react, vue 둘다 회사에서 써야하기 때문에, 원리는 1도 모르고 그저 사용법만 익혀서 개발하곤 했습니다. DOM에 대한 이해가 현저히 낮았고, 프론트에 대한 깊이가 매우 낮았었습니다. 강의를 통해 좀 더 깊은 기저의 지식들을 알 수 있었고, 무엇을 모르는지 더 명확해져서 앞으로 무엇을 공부해야 할지 알게 되었습니다. 아직은 부족하지만 꾸준히 공부해보려고 합니다 ㅎㅎ 감사를 담아, 고의성 드림 ps. 다음에는 TDD 강좌 올리신것 들으려구요! ㅎㅎ 앞으로도 많은 강의 부탁드립니다!
김정환 프로필

김정환 9달 전
감사합니다 그렇게나 도움이 되셨다니 뿌듯하네요. TDD 강의도 도움이 되었으면 좋겠습니다.

Gunho Lee 2018.04.09
최신 프론트엔드 개발 전반을 소개하는 강의 Vue.js 프레임워크를 소개하고 있지만 MVC 패턴부터 시작해서 최근 프론트엔드 개발 전반에 대해 잘 소개하는 강의라고 생각합니다. 좋은 강의 감사합니다.
김정환 프로필

김정환 2018.04.09
고맙습니다. 들어주셔서 감사합니다.

박현규 2018.02.07
잘들었습니다. 감사합니다.
김정환 프로필

김정환 2018.02.09
수고하셨습니다 끝까지 들어주셔서 감사합니다

김호영 2018.02.05
좋은강좌 잘 들었습니다. 한 프로젝트를 VanillaJS와 VueJS 두가지로 구현해 차이점과 장점을 볼 수 있었네요 또한 브랜치를 통해 프로젝트에서 놓친부분을 따라갈 수 있던점도 정말 좋았습니다 좋은 강좌 내주셔서 감사합니다.
김정환 프로필

김정환 2018.02.07
감사합니다!! 도움이 되셔서 다행이네요^^

Minsu Kong 2018.01.30
잘 배웠습니다. 인프런에서 제일 마음에 드는 강좌였습니다. 앞으로도 많은 강좌 열어주세요!
김정환 프로필

김정환 2018.02.01
고맙습니다~ 수고하셨습니다! 다음에도 잘 부탁드립니다.

이근혁 2018.01.29
정말 좋은강의였습니다! 웹 개발 입문때부터 Jquery로 시작을 하였는데 순수 Js로 MVC 패턴을 직접 구현해보며 개발해보고 또 다시 Vue.js로 MVVM 패턴에 대해 익히면서 동일한 기능을 다시 구현해보니 차이점을 알고 더욱 쉽게 이해할 수 있었던것같습니다! MVC, MVVM.. 개념으로는 자주 접해보았지만 실제로 구현하니 확 와닿는 기분입니다. 강의시간동안 정말 지루하지않고 알차게 배운것같습니다! 좋은강의 감사합니다~~~
김정환 프로필

김정환 2018.02.01
고맙습니다 앞으로 다양한 패턴을 공부해 두시면 설계하는데 도움이 될것 같습니다. 수고하셨어요

김선우 2018.01.29
빨리 수강하세요! 서버사이드쪽만 담당하다보니 자바스크립트를 공부해도 어떻게 써먹어야할지 막막했었는데, 이번 강의를 통해 MVC 패턴, MVVM 패턴 ES6 코드까지 3마리 토끼를 잡은 듯 합니다. 정말 돈이 아깝지 않네요. 감사합니다.
김정환 프로필

김정환 2018.02.01
고맙습니다 수고하셨어요. 만약 es6 미지원 브라우져라면 바벨도 참고하시면 좋습니다.

zergcity 2018.01.28
실제 업무를 하는 것 같은 강좌 처음부터 바로 해당 강의에 들어가는 것 보다 실제 개발 할 내용에 대하여 '업무분석'을 하시고, 강의를 진행합니다. 마치 회사에서 일을 하는 것 같은 기분을 느낄 수 있었고, 해당 수업마다 브랜치를 따로 제공하셔서 학습하는데도 편합니다. 전부터 몇 개의 강의를 봤는데, 점점 좋은 강의를 만드시는 것 같아 다음 강좌가 기다려지네요. 좋은 강의 감사합니다. :)
김정환 프로필

김정환 2018.02.01
감사합니다 그렇게 느끼셔서 다행이네요. 다음 강의도 잘 부탁드립니다~

건규 2018.01.26
매우 만족스러운 강좌였습니다! 하나의 프로젝트를 Vanillajs 로 MVC 패턴 구현을 해보고 Vuejs 로 MVVM 패턴으로 구현해보고 이를 컴포넌트로 리팩토링하는 과정을 담아 매우 저에게는 유익한 강좌였습니다! 강좌를 할인받은게 죄송할 정도로, 정환님의 다음 강좌를 예약하고 싶을 정도였답니다. 감사합니다!
김정환 프로필

김정환 2018.01.27
고맙습니다~ 도움이 되셔서 정말 뿌듯하네요. 패턴에 대해서는 이것보다 더 좋은 자료가 많으니깐 꼭 한번더 공부하셨으면 합니다. 뷰도 이후에는 상태관리가 필요한 경우가 있을거에요. vuex도 미리 공부하시면 도움이 될것 같습니다.

진영화 2018.01.20
믿고듣는 정환님 강의 이번에도 믿고 결제합니다. 열심히 듣겠습니다. 좋은강의 많이 만들어 주세요
김정환 프로필

김정환 2018.01.21
영화님 고맙습니다. 질문도 많이 해주세요~ ..

장기효(캡틴판교) 2018.01.16
MVC 패턴과 MVVM 패턴을 이해할 때 꼭 들어야 하는 최고의 수업입니다. 자바스크립트 개발자들이 기초 문법을 떼고 나면 자연스럽게 관심을 갖게 되는 것이 디자인 패턴입니다. 이 수업은 전통적 웹 개발 방식인 MVC 패턴을 ES6 코드로 깔끔하게 구현하는데 그치지 않고, 실제 서비스 시나리오 곳곳에 언어의 장점을 녹여내었습니다. 그리고, MVC 패턴을 직접 구현하며 자바스크립트의 이해를 높인 수강생들이 Vue.js로 리팩토링 해보면서 MVVM 패턴의 개념을 정확하게 이해할 수 있습니다. 무엇보다도 수강생들의 학습 시간을 조금이라도 효율적으로 활용하기 위해 실습 단계별 깃허브 브랜치를 제공하는 모습에서 강사님의 배려가 느껴집니다. 필요한 말만 전달하기 위해 중간중간 설명을 편집해주시는 모습도 정말 보기 좋네요. 수강한 시간 이상의 값진 배움을 얻어 갑니다. 강의 준비해주시느라 고생 많으셨습니다 :)
김정환 프로필

김정환 2018.01.21
ㅎㅎ 고마워요 판교캡틴~ .