최신 프론트엔드 프레임워크 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.8
가격 옵션 +
114

6. 강사 소개

장기효 (캡틴판교)

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

[프로필]

강좌 평가

4.4

9 개의 수강평
  • 5 점5
  • 4 점3
  • 3 점1
  • 2 점0
  • 1 점0
  1. 정시원의 프로필 사진

    4

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

  2. 새우깡의 프로필 사진

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

    5

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

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

    • Captain Pangyo의 프로필 사진

      힘이 되는 수강평 감사합니다.

      5

      제가 수업을 통해 전달하고자 하는 의도를 가장 정확하게 파악하시고,
      언급해주셔서 감사합니다 🙂

      Vue 프레임워크 관점에서는 입문이라고 생각하지만, 웹 개발로 놓고 보면 초급이 되겠네요 🙂
      말씀해주신 것처럼 최대한 빠른 시간 안에 필요한 것만 빠르게 전달하여
      학습자에게 성취감을 주는 게 이 수업의 목표다 보니,
      정말 기초적인 HTML, CSS, JS는 언급하지 않았습니다 🙂

      저도 최근에 올라오는 댓글들을 보면서 자동 재생 기능이 없는데 짧게 하는 게 조금
      수강생분들을 번거롭게 해드리는 것 같아 죄송한 마음이 듭니다.

      하지만, 짧기 때문에 더 집중력 있게 개념을 학습하시고 실습하실 수 있고
      무엇보다 잘게 쪼개진 강의를 골라 들을 수 있는 장점이 크다고 생각합니다.

      앞으로도, 이런 강의 패턴을 당분간 유지할 생각입니다.
      기분 좋은 리뷰 진심으로 감사드립니다 🙂

      – 장기효 드림 –

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

    너무 기초

    3

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

  4. 성기철의 프로필 사진

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

    5

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

  5. Engineer yun의 프로필 사진

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

    4

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

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

  6. June Kim의 프로필 사진

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

    5

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

  7. 김인숙의 프로필 사진

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

    4

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

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

  8. 박찬민의 프로필 사진

    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