Vue.js 중급 강의 정리 - vue 기본

인프런 - Vue.js 중급 강좌

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex - 인프런

강의 소개

• Vue CLI 프로젝트 구성
• 컴포넌트 기반 설계 방법
• 컴포넌트 구조화 및 통신 방법
• ES6 코딩
• Vuex - 상태 관리 라이브러리

개발 환경 설정 및 리포지토리 클론

• OK

Vue CLI로 프로젝트 생성

• npm install -g @vue/cli
• vue --version
• vue create '프로젝트 이름'

프로젝트 소개 및 컴포넌트 설계 방법

• src 폴더에 웹팩 설정 파일이 없다. - 복잡한 웹팩을 사용 않음
• 컴포넌트 설계는 개인의 취향이지만 작게 구성하면 재사용성이 일반적으로 좋다

컴포넌트 생성 및 등록하기

• VS Code에서 'vue'로 스캐폴딩 생성가능

<template>
  <!-- HTML -->
</template>

<script>
export default {
  // js script
}
</script>

<style>
  /* css */
</style> 

 

• 각 템플릿의 첫 번째 태그는 하나여야 한다.
  • 객체지향에서 다중 상속이 되는 경우는 드믈며, 지원하여도 충돌이 발생하여 불편하다.
  • 그럼으로 하나만 상속 되는 것이 일반적이다.

반응형 태그, 파비콘, 아이콘, 폰트 설정하기

• 메타태그로 브라우저에게 웹페이지의 정보 알리기

<meta name="viewport" content="width=device-width,initial-scale=1.0">

• 적당한 이미지로 파비콘 생성 사이트에서 만들자.
• 아이콘은 Awesome Icon을 이용하자.
• 폰트는 Google font를 이용하자.

TodoHeader 컴포넌트 구현

• CSS
  • scoped : css 스타일을 해당 컴포넌트에만 적용하는 속성
  • rem : 폰트의 크기에 따라서 배율이 정해지는 단위
• HTML
  •  적절한 태그를 입력

TodoInput 컴포넌트의 할 일 저장 기능 구현

• directive (지시자)
  • v-model : 각 입력 이벤트 후 데이터와 입력을 동기화합니다
    • Vue 객체의 변화는 스크립트와 화면 둘다에서 가능 = 양방향 바인딩
    • 아마도 단방향 바인딩을 위한 디렉티브
  • v-on : 해당 태그에 Vue이벤트 메소드 등록
    • v-on:click : 클릭 이벤트
    • v-on:keyup : 키업 이벤트
• 메소드내에서 data 접근
  • this를 통해 접근할 때, data 프로퍼티를 입력하지 않아도 data 프로퍼티에 액세스 가능
• 메소드내에서 메소드 접근
  • this를 통해 접근할 때, methods 프로퍼티를 입력하지 않아도 methods 프로퍼티에 액세스 가능
• localStorage
  • key-value 저장소
  • 쿠키를 대체 할 수 있는 녀석
  • ( 약 2년 사이에 웹이 많은 변화가 있었구나... ) 

TodoInput 컴포넌트 코드 정리 및 UI 스타일링

• CSS 복합 선택자
  • A B { } : A의 모든 자식 B에 { } 스타일 적용한다.

TodoList 컴포넌트의 할 일 목록 표시 기능 구현

• life cycle
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestory
• directive (지시자)
  
  • v-for : 반복 합니다.
    • 반복 할 태그에 해당 지시자를 명시한다.
    • v-for=" '순회하는 요소의 각항목' in '순회하는 요소이름' "
    • index를 첨부할 수 있다.
      • ex) v-for="(todoItem, index) in todoItems"
  • v-bind : 해당 태그에 무엇을 바인드 시킹
    • v-bind : 키를 바인드 시킨다.
      
      • 키 값을 이용한 인덱스를 만드므로 성능향상에 큰 도움이 된다. 없으면 성능이 똥이 된다.

 

TodoList 컴포넌트 UI 스타일링

• CSS
  • margin의 auto 값 : 남은 영역 값을 자동으로 설정
  • text-decoration : li태그는 이 속성의 값이 아래줄 표시가 기본값

TodoList 컴포넌트 할 일 삭제 기능 구현

• javascript 배열 메소드
  • splice : 데이터 원본을 수정하는 메소드다! 주의하자!
  • slice : 원본은 유지하고 반환값을 이용한다.

TodoList 컴포넌트의 할 일 완료 기능 구현

• v-bind:class= { '클래스 속성 이름' : 요소의 값 }
  • 요소의 값이 참이면 '클래스 속성 이름'이 입력되고 그렇지 않으면 입력되지 않음

TodoFooter 컴포넌트 구현

• localStorage.clear();
  • 로컬 스토리지에 있는 모든 내용을 지운다.