죄송합니다. 접근 권한이 없습니다.

최신 프론트엔드 프레임워크 Angular & React 의 장점을 결합하여 만든 Vue.js 의 기초를 학습하는 강좌입니다.

1. 강좌소개

최신 프론트엔드 프레임워크 Angular & React 의 장점을 결합하여 만든 Vue.js 의 기초를 학습하는 강좌입니다. 본 강의는 프론트엔드 개발에 입문하는 비 개발자, 디자이너, 퍼블리셔, 비 전공자, 대학생 및 입문자 를 대상으로 합니다.

Fast Campus 의 프론트엔드 웹앱 캠프 교과과정3시간 짜리 Vue 강의를 재구성하여 녹화하였으며, 3시간 안에 Vue 의 개념을 학습하고 기본적인 화면 개발이 가능하도록 수강생의 이해를 돕는데 목적을 두고 있습니다.

전체적인 강의 방식은 이미 많은 온라인 강좌에서 검증된 간단히 이론 설명 -> 강사가 라이브 코딩 -> 준비된 예제에 수강생이 바로 실습 의 형태로 구성되어 있습니다. 해당 교육 방식은 이론을 배우고 바로 실습하는 형태의 교육방식으로 전 세계 개발자들이 공감하는 효과적인 교육방식입니다.

이 강의는 Vue 의 개요, 구성요소, 프로젝트 구성 팁 등 Vue 로 화면을 개발하는 데 필요한 전반적인 내용들을 다룹니다.

“쉽고, 빠르고, 강력한 Vue 로 멋진 프론트엔드 개발자가 되시길 바랍니다.”

2. 강좌 특징

본 강좌의 목표는 Vue 프레임워크의 필수 요소들에 대한 개념을 잡고, 뼈대를 세운 뒤 수강 후 Vue 를 이용해 간단한 화면 개발이 가능하도록 하는 것이 목표입니다. 3시간 만에 요즘 가장 핫한 프론트엔드 프레임워크를 학습하시고, 나도 프론트엔드 개발을 할 수 있다는 자신감을 얻어가세요.

다른 프론트엔드 프레임워크에 비해 쉽게 배울 수 있다는 것을 직접 체감하시기 바랍니다 🙂

3. 누구에게 도움이 되나요?

프론트엔드 개발에 관심있는 모든 분께 적합합니다.

  1. 프론트엔드 개발에 입문하는 분
  2. 프론트엔드 개발을 해보고 싶은 디자이너
  3. 프론트엔드 개발자로 전향하고픈 퍼블리셔
  4. 프론트엔드 개발자로 취업을 희망하는 대학생

다만 HTML, CSS, JS 의 기초는 알고 계셔야 합니다.

4. 어떤 걸 배우나요?

Vue 로 화면을 개발하기 위한 기본적인 구성요소와 실전 프로젝트 구성 팁 등 전반적인 내용을 다룹니다.

  • Vue Instance
  • Vue Components
  • Vue Router
  • Vue Template
  • Vue Resource
  • Vue Data Binding
  • Vue Single File Components
  • Vue Loader

ES6 (최신 자바스크립트 스펙) 와 Webpack 을 모르셔도 수업 진행이 가능합니다.

5. 연관된 강좌

웹팩 강좌

쉽게 배우는 Webpack

4.1
가격 옵션 +
160

6. 강사 소개

장기효 (캡틴판교)

웹으로 세상을 더 편하게 만들 수 있다고 믿는 웹 개발자 입니다.
웹 성능 최적화에 관심이 많고, 취미로 기술 블로그를 운영하며 노래 부르는 것을 좋아해 홈 레코딩을 합니다.

[프로필]

강좌 평가

4.4

