Vue.js 중급 강좌 – ‘누구나’, ‘쉽게’, ‘훌륭한’ 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.

1. Vue.js 중급 강좌 소개

Vue.js의 기초를 다진 입문자들이 중, 고급 레벨의 뷰 개발자로 성장하는데 도움을 주는 강좌입니다. 누구나 다루기 쉬운 Vue.js 기초 강좌Do it! Vue.js 입문 서적을 읽으신 분들이 이어서 듣기에 가장 좋습니다. 이제 막 Vue.js가 재밌어지기 시작하신 분들, 웹 개발에 흥미가 생기신 분들께 강력 추천합니다 🙂

컴포넌트, 인스턴스, 싱글파일 컴포넌트는 뭔지 알겠는데 실제로 앱을 만들려니 답답하신 분들이 차근히 애플리케이션을 만들어나갈 수 있게 도와드립니다. ES6가 뭔지 모르겠는데 업무에서 ES6로 된 뷰 코드를 보셔야 하는 분들께 쉽고 빠르게 ES6를 배우는 방법을 알려드립니다. 마지막으로, 애플리케이션이 좀 커져서 컴포넌트를 효율적으로 관리하고 싶은 분들께 Vuex를 쉽고 간단하게 배우는 방법을 소개합니다.

전체적인 강의 방식은 코드 중심의 학습형 강좌 형태로 구성되어 있습니다. 뷰 기초 개념으로 Todo 앱을 제작하며 컴포넌트 기반 설계 방법과 구조화 방법을 익힌 후, ES6의 개념을 학습하여 애플리케이션 코드에 적용함으로써 애플리케이션 코드를 개선해나갑니다. Vuex의 주요 기술 요소들을 학습하고 Todo 앱을 다시 리팩토링하면서 배운 내용들을 직접 코드에 적용해보는 실전형 강의입니다.

이 강좌는 다음과 같이 크게 3가지 파트로 나뉩니다.

  • Vue.js로 구현하는 Todo App
  • 깔끔한 Vue.js 코드를 위한 ES6
  • 복잡한 애플리케이션을 구현하기 위한 Vuex

“Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 개발하도록 도와주는데에 있다.”

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

Vue.js 기초 지식이 있고, 프론트엔드 개발에 관심있는 모든 분께 적합합니다.

  • Vue.js 학습 시간을 아껴 바로 실무에 쓰고 싶은 개발자
  • 프론트엔드 개발에 입문하신 분
  • 프론트엔드 개발을 해보고 싶은 디자이너
  • 프론트엔드 개발자로 전향하고픈 퍼블리셔
  • 프론트엔드 개발자로 취업을 희망하는 대학생

※ 다만 HTML, CSS, JS 및 Vue.js의 기초를 알고 계셔야 효율적으로 학습 하실 수 있습니다.

3. 어떤 걸 배우나요?

Vue.js 중급 강좌 로 실제 서비스를 개발할 때 필요한 컴포넌트 기반 프로젝트 구조화 방법컴포넌트 설계 방법을 배우고, Vue.js 코드를 간편하게 짤 수 있는 ES6의 주요 특징들에 대해서 살펴봅니다. 실무에서 필연적으로 사용하게 되는 상태 관리 라이브러리 Vuex 역시 심도 있게 학습합니다.

  • 뷰 최신 CLI 도구 특징
  • 컴포넌트 기반 웹 앱 설계 방법
  • 컴포넌트 설계 방법
  • ES6 (const & let, 화살표 함수, 향상된 객체 리터럴, 모듈 등)
  • Vuex (state, getters, mutations, actions, modules 등)

vue 강좌vue 강좌

4. 강좌 특징

