트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
수강정보
(37개의 수강평)
809명의 수강생
스킬태그 #Front-End, #Javascript, #Vue.js

이 강의는

다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 여러분은 Vuejs의 중급 기술(Vuex, Vue-Router, Http)을 학습할 수 있을 것입니다.

트렐로 개발을 통한 Vuejs, Vuex, Vue-Router 실전 기술

이 강의에 오신 분은 Vuejs 기본 사용법을 이미 익히셨을 겁니다. 단순히 UI만 변경하는 것을 넘어, 온전한 웹 어플리케이션을 구현하기 위한 지식을 필요로하신 분들일테지요. 그렇다면 잘 오셨습니다! 우리는 트렐로라는 인기 어플리케이션의 핵심 기능을 따라 만들면서 심도있는 기술을 학습할 거니까요.

> >유명한 화가들이 수많은 습작으로 자신만의 명작을 만들어 내듯이 다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 여러분은 Vuejs의 중급 기술(Vuex, Vue-Router, Http)을 학습할 수 있을 것입니다.학습은 혼자하지만 실무에서는 기획자, 퍼블리셔, 백엔드 개발자 등과 함께 일하게 됩니다. 이 강의에서는 그러한 환경을 미리 구성(퍼블리싱 결과물, API 서버와 문서)했기 때문에 미리 협업하는 방법을 체험해 보실수 있습니다.

결과물 미리보기

무엇을 배우게 되나요?

  • Vuejs를 이해하고 기술을 실제 개발 프로젝트에서 활용하는 방법을 배웁니다
  • 싱글페이지 어플리케이션(SPA)의 핵심 기능인 라우팅을 이해하고 Vue-Router로 구현할 수 있습니다.
  • 전역 상태 관리가 필요한 이유를 깨닫고 Vuex를 활용할수 있습니다.
  • 실무에서 퍼블리셔, 백엔드 엔지니어와 협업하는 방법을 배웁니다

배우는 것들

다루는 기술

  • Vuejs
  • Vue-Router
  • Vuex
  • Axios
  • Dragula
뿐만 아니라 서비스에서 공통으로 사용하는 인증과 라우팅 로직에 대한 지식도 얻을 수 있습니다.

참고 사항

  • 반드시 Vuejs 라이브러리 기본 사용법을 알고 있어야 합니다.
  • ES6, HTML, CSS 기본 지식을 알고 있으면 좋습니다.
  • 기초적인 Git 명령어에 익숙하면 훨씬 수월하게 실습에 참여할 수 있습니다.
  • 1분 강좌소개 영상 보러가기

다른 강좌 보기

견고한 JS 소프트웨어 만들기
테스트 주도 개발, 자바스크립트 디자인 패턴 배우기
실습 UI 개발로 배워보는 순수 javascript와 VueJS 개발
Vue.JS 기초, MVC/MVVM 아키텍처, 컴포넌트 개발
테스트주도개발(TDD)로 만드는 NodeJS API 서버
NodeJS 기초, ExpressJS 기초, Rest API 서버 개발
AngularJS 기본 개념과 To-Do 앱 만들기 실습 - 앵귤러 강좌
AngularJS 의 기본 문법, 개발 환경 구성 등...

지식공유자 소개

김정환
웹 어플리케이션을 만드는 자바스크립트 개발자입니다. 기술을 학습하고 공유하는 것을 좋아합니다. 김정환 블로그를 운영하며 글을 쓰거나 온라인 교육자료를 제작하면서 공부하며 성장하고 있습니다.  인프런에서는 이번이 다섯 번째 강좌입니다.

궁금하신 내용은 아래 이메일이나 SNS로 문의 주세요. 매일 1~2회 확인하기때문에 24시간 안에 답변을 확인하실 수 있어요.

교육과정

