BEST

개발 · 프로그래밍

프론트엔드

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

Name: 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
Price: 44000 KRW

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

(4.7) 수강평 127개

수강생 2,184명

김정환

JavaScript Vue.js

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

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. 도움이 되는 분들

웹 프론트엔드 개발 입문자
자바스크립트 디자인 패턴의 의미를 이해하고 싶은 분
Vue.js 개발을 배우고 싶은 분
순수 자바스크립트와 Vue.js 기술의 차이점을 알고 싶은 분

4. 배우는 것들

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

5. 지식공유자 소개

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

블로그: https://jeonghwan-kim.github.io/
우아한형제들 프론트엔드 개발자

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

선수 지식,
필요할까요?

Javascript 기본
HTML, CSS 마크업 지식

안녕하세요
김정환입니다.

13,511

명

수강생

837

개

수강평

583

개

답변

4.8

점

강의 평점

개

강의

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

커리큘럼

전체

59개 ∙ (3시간 57분)

섹션 1. 준비

3개 ∙ (9분)

섹션 2. 순수JS (MVC)

2개 ∙ (13분)

4. MVC 패턴 설명
02:00
5. 폴더 구조
11:00

섹션 3. - 검색폼

5개 ∙ (20분)

6. 검색폼 구현 1
07:00
7. 검색폼 구현 2
03:00
8. 검색폼 구현 3
04:00
9. 검색폼 구현 4 (실습)
02:00
10. 검색폼 구현 4 (구현)
04:00

섹션 4. - 검색결과

4개 ∙ (16분)

섹션 5. - 탭

4개 ∙ (13분)

섹션 6. - 추천 검색어

4개 ∙ (21분)

섹션 7. - 최근 검색어

7개 ∙ (21분)

섹션 8. Vue.js (MVVM)

2개 ∙ (10분)

섹션 9. - 검색폼

3개 ∙ (12분)

섹션 10. - 검색결과

3개 ∙ (10분)

섹션 11. - 탭

3개 ∙ (9분)

섹션 12. - 추천 검색어

1개 ∙ (7분)

섹션 13. - 최근 검색어

3개 ∙ (10분)

섹션 14. - 개선된 점

1개 ∙ (2분)

섹션 15. 컴포넌트

8개 ∙ (44분)

섹션 16. 단일 파일 컴포넌트 구현

5개 ∙ (18분)

섹션 17. 정리

1개 ∙ (2분)

강의 게시일: 2018. 01. 13.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

127개

4.7

127개의 수강평

김동혁
수강평 20
∙
평균 평점 4.8
2019. 05. 21.
5
100% 수강 후 작성
강의 장점 1. 편집을 엄청 잘해놓으셔서 강의시간이 짧고 이로 인해 2회독 3회독 하는데 부담이 없음. 마치 공단기나 수능의 1타 인강처럼 편집이 장난 아님. 사용자의 시간을 안뺏고 진짜 강의도 짧으면서 안에 핵심 내용은 다들어가있음. 2. 강의 커리큘럼을 완벽하게 짜놓음. 처음부터 vuejs를 배웠으면 vuejs가 가지고 있는 장점이나 이점을 이해하기 힘들었을 것임. 순수 자바스크립트로 기능 구현을 하면서 고생을 뻘뻘하고, 이후에 같은 기능을 vuejs로 구현하면서 암을 치유하는 이 기법은 참으로 대단함 단점 없음. 인프런에서 강의 4-5개 들었지만 없다고 쓴건 처음임.. 시작할려고하는 분들에게 ES6 기본 커리큘럼은 듣고 오셔야 이 강의를 듣기 쉬움. 저같은 경우 Es6를 제대로 모르고 자바스크립트 기초강의만 듣고 와서 이 강의를 처음 수강했는데 처음 자바스크립트로 구현하는 곳에서 이해가 안되서 꽤 힘들었고 인터넷 찾아보면서 하나하나 개념익혔는데 이게 알고보니 ES6 기초강의 하나 들었으면 해결될 문제였음 마지막으로 강사분에게 좋은 강의 감사합니다. 무조건 다른 강의도 수강하겠다는 생각 듭니다. (__) 한줄평 : 인프런 1타 강사 & 강의입니다.
- 김정환
  지식공유자
  2020. 03. 21.
  이런 리뷰를 이제야 봤다니... 고맙습니다. 🙇‍♂️
- gga01075
  2021. 11. 16.
  저는 자바스크립트 기초공부좀 하고 다시 와야겠네요ㅠㅠㅠ
이유정
수강평 7
∙
평균 평점 4.4
2019. 04. 10.
5
100% 수강 후 작성
강좌 엄청 좋아요. 퍼블리셔 일하다 웹 개발쪽으로 가고 싶다고 생각해서 인프런에서 강의 찾다가 vue.js가 제일 가벼운 framework라고 듣고, 강사님 강의 듣게 됬는데... 좋아요.. 엄청... 인터넷에서 강의 듣다가 내용이 공중분해 되는 느낌을 받은 적이 빈번했는데, 강사님 강의는 전혀 아니네요... 신기합니다... 질문 응답도 빨리 해주시네요. 감사합니다. vue.js 좀더 심도 있게 공부하고 싶어졌어요
- 김정환
  지식공유자
  2020. 03. 21.
  저도 퍼블리셔와 일해본 경험이 있는데 그때 뷰js가 많이 생각났었어요. 잘 활용만한다면 협업하기 좋을거 같았는데, 이렇게 수강해주셔서 고맙습니다.
