Skip to main content

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#

리뷰 영상#

구현목표#

  • 제품명 표시 부분에 brandproduct 를 합쳐서 표현 한다.
  • 제품별 별도의 재고량 데이터를 이용해 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 코스를 참조할 것.

Source#

소스 보기