Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

기간: 무제한

진도율 : 0강/96강 (0%) | 시간 : 0분/620분 0%

----- 오리엔테이션 -----
강의 소개
제작할 앱 & API 소개 & Vue.js 스타일 가이드 소개
개발 환경 설정 및 비공개 리포지토리 주소 안내
VSCode 플러그인 목록
Vue.js 스타일 가이드 및 코딩 컨벤션 소개
----- 애플리케이션 제작 파트 -----
소개 및 설계
제작할 사이트 및 API 소개
애플리케이션 라우터 설계
비공개 리포지토리 소개 및 뷰 CLI 설명
Vue CLI 2.x vs Vue CLI 3.x
프로젝트 셋업
Vue CLI로 프로젝트 생성 및 ESLint 로그 확인
ESLint 도구 소개와 사용해야 하는 이유?
Vue CLI 3.x에서 ESLint 설정 끄는 방법
라우터 기본
라우터 설치 및 라우터 구현
router-view를 이용한 라우팅 컴포넌트 표시
redirect 속성과 router-link
ToolBar의 라우터 링크 스타일링
[실습 안내] ItemView와 UserView 라우터 구현
라우터 폴더 작명 팁과 라우터 mode 안내
API 구현
axios를 이용한 api 호출
[실습 안내] axios의 api 함수 구조화 방법 및 실습 안내
[실습] JobsView와 AskView 구현
자바스크립트 this 4가지와 화살표 함수의 this
자바스크립트 비동기 처리(1) - Callback
자바스크립트 비동기 처리(2) - Promise
스토어 구현
Vuex 설치 및 Vuex가 적용된 앱 구조 소개
Vuex 모듈화 및 state 적용
NewsView에 actions와 mutations 적용
[실습 안내] JobsView와 AskView 실습 안내
[실습] JobsView에 스토어 적용
[실습] map 헬퍼 함수를 이용한 AskView 풀이
스토어 속성 모듈화
----- 중간 정리 -----
중간 정리 및 스타일링
라우터 실전
동적 라우트 매칭 원리 및 적용
라우터 params을 이용한 User 상세 페이지 구현
[실습] 질문 상세 페이지 구현 실습 안내
[실습] 질문 상세 페이지 실습 풀이 및 오류 디버깅
질문 상세 페이지 스타일링 및 v-html 디렉티브 사용법 소개
라우터 트랜지션
리팩토링 1 - 리스트 아이템 컴포넌트 공통화
컴포넌트 공통화 리팩토링 소개
[실습 안내] 뉴스 리스트 스타일링
[실습] 질문, 구직 리스트 스타일링
[실습 안내] 공통 컴포넌트 ListItem 제작 및 실습 안내
[실습] 공통 컴포넌트 구현(1) - 페이지별 데이터 분기
공통 컴포넌트 구현(2) - computed 속성
공통 컴포넌트 구현(3) - template 속성과 v-if 디렉티브 활용 1
공통 컴포넌트 구현(4) - template 속성과 v-if 디렉티브 활용 2
리팩토링 2 - 사용자 프로필 컴포넌트 공통화
사용자 프로필 컴포넌트 소개 및 등록
사용자 컴포넌트 데이터 흐름 처리 1
사용자 컴포넌트 데이터 흐름 처리 2
2가지 데이터 처리 흐름 비교
slot을 이용한 사용자 프로필 컴포넌트 구현
사용자 프로필 컴포넌트 스타일링 및 코드 정리
리팩토링 3 - Mixin과 하이 오더 컴포넌트
컴포넌트 재활용 방법 및 재활용할 포인트 소개
이벤트 버스를 이용한 스피너 컴포넌트 구현
스피너 실행 및 종료 시점 알아보기
하이 오더 컴포넌트(HOC) 소개 및 구현
하이 오더 컴포넌트에서 사용할 ListView 컴포넌트 구현
하이 오더 컴포넌트가 적용된 앱 구조 설명 및 흐름 정리
Mixin의 개요와 활용처 그리고 HOC와의 차이점
[실습 안내] Mixin 적용 후 HOC 구조와 비교
[실습] Mixin 실습 및 컴포넌트 재활용 방법에 대한 리뷰
리팩토링 4 - 데이터 호출과 UX
UX를 고려한 데이터 호출 시점
라이프 사이클 훅을 이용한 데이터 호출 방법의 문제와 비동기 처리 코드 수정
라우터 네비게이션을 이용한 데이터 호출 방법
[실습] 라우터 네비게이션 가드 실습 안내
[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경
UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내
리팩토링 5 - async & await를 이용한 비동기 처리
자바스크립트 비동기 처리 패턴의 발전 과정
async & await 문법 소개
async & await 예제 소개
async await 예제 실습
async await 에러 처리 방법과 공통화 함수 작성 방법
async 함수를 이용한 코드 리팩토링
[실습 안내] async await 실습 안내
[실습] async await 실습 풀이
----- 애플리케이션 실전 파트 -----
외부 라이브러리 모듈화 방법(차트)
라이브러리 모듈화의 이유와 배경
차트 라이브러리 설치 및 차트 그리기
BarChart 컴포넌트화 작업
[실습] LineChart 실습 안내
[실습] LineChart 제작 및 차트 충돌 문제 해결
Vue에서 DOM을 접근하는 방법인 ref 속성 소개
Vue.js 플러그인 소개 및 차트 플러그인 제작
결합력 높은 차트 컴포넌트 모듈 제작 방법
컴포넌트 디자인 패턴
Component Design Patterns 소개
Common Approach
Component with Slots - Slot vs Props
Component with Slots 구현 방법과 활용처
Controlled Component - Input 박스를 다룰 때 생기는 문제점
Controlled Component - 구현 방법과 활용처
Renderless Component - 소개
Renderless Component - Render Function
Renderless Component - 구현 방법과 활용처
서비스 배포 환경 구성
서비스 배포를 위한 명령어 소개 및 실습
Netlify를 이용한 배포 실습
base 디렉토리 설정 및 배포 완료
SPA 호스팅시에 서버에 추가해줘야 하는 설정 안내
env 환경 변수 파일을 이용한 옵션 변경 방법

라이브러리 모듈화의 이유와 배경

- Chart.js 공식 문서

- State of JS 2018 사이트