모두 펼치기 55 강의 7시간 29분
섹션 0. 1. 시작하기
4 강의 17 : 00
강의 소개
03 : 00
요구사항 분석 01
05 : 00
요구사항 분석 02
06 : 00
코드 스캐폴딩
03 : 00
섹션 1. 2. 라우팅
9 강의 60 : 00
라우터의 필요성
04 : 00
라우터 직접 만들기
07 : 00
Vue-router
09 : 00
라우터 인스턴스
03 : 00
라우터 뷰
06 : 00
라우터 링크
06 : 00
동적 라우트 매칭
07 : 00
중첩 라우트
08 : 00
데이터 불러오기
10 : 00
섹션 2. 3. API 통신
5 강의 32 : 00
백엔드 API 살펴보기
04 : 00
Ajax - HttpXMLRequst 객체
07 : 00
Axios
07 : 00
보드 조회 API 연동
06 : 00
Axios 실전에서 사용하기
08 : 00
섹션 3. 4. 인증
4 강의 31 : 00
인증 API
04 : 00
네비게이션 가드
06 : 00
로그인
15 : 00
로그아웃
06 : 00
섹션 4. 5. 홈 화면
2 강의 25 : 00
보드 목록 조회 화면
07 : 00
보드 추가하기
18 : 00
섹션 5. 6. 상태 관리
8 강의 65 : 00
Vuex
09 : 00
상태 (State)
09 : 00
변이 (Mutation)
08 : 00
액션 (Action)
09 : 00
Vuex 적용 - 보드 목록 조회
09 : 00
Vuex 적용 - 인증 1
09 : 00
Vuex 적용 - 인증 2
06 : 00
스토어 개선
06 : 00
섹션 6. 7. 기본 플로우 구현
14 강의 143 : 00
보드 조회 화면 개발 1
14 : 00
보드 조회 화면 개발 2
09 : 00
카드 생성 1 - 마크업
14 : 00
카드 생성 2 - API 연동
10 : 00
카드 상세 조회 1 - 라우팅
05 : 00
카드 상세 조회 2 - API 연동
08 : 00
카드 수정 - API 연동
13 : 00
카드 이동 1 - 로직분석
07 : 00
카드 이동 2 - 구현
20 : 00
카드 이동 3 - 리팩토링
12 : 00
카드 삭제
05 : 00
색상 입히기
12 : 00
보드 세팅
08 : 00
보드 삭제
06 : 00
섹션 7. 8. 추가 요구사항 구현
9 강의 76 : 00
나머지 요구사항 정리
03 : 00
보드수정 - 색상 변경
13 : 00
보드수정 - 타이틀 변경
10 : 00
리스트 생성
17 : 00
리스트 수정 - 타이틀 변경
10 : 00
리스트 이동
12 : 00
리스트 삭제
04 : 00
정리
07 : 00
학습완료

공개 일자

2018년 10월 16일 (마지막 업데이트 일자 : 2018년 12월 5일)

수강 후기

4.8
37개의 수강평
default_profile.png
구자룡 4달 전
뷰에 대한 이해도를 높일 수 있는 좋은 강의 였습니다. 다만 아예 초심자라면 듣기 힘들 거구요. js와 뷰에 대해서 어느 정도 알고 들어야 더 도움이 될거라고 생각합니다.
김정환

김정환 4달 전
수고하셨습니다.

default_profile.png
dlaqmffllove 3달 전
김정환님 강의는 언제나 좋습니다. 짜임새있는 구성, git branch 제공, 분석, 구현, 리팩토링 까지 더할나위 없는 강의였습니다. 저는 백엔드를 주로 개발하다가 이번에 프론트엔드를 공부하고자 기본서를 좀보았습니다. 개념은 알겠는데 어떤식으로 구현하는지 감이좀 잡히지 않았습니다. 그러다가 김정환님 첫번째 vue 강의를 듣고 너무 좋아서 나머지 강의다 결제했네요. 이제 모든강의를 다듣고 최근에 올리신 프론트엔드 개발환경에 대해 들으러 갑니다. 수고하셨습니다 ^^
김정환

김정환 3달 전
이렇게나 좋은 리뷰를 써주시나니... 고맙습니다. 앞으로 더 도움이 될만한 내용으로 준비해 보겠습니다.

default_profile.png
서유진 2019.05.12
업무분석 후 시작, 브랜치 제공, 코드 리팩토링, 편집없는 버그수정, 등등 모든 것이 만족스러운 강의였습니다. 2번 3번 듣고 내것으로 만들면 vue를 다루는데 큰 어려움이 없을 것 같습니다. 추천합니다~
김정환

김정환 4달 전
실제 업무하는 방법과 비슷하게 진행해 봤습니다. 아무래도 vue 중급강의이다 보니 이런게 필요할거 같았는데 만족하셨다니 좋습니다. 여러번 반복해서 완전히 익히시기 바랍니다.

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스