컴포넌트 재활용 방법 및 재활용할 포인트 소개

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

수강 기한 : 무제한

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

나가기

미수강

이전수업

다음수업

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

수강 기한 : 무제한

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

----- 오리엔테이션 -----

강의 소개

4분

제작할 앱 & API 소개 & Vue.js 스타일 가이드 소개

개발 환경 설정 및 비공개 리포지토리 주소 안내

1분

VSCode 플러그인 목록

6분

Vue.js 스타일 가이드 및 코딩 컨벤션 소개

1분

----- 애플리케이션 제작 파트 -----

소개 및 설계

제작할 사이트 및 API 소개

5분

애플리케이션 라우터 설계

2분

비공개 리포지토리 소개 및 뷰 CLI 설명

4분

Vue CLI 2.x vs Vue CLI 3.x

7분

프로젝트 셋업

Vue CLI로 프로젝트 생성 및 ESLint 로그 확인

5분

ESLint 도구 소개와 사용해야 하는 이유?

6분

Vue CLI 3.x에서 ESLint 설정 끄는 방법

3분

라우터 기본

라우터 설치 및 라우터 구현

13분

router-view를 이용한 라우팅 컴포넌트 표시

3분

redirect 속성과 router-link

9분

ToolBar의 라우터 링크 스타일링

6분

[실습 안내] ItemView와 UserView 라우터 구현

1분

라우터 폴더 작명 팁과 라우터 mode 안내

1분

API 구현

axios를 이용한 api 호출

11분

[실습 안내] axios의 api 함수 구조화 방법 및 실습 안내

12분

[실습] JobsView와 AskView 구현

13분

자바스크립트 this 4가지와 화살표 함수의 this

8분

자바스크립트 비동기 처리(1) - Callback

7분

자바스크립트 비동기 처리(2) - Promise

8분

스토어 구현

Vuex 설치 및 Vuex가 적용된 앱 구조 소개

2분

Vuex 모듈화 및 state 적용

6분

NewsView에 actions와 mutations 적용

13분

[실습 안내] JobsView와 AskView 실습 안내

1분

[실습] JobsView에 스토어 적용

6분

[실습] map 헬퍼 함수를 이용한 AskView 풀이

10분

스토어 속성 모듈화

4분

----- 중간 정리 -----

중간 정리 및 스타일링

13분

라우터 실전

동적 라우트 매칭 원리 및 적용

10분

라우터 params을 이용한 User 상세 페이지 구현

15분

[실습] 질문 상세 페이지 구현 실습 안내

4분

[실습] 질문 상세 페이지 실습 풀이 및 오류 디버깅

13분

질문 상세 페이지 스타일링 및 v-html 디렉티브 사용법 소개

15분

라우터 트랜지션

4분

리팩토링 1 - 리스트 아이템 컴포넌트 공통화

컴포넌트 공통화 리팩토링 소개

1분

[실습 안내] 뉴스 리스트 스타일링

14분

[실습] 질문, 구직 리스트 스타일링

6분

[실습 안내] 공통 컴포넌트 ListItem 제작 및 실습 안내

5분

[실습] 공통 컴포넌트 구현(1) - 페이지별 데이터 분기

8분

공통 컴포넌트 구현(2) - computed 속성

5분

공통 컴포넌트 구현(3) - template 속성과 v-if 디렉티브 활용 1

3분

공통 컴포넌트 구현(4) - template 속성과 v-if 디렉티브 활용 2

5분

리팩토링 2 - 사용자 프로필 컴포넌트 공통화

사용자 프로필 컴포넌트 소개 및 등록

4분

사용자 컴포넌트 데이터 흐름 처리 1

5분

사용자 컴포넌트 데이터 흐름 처리 2

1분

2가지 데이터 처리 흐름 비교

6분

slot을 이용한 사용자 프로필 컴포넌트 구현

11분

사용자 프로필 컴포넌트 스타일링 및 코드 정리

7분

리팩토링 3 - Mixin과 하이 오더 컴포넌트

컴포넌트 재활용 방법 및 재활용할 포인트 소개

2분

이벤트 버스를 이용한 스피너 컴포넌트 구현

11분

스피너 실행 및 종료 시점 알아보기

6분

하이 오더 컴포넌트(HOC) 소개 및 구현

8분

하이 오더 컴포넌트에서 사용할 ListView 컴포넌트 구현

9분

하이 오더 컴포넌트가 적용된 앱 구조 설명 및 흐름 정리

6분

Mixin의 개요와 활용처 그리고 HOC와의 차이점

4분

[실습 안내] Mixin 적용 후 HOC 구조와 비교

8분

[실습] Mixin 실습 및 컴포넌트 재활용 방법에 대한 리뷰

2분

리팩토링 4 - 데이터 호출과 UX

UX를 고려한 데이터 호출 시점

7분

라이프 사이클 훅을 이용한 데이터 호출 방법의 문제와 비동기 처리 코드 수정

9분

라우터 네비게이션을 이용한 데이터 호출 방법

10분

[실습] 라우터 네비게이션 가드 실습 안내

1분 미만

[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경

7분

UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내

3분

리팩토링 5 - async & await를 이용한 비동기 처리

자바스크립트 비동기 처리 패턴의 발전 과정

8분

async & await 문법 소개

3분

async & await 예제 소개

5분

async await 예제 실습

6분

async await 에러 처리 방법과 공통화 함수 작성 방법

3분

async 함수를 이용한 코드 리팩토링

3분

[실습 안내] async await 실습 안내

1분 미만

[실습] async await 실습 풀이

8분

----- 애플리케이션 실전 파트 -----

외부 라이브러리 모듈화 방법(차트)

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

5분

차트 라이브러리 설치 및 차트 그리기

9분

BarChart 컴포넌트화 작업

4분

[실습] LineChart 실습 안내

1분

[실습] LineChart 제작 및 차트 충돌 문제 해결

4분

Vue에서 DOM을 접근하는 방법인 ref 속성 소개

6분

Vue.js 플러그인 소개 및 차트 플러그인 제작

9분

결합력 높은 차트 컴포넌트 모듈 제작 방법

10분

컴포넌트 디자인 패턴

Component Design Patterns 소개

2분

Common Approach

6분

Component with Slots - Slot vs Props

6분

Component with Slots 구현 방법과 활용처

6분

Controlled Component - Input 박스를 다룰 때 생기는 문제점

5분

Controlled Component - 구현 방법과 활용처

5분

Renderless Component - 소개

4분

Renderless Component - Render Function

7분

Renderless Component - 구현 방법과 활용처

6분

서비스 배포 환경 구성

서비스 배포를 위한 명령어 소개 및 실습

2분

Netlify를 이용한 배포 실습

6분

base 디렉토리 설정 및 배포 완료

3분

SPA 호스팅시에 서버에 추가해줘야 하는 설정 안내

3분

env 환경 변수 파일을 이용한 옵션 변경 방법

5분

질답

멘토링

멘토링 신청
장기효(캡틴판교)