16 개의 수강평
  • 5 점9
  • 4 점5
  • 3 점1
  • 2 점1
  • 1 점0
  1. 건규의 프로필 사진

    네, 만족합니다.

    2

    처음으로 결제를 한 인강이였는데요. 그럭저럭 만족합니다.

  2. 박의태의 프로필 사진

    Vue.js 입문하기 위해 정말 좋은 강의 입니다.^^

    5

    구성요소 하나하나에 대한 설명과 함께
    초급 난이도에 맞는 실습과제로 부담없이 입문할 수 있는 강의라고 생각합니다.^^
    감사합니다.

    ps. html, css, js 에 대한 기본적인 이해를 하신 후 강의를 수강하시길 추천드립니다.

  3. google_user의 프로필 사진

    빠르게 뷰 기초만 훑고 싶은 사람은 괜찮지만, Vue.js를 실무/프로젝트에 쓰려고 공부하는 사람에게는 비추

    3

    시중에 나와있는 Vue.js 책보다 공부의 깊이가 너무 얇다.
    이 강의는 미리 만들어둔 간단한 예제를 바탕으로 너무 짧게 핵심만 짚고 넘어가서 그런지 설명을 덜했는데 강의가 끝나는 느낌이다.
    보통 책 그니깐 활자로 설명하기 힘든 부분을 강의에서 풀어줘야 하는데, 시중에 나와있는 책들이 훨씬 더 자세히 나와있다.
    내가 본 Vue책 중에서 오징어 그려진 책이 입문에 좋은 내용이였고 여자 그려진 책이 실무에 적용할수 있는 수준이라 추천한다.

  4. miriamme의 프로필 사진

    빠르게 학습하는데 많은 도움이 되었습니다.

    5

    앞으로 추가될 강좌 많이 기대하겠습니다.

  5. 방랑벅시의 프로필 사진

    vue.js 기초강좌에 좋네요.

    5

    vue.js를 처음 접하면서 강의를 먼저 듣고 vue.js 책을 도서관에서 빌려서 보고 있는데 기초 강좌로 듣기에 좋네요.
    잘 들었습니다.

  6. batman의 프로필 사진

    4

    강좌 잘 보았습니다. 아주 기초적인 부분이라 다 본 입장에서 Vue Single File Components, Vue Loader등 실제 프로젝트에 필요한 내용을 구조와 파일간의 연관성, 샘플 프로젝트까지 했으면 참 좋았을 것 같네요.
    vue를 조금이라도 알고 들어오시는 분은 참고 하셔서 수강하시기 바랍니다. 강의하느라 수고 많았습니다.

    • Captain Pangyo의 프로필 사진

      제안해주신 내용을 강의에 보충할 계획입니다.

      5

      안녕하세요 권혁수님,

      이 강의는 강의 소개 페이지에도 나와 있지만 Vue.js를 처음 접해보는 분들에게 최대한 쉽게 프레임워크를 설명하고자 기초적인 내용을 위주로 다루었습니다. 특히 처음에 강의를 기획할 때 초급 / 중급 / 실전으로 이루어지는 3편의 시리즈물 강의를 염두에 두었으며, ‘중급’ 강좌에 혁수님이 제안해주신 실전 프로젝트 기반의 좀 더 실용적인 기술들을 다루려고 했습니다. 다행히 이번에 기회가 닿아서 말씀하신 내용들을 Do it! Vue.js라는 입문 서적에 담게 되었네요. 참고하시길 바라고 조만간 강의 콘텐츠를 보강할 계획에 있으니 많은 관심 바랍니다 🙂
      강의 수강해주셔서 감사합니다.
      – 장기효 드림 –

  7. 정시원의 프로필 사진

    4

    쉽게 한바퀴 돌아볼 수 있었던 강의였습니다.

  8. 새우깡의 프로필 사진

    간단하고 빠르면서도 배울건 거진 빠지지 않고 배울 수 있네요.

    5

    Vue 를 빠르게 배워서 실무에 쓰고 싶은 분들에게 최고의 강의가 아닌가 생각이 듭니다.
    반면 입문 보단 조금 수준은 높은거 같아요. 말그대로 입문자들은 백지 상태일테니까.. 초급정도가 아닐까요?ㅎㅎ
    강의당 시간은 저는 짧아서 오히려 좋은거 같습니다.
    다만 인프런에서 자동적으로 넘어가는 기능이 있으면 좋겠네요.

    저는 인프런에서 들은 강의중에 iOS개발 강의 이후로 가장 만족도가 높았어요.
    감사합니다.^^

  9. 박시중 박의 프로필 사진

    너무 기초

    4

    todo 앱 정도까지 갔으면 좋았을텐데..
    너무 기초와 개념이라 아쉽습니다. 그리고 개별 동영상이 너무 짧은 것 같네요. 쉴새없이 다음강의 클릭을 해야 한다는..쩝..

  10. 성기철의 프로필 사진

    당장 vue를 사용하고 싶어요!

    5

    vue와 개발 환경까지 많은 내용을 알기쉽게 설명해주셨습니다.
    바로 vue를 가지고 작업을 해보고 싶고, 다음 강의도 기대가 됩니다.

  11. Engineer yun의 프로필 사진

    뷰기초강의로는 좋은거같습니다.

    4

    생각 보다 너무 기초라서 조금은 아쉽지만 강의 테마 자체가 초보자를 위한거니까요

    다음 강의 기대해볼게요 감사합니다.

  12. June Kim의 프로필 사진

    웹 초보자라면 꼭 들어야할 강의

    5

    전체적으로 3시간이지만, 개념별로 짧게 짧게 영상이 나뉘어있어서 쉽게 골라들을 수 있어요.
    설명도 영상 + 자료로 알차고, 일단 강의력이 좋으셔서 바빠도 틈틈히 커리큘럼 따라가기 좋습니다.
    (한번에 몰아서 들어도 좋은거 같구요)
    개인적으로는 인프런 강의 중에 제일 만족도가 높네요. 🙂
    열심히 해서 프로젝트에 적용해보려구합니다! ㅎㅎ

  13. 김인숙의 프로필 사진

    제대로 이해되지 않았던 부분에 대한 정리를 할 수 있어요.

    4

    혼자 학습할 때 제대로 알지 못하고 대충 넘어갔던 내용을
    강사님이 차근차근 정리하듯이 알려주셔서 이해하기 쉽네요.

    저 역시 설명 후 퀴즈 풀이가 있어서 좋았습니다.
    강의 길이도 딱 집중하기 좋은 길이입니다.

  14. 박찬민의 프로필 사진

    Vue 입문자에게 강력 추천!

    5

    강좌의 소개에 나와 있듯이, 강사님께서 강의의 대상을 입문자라고 하셨는데, 정말 입문자에게 너무 좋습니다.
    저도 이번에 Vue를 새롭게 배워보려고 강의를 들었는데, 소개(이론)-실습-퀴즈-퀴즈풀이 로 이어지는 강의 방식이 입문자가 쉽게 따라하면서 익히기에 너무 좋습니다.
    퀴즈도 막연한 문제가 아니라, 준비된 코드에 어떤 작업들을 해야하는지 주석으로 다 달아주셔서 길 잃지 않고 잘 따라서 퀴즈를 풀 수 있었습니다.
    이 강의를 시작으로해서 Vue에 대해서 많이 알게 되었고, 더 심화된 Vue 내용을 잘 습득할 수 있을 것 같아요!
    강의를 준비해주신 강사님께 감사드립니다~

