순수 자바스크립트와 VueJS라는 UI Library를 이용하여 쇼핑몰 검색 페이지를 만들어 보며 VueJS 개발 학습을 진행합니다.
순수 자바스크립트와 VueJs 로 개발을 각기 진행하며 각 개발의 차이점과 MVC, MVVM 디자인 패턴의 차이도 배울 수 있습니다.

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 아키텍처
  • 컴포넌트 개발
vue 자바스크립트 강좌

5. 지식공유자 소개

김정환

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

강좌 평가

5

18 개의 수강평
  • 5 점18
  • 4 점0
  • 3 점0
  • 2 점0
  • 1 점0
  1. 박현규의 프로필 사진

    잘들었습니다. 감사합니다.

    5

    잘들었습니다. 감사합니다.

  2. 호도리의 프로필 사진

    좋은강좌 잘 들었습니다.

    5

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

  3. Minsu Kong의 프로필 사진

    잘 배웠습니다.

    5

    인프런에서 제일 마음에 드는 강좌였습니다.

    앞으로도 많은 강좌 열어주세요!

  4. 이근혁의 프로필 사진

    정말 좋은강의였습니다!

    5

    웹 개발 입문때부터 Jquery로 시작을 하였는데 순수 Js로 MVC 패턴을 직접 구현해보며 개발해보고
    또 다시 Vue.js로 MVVM 패턴에 대해 익히면서 동일한 기능을 다시 구현해보니 차이점을 알고 더욱 쉽게 이해할 수 있었던것같습니다!

    MVC, MVVM.. 개념으로는 자주 접해보았지만 실제로 구현하니 확 와닿는 기분입니다.

    강의시간동안 정말 지루하지않고 알차게 배운것같습니다! 좋은강의 감사합니다~~~

  5. Sunwoo Kim의 프로필 사진

    빨리 수강하세요!

    5

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

  6. zergcity의 프로필 사진

    실제 업무를 하는 것 같은 강좌

    5

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

    좋은 강의 감사합니다. 🙂

  7. 건규의 프로필 사진

    매우 만족스러운 강좌였습니다!

    5

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

    • 김정환의 프로필 사진

      고맙습니다~

      5

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

  8. 진영화의 프로필 사진

    믿고듣는 정환님 강의 이번에도 믿고 결제합니다.

    5

    열심히 듣겠습니다.
    좋은강의 많이 만들어 주세요

  9. Captain Pangyo의 프로필 사진

    MVC 패턴과 MVVM 패턴을 이해할 때 꼭 들어야 하는 최고의 수업입니다.

    5

    자바스크립트 개발자들이 기초 문법을 떼고 나면 자연스럽게 관심을 갖게 되는 것이 디자인 패턴입니다.
    이 수업은 전통적 웹 개발 방식인 MVC 패턴을 ES6 코드로 깔끔하게 구현하는데 그치지 않고,
    실제 서비스 시나리오 곳곳에 언어의 장점을 녹여내었습니다.

    그리고, MVC 패턴을 직접 구현하며 자바스크립트의 이해를 높인 수강생들이
    Vue.js로 리팩토링 해보면서 MVVM 패턴의 개념을 정확하게 이해할 수 있습니다.

    무엇보다도 수강생들의 학습 시간을 조금이라도 효율적으로 활용하기 위해
    실습 단계별 깃허브 브랜치를 제공하는 모습에서 강사님의 배려가 느껴집니다.
    필요한 말만 전달하기 위해 중간중간 설명을 편집해주시는 모습도 정말 보기 좋네요.

    수강한 시간 이상의 값진 배움을 얻어 갑니다.
    강의 준비해주시느라 고생 많으셨습니다 🙂

강좌 교육과정

준비
강의 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
개발환경 구성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
요구사항 분석학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
순수JS (MVC)
MVC 패턴 설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
폴더 구조학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
- 검색폼
검색폼 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
검색폼 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
검색폼 구현 3학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
검색폼 구현 4 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
검색폼 구현 4 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
- 검색결과
검색결과 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:00
검색결과 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
검색결과 구현 3 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
검색결과 구현 3 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
- 탭
탭 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
탭 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
탭 구현 3 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
탭 구현 3 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
- 추천 검색어
추천 검색어 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:09:00
추천 검색어 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
추천 검색어 구현 3 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
추천 검색어 구현 3 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
- 최근 검색어
최근 검색어 구현 1, 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:06:00
최근 검색어 구현 3학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
최근 검색어 구현 4 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
최근 검색어 구현 4 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
최근 검색어 구현 checkout학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
최근 검색어 구현 5 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
최근 검생어 구현 5 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Vue.js (MVVM)
MVVM 구조설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
vue.js 설치학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
- 검색폼
검색폼학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:08:00
검색폼 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
검색폼 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
- 검색결과
검색결과학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:08:00
검색결과 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
검색결과 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
- 탭
학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:00
탭 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
탭 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
- 추천 검색어
추천 검색어 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
- 최근 검색어
최근 검색어학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:06:00
최근 검색어 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
최근 검색어 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
- 개선된 점
개선된 점학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
컴포넌트
Vue Component 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
FormComponent 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
FormComponent 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
ResultComponent 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
List Component 구현 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
List Component 구현 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
Tab Component 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Tab Component 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
단일 파일 컴포넌트 구현
단일 파일 컴포넌트 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
단일 파일 컴포넌트 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
단일 파일 컴포넌트 3학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
단일 파일 컴포넌트 (실습)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
단일 파일 컴포넌트 (구현)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
정리
정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
  • 가격 옵션 +
  • 무제한
  • ,
  • 강좌 수료증
  • 59개 강의, 총 3 시간 57 분

인프런은 성장기회의 평등 을 추구합니다.

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4202-1180 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R10 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED