Vue Mastery Tutorials - Intro
https://www.vuemastery.com/ 사이트의 동영상 강좌들을 리뷰해 본다. 말이 좀 빨라서 알아먹기 어렵지만 화면 보고 따라하기만 해도 도움이 된다. 하루, 날 잡아서 파고들면 Vue, 제대로 맛 볼수 있다.
::: danger 소스 보기 권한 권한이 없으면 소스보기시 404 Error 발생할 수 있습니다. :::
Lesson 1 The Vue Instance#
리뷰 영상#
준비#
- 전체 코스를 이해하기 위해 HTML, CSS, JavaScript에 대한 기본 지식이 있어야 한다.
이 코스에서 공부할 내용#
- 간단한 쇼핑몰 사이트를 구현하게 된다.
- 쇼핑몰은 양말을 판매하는 상품페이지가 추가되고
- 양말의 색을 표시하는 상자위에 마우스가 올라가면 해당색깔의 양말 이미지로 변경하는 기능
- 상품의 상세 정보를 표시하는 기능
- 재고여부를 표시하는 기능
- 카트에 제품을 추가하는 기능
- 판매카운트를 표시하는 기능
- 제품 구매 사용자가 리뷰를 작성하는 기능
- Vue DevTools 를 설치하고 사용하는 방법을 배운다.
이번 수업에서 공부할 내용#
- Vue Instance를 생성해 본다.
- JavaScript 코드의 데이터를 HTML에 보여준다.
- Vue Instance와 HTML Element를 연결하는 방법을 이해 한다.
- Vue Instance에 데이터를 입력하는 방법을 이해 한다.
- HTML에 두개의 중괄호를 사용해서 데이터를 표현 하는 방법을 이해 한다.
- 반응형 동작을 이해 한다.
Source#
Lesson 2 Attribute Binding#
리뷰 영상#
지난 수업에서 공부한 내용#
- Vue Instance를 생성해 본다.
- JavaScript 코드의 데이터를 HTML에 보여준다.
- Vue Instance와 HTML Element를 연결하는 방법을 이해 한다.
- Vue Instance에 데이터를 입력하는 방법을 이해 한다.
- HTML에 두개의 중괄호를 사용해서 데이터를 표현 하는 방법을 이해 한다.
- 반응형 동작을 이해 한다.
이번 수업에서 공부할 내용#
- 스타일시트를 이용해 레이아웃 설정하기
- attribute-binding(애트리뷰트 바인딩)을 이용해 이미지를 화면에 표시하기
v-bind:또는 약자로:지시자를 사용한 attribute-binding(애트리뷰트 바인딩) 이해하기
Source#
Lesson 3 Conditional Rendering#
리뷰 영상#
이번 수업에서 공부할 내용#
- 제품의 재고(inStock)가 있는지 없는지를 데이터에서 가져와서 화면에 "In Stock" 이라는 문자로 표시하기
- 재고가 없으면 "Out of Stock"으로 표시하기
- 재고량(inventory)에 따라 각각 10개 이상이면 "재고 있음", 10개 미만이면 "마감 임박!!", 0이면 "재고 없음"으로 화면에 표시하기
v-if,v-if-else,v-else,v-show지시자 이해하기
Source#
Lesson 4 List Rendering#
리뷰 영상#
구현할 내용#
- 아래 제품의 상세 정보를
나열하여 표시 한다.- 80% cotton
- 20% polyester
- Gender-neutral
이번 수업에서 공부할 내용#
- 열거형 지시자인
v-for를 사용하면 배열의 데이터를 반복적으로 표시할 수 있다. - 반복할 배열의 단일 항목에 대해 별칭(alias)를 적어주고 뒤에 배열의 이름을 적어준다.
- 이 방법으로 점 표기법(dot notation)을 이용해 배열에 들어 있는 객체의 속성을 표시할 수도 있다.
- 각각의 렌더링된 요소에 고유한 키(key)를 제공하는게 좋다.
Source#
Lesson 5 Event Handling#
리뷰 영상#
구현할 내용#
- 버튼을 누르면 장바구니에 제품이 추가된것 처럼 카운트가 증가하도록 한다.
이번 수업에서 공부할 내용#
v-on지시자를 사용해 엘리멘트가 이벤트를 수신하도록 한다.v-on지시자의 단축은@로 표시click,mouseover등 DOM의 다른 이벤트 수신하도록 할 수 있다.v-on지시자는 메서드를 호출할 수도 있다.- 메서드를 호출할때 인자를 넘겨줄 수도 있다.
- methods 내에서
this는 Vue 인스턴스이므로 다른 데이터의 값을 참조할 수 있다.
Source#
Lesson 6 Class & Style Binding#
리뷰 영상#
구현목표#
- 제품의 variantColor 값을 이용해서 div 태그의
background-color스타일을 변경하도록 구현한다. variantColor는 "green", "blue"이므로 그 값이background-color스타일에 바인딩 되도록 처리한다. - inStock이 true이면 "Add to Cart" 버튼을 활성화 하고 false이면 비활성화 되도록 한다.
이번 수업에서 공부할 내용#
- 데이터를
style속성에 바인딩할 수 있다. - 데이터를
class속성에 바인딩할 수 있다. - 엘레멘트의
class속성에 표현식을 사용해서class의 값을 조건부로 표현할 수 있다.
Source#
Lesson 7 Computed Properties#
리뷰 영상#
구현목표#
- 제품명 표시 부분에
brand와product를 합쳐서 표현 한다. - 제품별 별도의 재고량 데이터를 이용해 In Stock 여부를 계산 하도록 한다.
이번 수업에서 공부할 내용#
- Computed Properties 를 이해하기
- 데이터에서
image를 computed property로 변경하기 - 데이터에서
inStock을 computed property로 구현하기
더 알아야할 내용#
- Computed properties 는 캐시된다. 즉, 함수 내부에서 사용한 값이 변경되지 않으면 다시 호출되지 않고 캐시에서 값을 가져다 사용한다.
- 그렇기 때문에 함수를 만들어 호출하는 것 보다 효율적이다.
- 또 중요한 내용은 computed property 내부에서 인스턴스의 데이터 모델을 수정하면 안된다는 사실이다. (하면 어떻게 될까? 잘못하면 무한 루프에 빠질수도 있겠지?)
Source#
Lesson 8 Components#
리뷰 영상#
구현목표#
- 지금까지 구현한 모든 것을 하나의 컴포넌트로 만든다.
- 데이터에
premium을 추가하고 값이 true이면 배송비 무료(shipping feee)를 표시한다.
이번 수업에서 공부할 내용#
- Component에 대해 이해 하고 새로운 컴포넌트를 만들 수 있다.
- Vue 인스턴스와 컴포넌트간 데이터를 공유하는 방법을 배웁니다.
template를 이해하고 사용할 수 있다.- 컴포넌트의
props를 이해하고 사용할 수 있다. - 컴포넌트의
data()를 이해하고 사용할 수 있다.
Source#
Lesson 9 Communicating Events#
리뷰 영상#
구현목표#
Cart부분을 글로벌 영역으로 분리한다.
이번 수업에서 공부할 내용#
- 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 방법을 배운다.
$emit를 통해 하위 컴포넌트가 부모에게 이벤트 발생 사실을 통보하여 부모의 method를 실행 하도록 한다.
Source#
Lesson 10 Forms#
리뷰 영상#
구현목표#
- 제품별로 사용자 리뷰를 입력받아서 표시한다.
이번 수업에서 공부할 내용#
v-model지시자를 이용해서 양방향 데이터 바인딩(two-way bingind)을 구현한다.number변경자를 통해 값을 타입변환 할 수 있다.- 이벤트의
.prevent를 이용해 "submit"의 기본동작으로 인해 페이지가 다시 로드되는 것을 막을 수 있다. - 간단하게 form validation을 구현 할 수 있다.
Source#
Lesson 11 Tabs#
리뷰 영상#
구현목표#
- 탭을 구현하고 리뷰와 리뷰 작성 폼을 각각
Reviews,Make a Review라는 이름의 탭으로 분리한다.
이번 수업에서 공부할 내용#
- 이벤트 후킹을 위한 글로벌 채널로 사용할
eventBus라는 이름의 새로운 Vue 인스턴스 이해하기 lifecycle hook메서드인mounted()가 호출될때 이벤트 핸들러 등록하기- lifecyle hook 에 대한 자세한 내용은
Real World Vue코스를 참조할 것.