강좌 교육과정

Vue 소개
Vue 강의 소개 미리보기 00:01:00
Vue 강의 개요 (Overview) 미리보기 00:02:00
Vue 수업을 위한 개발환경 설정
Atom 프로그램 소개 및 설치 미리보기 00:03:00
Atom 플러그인 테마 설치 미리보기 00:05:00
Atom 플러그인 패키지 설치 미리보기 00:10:00
Node.js, Chrome, Vue.js 크롬 플러그인, Github 설치 미리보기 00:04:00
Vue 시작하기
Vue 는 무엇인가? 미리보기 00:05:00
[실습] Vue 시작하기 – Hello Vue.js 00:02:00
[부록] MVVM 패턴이란? 00:01:00
Vue 인스턴스
인스턴스 소개 미리보기 00:02:00
인스턴스 생성 미리보기 00:03:00
Vue 라이프싸이클 소개 미리보기 00:04:00
[실습] 라이프싸이클 훅 커스텀 로직 00:02:00
Vue 컴포넌트
컴포넌트 소개 00:02:00
[실습] 컴포넌트 등록 00:02:00
전역 & 지역 컴포넌트 등록 00:02:00
[실습] 전역 & 지역 컴포넌트 등록 00:03:00
[실습] 전역 & 지역 컴포넌트 차이점 00:03:00
[퀴즈] 지역 & 전역 컴포넌트 등록 퀴즈 안내 00:02:00
[퀴즈] 전역 & 지역 컴포넌트 등록 퀴즈 풀이 00:03:00
Vue 컴포넌트 통신
상-하위 컴포넌트 간 데이터 전달 방법 (Parent – Child 컴포넌트 통신) 00:01:00
Props 소개 00:01:00
Props 설명 00:05:00
[퀴즈] Props 퀴즈 설명 및 안내 00:01:00
[퀴즈] Props 퀴즈 풀이 00:05:00
Non Parent – Child 컴포넌트 간 통신 00:01:00
Event Bus 00:05:00
[퀴즈] Component – Props – For 퀴즈 안내 00:02:00
[퀴즈] Component – Props – For 퀴즈 풀이 00:09:00
Vue 라우터
소개 00:02:00
[실습] 기본 라우터 00:07:00
Nested 라우터 소개 00:02:00
[실습] Nested 라우터 설명 00:05:00
Template Root Element 주의사항 00:02:00
[퀴즈] Nested 라우터 퀴즈 안내 00:02:00
[퀴즈] Nested 라우터 퀴즈 풀이 00:04:00
Named Views 소개 00:03:00
Nested Router vs Nested Views 00:02:00
Vue 리소스
Vue Resource와 Axios 소개 00:03:00
Vue 템플릿
강의 중간 정리 00:02:00
소개 00:06:00
Attributes 00:01:00
Javascript Expressions 00:02:00
Directive 00:03:00
Filter 00:01:00
Vue 데이터 바인딩
소개 00:01:00
Interpolation 00:01:00
Binding Expressions 00:01:00
Directives 00:01:00
Class Binding 00:03:00
마무리 00:01:00
[퀴즈]Template 과 Data Binding 퀴즈 안내 00:03:00
[퀴즈]Template 과 Data Binding 퀴즈 풀이 00:09:00
Vue 싱글파일 컴포넌트 체계
소개 00:04:00
Vue 프로젝트 구성방법
Vue CLI 를 이용한 프로젝트 구성 방법 설명 00:02:00
[실습] Vue CLI 를 이용한 프로젝트 구성 팁 00:11:00
[실습] Vue CLI 와 싱글파일 컴포넌트를 이용한 컴포넌트 등록 00:06:00
[퀴즈] .vue 파일에서 컴포넌트 등록하기 퀴즈 풀이 00:08:00
[부록] Vue Loader
Vue Loader 소개 00:10:00
[안내] 정리 및 다음 강좌 안내
정리 및 다음 강좌 안내 00:13:00
  • 가격 옵션 +
  • 무제한
  • 강좌 수료증
  • 60개 강의, 총 3 시간 32 분

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

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

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