인프런 기초 강좌입문 서적으로 Vue.js 기초 개념을 익힌 분들이 자연스럽게 이어 들을 수 있도록 준비한 강좌입니다. 본 vue.js 강좌 전반부는 별도의 이론 설명 없이 바로 애플리케이션을 설계하고 구현하면서 Vue.js 화면 개발의 감을 잡게 됩니다. 이후에는 제작한 애플리케이션의 문제점을 살펴보며 코드 리팩토링을 통해 애플리케이션 구조를 개선합니다. 강의의 중반부부터 나오는 ES6와 Vuex는 실무에서 많이 활용되는 기술로 입문서에서 깊게 다루지 않았던 내용들입니다. ES6와 Vuex의 개념을 쉽고 빠르게 파악하실 수 있도록 이론 설명 -> 준비된 예제로 실습 -> 애플리케이션에 적용 하며 리팩토링 형태로 강의를 진행합니다.

※ ES6와 Vuex가 쉽지 않은 주제인 만큼 더 공을 들여 최대한 쉽게 설명하려고 노력하였습니다 🙂

5. 같이 공부하면 좋은 지식

웹팩 강좌

쉽게 배우는 Webpack

4.6
가격 옵션 +
245
vuejs

 

 

6. 지식공유자 소개

장기효 (캡틴판교)

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

[프로필]

강좌 평가

5

4 개의 수강평
  • 5 점4
  • 4 점0
  • 3 점0
  • 2 점0
  • 1 점0
  1. 강희성의 프로필 사진

    시간 가는 줄 모르겠습니다.

    5

    Vuejs 입문 책으로 한번 해보고 다시 강의를 들어서 그런지 확실히 이해가 잘 되는군요.

    매일 강의듣고 나면 남은 강의가 점점 줄어드는게 아까울 정도입니다.

    특히 처음 접하는 사람들도 쉽게 접근할수 있게 설명해 주시는게 귀에 쏙쏙 들어옵니다.

    개인적으로 다음 강의는 실제 DB와의 연동부분, PWA 애플리케이션 제작 하는 부분이 있었으면 하는 바램이 있습니다.

    • Captain Pangyo의 프로필 사진

      시간 가는 줄 모르게 들어주셔서 감사합니다 :)

      5

      안녕하세요 희성님,

      “남은 강의가 줄어드는 게 아깝게 느껴진다”라고 말씀해주시니까 더 뿌듯하네요 🙂
      강의에서 목표했던 바가 ‘더 많은 분들이 쉽게 ES6, Vuex 등의 내용을 학습하여 Vue.js 개발에 흥미를 느끼도록 돕는 것’이었기 때문에 저로서는 희성님의 수강 평이 더할 나위 없이 기쁩니다 🙂

      그리고, 희성님께서 말씀해주신 2가지 주제도 이미 염두에 두고 강의를 계획하고 있습니다.
      ‘PWA 애플리케이션’, ‘Vue 고급’ 강좌들도 준비되는 대로 바로 공지드리겠습니다.

      기운 나는 수강평 다시 한번 감사드립니다.
      장기효 드림

  2. hyojun Cho의 프로필 사진

    최고입니다.!!

    5

    초급강좌부터 중급강좌까지 모두 들었습니다.
    저같은 돌머리도 이해 하기 쉽게, 좋은예제로 설명해주셔서 감사합니다.

    • Captain Pangyo의 프로필 사진

      호평해주셔서 감사합니다 효준님

      5

      메일로도 칭찬해주시고 이렇게 수강평까지 남겨주셔서 정말 감사드립니다 🙂
      각 개념들을 가장 쉽게 설명할 수 있는 예제로 준비하자라는 고민을 많이 했었는데 이렇게 좋은 수강평 남겨주시니까 더 기쁘네요. 앞으로도 좋은 강의로 찾아뵐 수 있도록 노력하겠습니다.

      다시 한번 감사드립니다.
      장기효 드림

강좌 교육과정

