로그인

다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 여러분은 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 명령어에 익숙하면 훨씬 수월하게 실습에 참여할 수 있습니다.

다른 강좌 보기

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

지식공유자 소개

김정환

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

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

강좌 평가

5

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

    정말 큰 도움이 되었습니다.

    5

    2년차 자바개발자입니다.
    평소 프론트엔드 프레임워크에 큰 관심을 갖고 있었고..
    혼자서 react, angular, vue 등을 가볍게 접해보는 정도의 수준이었습니다. (정말 가볍게 hello world 찍는 수준)

    다양한 기술을 얕고넓게 접하다 vuejs에 대해 깊게 공부해 보고 싶다는 생각이 들었고.. 공식문서를 정독하며 가볍게 예제를 따라해보는 수준으로 학습하고 있었습니다.

    언어공부를 해 보신 분은 아시겠지만 레퍼런스 보면서 예제 만들어 보는 것과 프로젝트를 진행해 보는 것은 말로 할 수 없는 큰 차이를 갖고 있기에..
    독학으로 이것저것 시도해 보고 있었지만 실제로 실무에서는 어떤식으로 사용되는지, 개발의 흐름을 겪어보고 싶다는 욕구에 수강하게 되었습니다.

    김정환 강사님이 정말 열심히 만드신 강의라는게 느껴집니다.
    기본 준비 및 강의흐름에 있어 짜임새 있어서 좋았고, 어떠한 부분이 왜 필요한지, 이러한 문제상황을 어떻게 해결할 수 있는지에 대해
    차분하게 설명해 주셔서 수강하는데 큰 어려움은 없었습니다.

    개인적으로는 프론트엔드 프레임워크에 관심은 있으나 독학으로 공부하는데 어려움을 느끼시는 초급개발자님들에게 추천드리고 싶습니다.

강좌 교육과정

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

실시간 인기 강좌

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

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

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