훈트
수강평 3
∙
평균 평점 5.0
2020. 02. 22.
5
100% 수강 후 작성
실무에서는 아직 ES5와 제이쿼리만 사용을 하는데 공부의필요성을 느껴서 강의를 수강하게 됐습니다. 바닐라스크립트 부분 강의에서 모르는 api나 es6 문법이 있어서 찾아보면서 공부를 했고 이제 vue 파트로 넘어와서 학습중인데 이 강의를 수강하기 잘했다는 생각이 듭니다. 감사합니다!
- 김정환
  지식공유자
  2020. 03. 21.
  모르는 것을 찾아볼수 있다는 것도 능력이라고 생각해요. 초반에 어려우셨을 텐데 잘 따라와 주셔서 고맙습니다.
nicolas83
수강평 107
∙
평균 평점 3.3
2020. 10. 07.
5
100% 수강 후 작성
정말 좋은 강좌였습니다. 프로젝트를 통해 배우는 강좌여서 전혀 지루하지 않고 이해가 잘되었습니다. 5개 강좌 모두 구입하고 처음으로 끝맺은 강좌였습니다. 나머지 강좌들도 모두 들어볼 계획입니다. 추가적인 강좌들도 생겼으면 좋겠습니다. nuxt, vuetify 같은 다른 library 들을 사용하는 내용이던가 제가 ionic 을 공부하는데 vue beta version 이 나왔고 좀있으면 vue 가 들어간 정식 버전이 나온다 하는데 vue 를 이용한 ionic 아님 많은 초보 개발자들이 원하면서 뻔한 topic이지만 개발이 쉽지 않고 내용 이해 하기 쉽지 않은 ecommerce 나 instagram clone 같은거였으면 좋겠습니다. 배포까지면 더더욱 좋을거 같습니다. 그리고 그 당시 내용관 관련된 error 관련된tip 같은거도 중간중간에 짤막하게 있었으면 좋겠습니다. 다시한번 정말 만족스러운 강좌였습니다.
윤아몬
수강평 4
∙
평균 평점 5.0
2020. 03. 09.
5
100% 수강 후 작성
강의 하나하나 길지 않게 편집이 되어있어서 좋았습니다. 인프런에서 처음으로 결제한 유료 강의인데 좋은 선택이였다고 생각이드네요 멋진 강의 감사합니다. 독학하느라 힘들었는데 큰 도움이 되었어요.
- 김정환
  지식공유자
  2020. 03. 21.
  인프런 첫강의라니 무척 영광이에요.

김정환님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

김정환

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.

중급이상

Node.js, Webpack, Babel

[리액트 2부] 고급 주제와 훅

김정환

리액트(React)는 실무에서 가장 많이 찾는 인기 프론트엔드 기술입니다. 리액트를 이용해 애플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

중급이상

React, React Context, react-component

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

이 강의에서는 Javascript 언어로 백엔드 개발을 할 수 있는 NodeJS를 학습하고, 테스트 주도 개발(TDD) 방법으로 NodeJS를 이용해 API 서버 개발을 할 수 있습니다. 또한 NodeJS의 대표적인 웹 프레임워크 ExpressJS의 기초 원리를 이해하고, 모바일과 웹 서비스에서 사용하는 REST API 개발 방법을 학습할 수 있습니다.

초급

TDD, Node.js, Express

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

김정환

리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

초급

React, MVC

웹 개발의 핵심, HTTP 완벽 마스터하기!

김정환

HTTP 기본부터 데이터 요청, 실시간 통신, 보안과 성능 최적화까지! 웹 개발자가 꼭 알아야 할 HTTP의 모든 것을 깊이 있게 배워보세요.

초급

https, cookie, Ajax

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

김정환

다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 Vuejs의 중급 기술 (Vuex, Vue-Router, Http)을 학습할 수 있습니다. 퍼블리싱 결과물, API 서버와 문서하는 등을 미리 구성했기에 협업하는 방법도 체험하실 수 있는 강의입니다.

중급이상

JavaScript, Vue.js

견고한 JS 소프트웨어 만들기

김정환

같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

중급이상

소프트웨어 테스트, TDD, jasmine

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

프론트엔드 개발 시 꼭 해봐야 하는 실무 예제 Part.1

유용한IT학습

더 이상 자바스크립트와 ES6을 따로 공부할 필요없습니다. 본 강의는 자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

초급

JavaScript

클린업 JavaScript: 점프업!

김영보

자바스크립트 최종 코스! ES2025 기준 실행 콘텍스트 구조와 방법, Event Loop, 멀티 스레딩을 다룹니다. 자바스크립트 언어에 담겨진 언어 문화를 다룹니다.

초급

JavaScript

Javascript ES6+ 제대로 알아보기 - 초급

정재남

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

초급

JavaScript, ES6

윤재성의 Vue.js 프로젝트를 통한 실무 개발 과정

소프트캠퍼스

본 과정은 VueJS의 기본적인 부분과 미니프로젝트를 통한 실무 개발 방식을 학습할 수 있습니다. VueJS를 적용하시면 웹 애플리케이션개발이 용이해지고 서버의 부담을 줄일 수 있어 최근 트랜드가 되는 개발 방식입니다. 본 과정을 학습하시게 되면 최근 많이 사용하는웹 개발 방식으로 개발을 하실 수 있게 됩니다.

초급

Vue.js

쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1

호눅스

개발자 출신의 교육 전문가들이 만든 최고품질의 소프트웨어 교육기관 코드스쿼드에서 진행하는 코드스쿼드 마스터즈 코스 레벨1 입니다. Javascript 입문 과정으로서 직접 프로그래밍을 구현을 통해서 코딩의 기초 개념을 배우는것을 목표로 하고 있습니다.

입문

JavaScript

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹개발

그린코딩

그냥 들어보세요. 강의력과 흡입력 그리고 강의의 질이 다릅니다.

입문

HTML/CSS, JavaScript, Spring Boot

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접