강의 오리엔테이션
강의 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:00
개발 환경 설정 및 깃헙 리포지토리 클론학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
Todo App - 프로젝트 소개 및 구성
뷰 CLI로 프로젝트 생성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
프로젝트 소개 및 컴포넌트 설계 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
Todo App - 프로젝트 구현
컴포넌트 생성 및 등록하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:12:00
파비콘, 아이콘, 폰트, 반응형 태그 설정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
TodoHeader 컴포넌트 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
TodoInput 컴포넌트의 할 일 저장 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
TodoInput 컴포넌트 코드 정리 및 UI 스타일링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
TodoList 컴포넌트의 할 일 목록 표시 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
TodoList 컴포넌트 UI 스타일링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
TodoList 컴포넌트 할 일 삭제 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
TodoList 컴포넌트의 할 일 완료 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
TodoFooter 컴포넌트 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
깃헙 브랜치 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Todo App - 애플리케이션 구조 개선하기
현재 앱 구조의 문제점 진단 및 개선된 앱 구조 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:00
[리팩토링] 할 일 목록 표시 기능학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
[리팩토링] 할 일 추가 기능학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
[리팩토링] 할 일 삭제 기능학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
[리팩토링] 할 일 완료 기능학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
[리팩토링] 할 일 모두 삭제 기능학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
리팩토링이 완료된 애플리케이션 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
Todo App - 사용자 경험 개선
모달 컴포넌트 등록학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
[퀴즈] 모달 컴포넌트의 slot 소개 및 퀴즈 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
[퀴즈] slot 퀴즈 풀이 및 모달 컴포넌트 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
트렌지션 소개 및 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
강의 중간 정리
강의 중간 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
ES6 for Vue.js - 오리엔테이션
ES6 강의 개요 및 목표 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
ES6 배경과 Babel 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
ES6 for Vue.js - const & let
const & let 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
[ES5의 주요 특징]변수 스코프와 호이스팅학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
const와 let 추가 설명 및 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
[리팩토링] const와 let학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
ES6 for Vue.js - 화살표 함수
화살표 함수 소개 및 설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
화살표 함수 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
ES6 for Vue.js - Enhanced Object Literals
속성 메서드의 축약 특징 설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
[리팩토링] 속성 메서드의 축약 특징 리팩토링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
속성명의 축약 특징 설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
[리팩토링] 속성명의 축약 특징 리팩토링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:01:00
ES6 for Vue.js - Modules
Modules학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
Vuex - 소개
Vuex 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
Flux와 MVC 패턴 소개 및 Flux 등장 배경학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
Vuex가 필요한 이유, Vuex 컨셉, Vuex 구조학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
Vuex- 주요 기술 요소
Vuex 설치 및 등록학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
state와 getters 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
[리팩토링] state 속성 적용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
mutations와 commit() 형식 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
[리팩토링&퀴즈] mutations 적용 및 퀴즈 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
[리팩토링&퀴즈] mutations 퀴즈 풀이 및 할 일 지우기 기능 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
[리팩토링] mutations로 할 일 추가, 완료, 모두 삭제 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
왜 mutations로 상태를 변경해야 하는가?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
actions 소개 및 예제학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
왜 actions에 비동기 로직을 선언해야 하는가?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Vuex - 헬퍼 함수
헬퍼 함수 및 ES6 Spread 연산자 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
mapState, mapGetters 소개 및 ES6 Spread 연산자 쓰는 이유학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
[리팩토링] getters와 mapGetters 적용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
mapMutations, mapActions 소개 및 헬퍼의 유연한 문법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
[리팩토링 & 퀴즈] mapMutations 적용 및 퀴즈학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
[리팩토링 & 퀴즈] mapMutations 퀴즈 풀이학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
헬퍼 함수가 주는 간편함학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
뷰엑스로 리팩토링한 애플리케이션 구조 분석 및 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
Vuex - 프로젝트 구조화 및 모듈화
스토어 속성 모듈화 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
스토어 모듈화 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00

우리는 성장기회의 평등 을 추구합니다.

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

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