🙊 수강권한이 없어요! 🙈

이 수업은 수강신청 이후에 학습할 수 있습니다.
이 배움으로 더욱 많은 것을 이뤄보세요!!

77,000원

라우터 설치 및 라우터 구현

강의명 : 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분

질문 게시판

올라온 질문이 없습니다!
수업 내용에 궁금한 점이있다면
질문을 작성해주세요!

Vetur scaffold

Vetur v0.31.3 그냥 vue 말고 <vue>를 작성하면 scaffold가 작동하네요 < 만 작성하고 Tab 눌러도 됩니다. https://github.com/vuejs/vetur/issues/1325#issuecomment-538317767

은진 1 1

Vue3는 아직 시기상조인가요?

'Vue create vue-news' 프로젝트 생성할 때 vue-cli 버전이 높아 Default (Vue 3 Preview)가 있어 해당 설정으로 생성하니 main.js에서부터 달라 강의 영상의 코드를 적용할 수 없게 되더라구요 아직 Vue3로 프로젝트 하기에는 시기상조인가요?

ooma 2 1

router 폴더 질문입니다.

예를들어서 회원관련, 마이페이지 관련 등등으로 router 폴더 아래에 폴더 또는 js 파일을 추가하고 싶은데요, 구글검색에 어떤 키워드로 검색해야할지 알려주실 수 있나요? +)router 분기처리 내용으로 구글 검색 해보니, express로 예제들이 보이는데 그 외에도 방법이 있을까요? ++)router > index.js에서 const 변수로 분류하려 하는데, export default에서는 하나의 변수만 가능한것 같습니다.. (예) const indexRouter ={()}; ... export default indexRouter +++) router 폴더에 관련 js들을 만들고, index.js에 import해서 routes: concat으로 import한 js들 선언한것을 넣어줬더니 동작을 하긴합니다.. 결과는 나오긴 했는데.. 좀 더 나은 방법을 알고싶습니다

우왕 1 2

import { router } from './router/index.js';

강사님 안녕하세요. 강의 잘 보고 있습니다. import { router } from './router/index.js'; 와 import router from './router/index.js'; 의 차이는 무엇인가요?? 아래로 썼다가 라우터가 동작을 안해서 한참 찾아보니 저런 오타가 있었네요...

박진영 2 1

scaffold 적으면 아무것도 안 나옵니다??

vetur 세로운 버전에서 scaffold 대신 vue를 적으면 됩니다.

jisu103 3 1

위의 강의 링크 클릭시..

강의로의 접근이 허용되지 않는답니다..?

박시중 박 0 0

질답

멘토링

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

🙊 수강권한이 없어요! 🙈

이 수업은 수강신청 이후에 학습할 수 있습니다.이 배움으로 더욱 많은 것을 이뤄보세요!!

이 수업은 수강신청 이후에 학습할 수 있습니다.
이 배움으로 더욱 많은 것을 이뤄보세요!!