Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
수강 기한 : 무제한
진도율 : 0강/96강 (0%) | 시간 : 0분/623분
----- 오리엔테이션 -----
제작할 앱 & API 소개 & Vue.js 스타일 가이드 소개
개발 환경 설정 및 비공개 리포지토리 주소 안내
Vue.js 스타일 가이드 및 코딩 컨벤션 소개
----- 애플리케이션 제작 파트 -----
소개 및 설계
Vue CLI 2.x vs Vue CLI 3.x
프로젝트 셋업
Vue CLI로 프로젝트 생성 및 ESLint 로그 확인
ESLint 도구 소개와 사용해야 하는 이유?
Vue CLI 3.x에서 ESLint 설정 끄는 방법
라우터 기본
router-view를 이용한 라우팅 컴포넌트 표시
[실습 안내] ItemView와 UserView 라우터 구현
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 - 사용자 프로필 컴포넌트 공통화
사용자 프로필 컴포넌트 소개 및 등록
slot을 이용한 사용자 프로필 컴포넌트 구현
사용자 프로필 컴포넌트 스타일링 및 코드 정리
리팩토링 3 - Mixin과 하이 오더 컴포넌트
컴포넌트 재활용 방법 및 재활용할 포인트 소개
이벤트 버스를 이용한 스피너 컴포넌트 구현
스피너 실행 및 종료 시점 알아보기
하이 오더 컴포넌트(HOC) 소개 및 구현
하이 오더 컴포넌트에서 사용할 ListView 컴포넌트 구현
하이 오더 컴포넌트가 적용된 앱 구조 설명 및 흐름 정리
Mixin의 개요와 활용처 그리고 HOC와의 차이점
[실습 안내] Mixin 적용 후 HOC 구조와 비교
[실습] Mixin 실습 및 컴포넌트 재활용 방법에 대한 리뷰
리팩토링 4 - 데이터 호출과 UX
라이프 사이클 훅을 이용한 데이터 호출 방법의 문제와 비동기 처리 코드 수정
라우터 네비게이션을 이용한 데이터 호출 방법
[실습] 라우터 네비게이션 가드 실습 안내
[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경
UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내
리팩토링 5 - async & await를 이용한 비동기 처리
자바스크립트 비동기 처리 패턴의 발전 과정
async await 에러 처리 방법과 공통화 함수 작성 방법
[실습 안내] async await 실습 안내
[실습] async await 실습 풀이
----- 애플리케이션 실전 파트 -----
외부 라이브러리 모듈화 방법(차트)
라이브러리 모듈화의 이유와 배경
차트 라이브러리 설치 및 차트 그리기
BarChart 컴포넌트화 작업
[실습] LineChart 실습 안내
[실습] LineChart 제작 및 차트 충돌 문제 해결
Vue에서 DOM을 접근하는 방법인 ref 속성 소개
Vue.js 플러그인 소개 및 차트 플러그인 제작
컴포넌트 디자인 패턴
Component Design Patterns 소개
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 환경 변수 파일을 이용한 옵션 변경 방법