Options API => Composition API: Lifecycle Options API | Composition API beforeCreate, create | Not Needed | (setup replaces thes hooks) beforeMount, mounted | onBeforeMount, onMounted beforeUpdate, update | onBeforeUpdate, onUpdated beforeUnmount, unmounted | onBeforeUnMount, onUnmounted

Options API => Composition API Options API | Composition API data() {...} | ref(), reactive() methods: {doSmth() {...}} | function doSmth() {...} computed: {val() {...}} | const val = computed() watch: {...} | watch(dep, (val, oldV) => {}) provide: {...} / inject: [] | provide(key, val), inject(key)

Router SPA 하나의 HTML 파일에서 자바스크립트로 어떤 것이 보일지를 컨트롤한다. 페이지 이동이 일어날 때에도 URL이 변경되는 것이 아니라 화면만 바뀌게 되는데 이 경우 현재 페이지의 정보를 알아낼 수 없으므로 문제가 된다. 따라서 URL이 변경될 때 하나의 SPA에서 해당 URL이 나타내는 페이지를 라우팅시켜줘야하고, 이 때문에 라우팅이 필요하다. vue-router npm 설치 후 라우터를 설정한다. //main.js import { createApp } from 'vue'; import {createRouter, createWebHistory} from 'vue-router'; import App from './App.vue'; import Te..

Vuex global state를 관리하는 라이브러리 local state는 하나의 컴포넌트에만 영향을 미치지만 global state는 어플리케이션 전체에 영향을 미칠 수 있다. why global state를 관리하는 것은 어려울 수 있다. 하나의 컴포넌트에 너무 많은 로직과 데이터를 포함하게 된다. 데이터의 변화를 예측할 수 없다. 에러를 일으킬 수 있고 추적이 어렵다. Using store main.js에 createStore를 통해 store를 생성한 후 app에 연결한다. import { createApp } from 'vue'; import { createStore } from 'vuex'; import App from './App.vue'; con..

v-model input의 값을 처리하기 위해서 v-bind + v-on한 버전 input의 type에 따라 value 값의 타입을 자동으로 변환해준다. v-model은 modifier도 제공한다. lazy 기본적으로 v-model은 각 입력 이벤트 후 입력과 데이터를 동기화하는데 lazy 옵션을 사용하면 change 이벤트 이후에 동기화할 수 있다. number value를 number로 변환해줌 (parseFloat()로 변환되지 않는 값일 경우 원래 값을 리턴해줌) trim 시작과 뒤의 공백을 제거해줌 Custom Form 만들기 v-model 은 v-bind와 v-on 의 숏컷이기 때문에 props와 emits를 이용하면 커스텀 폼에서도 v-model로 상태 값을 연결할 수 있다. RatingCo..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 CLI에서 사용하는 NPM NPM 설치 npm install을 사용하면 npm 설정 파일 (package.json)에 설정된 라이브러리 목록을 다운로드할 수 있다. 앞에서 뷰 CLI로 프로젝트를 생성한 후 웹팩 추가 설정을 위해 플러그인 라이브러리나 애플리케이션 로직과 관련된 외부 라이브러리를 추가하려면 --save, ---save-dev 옵션을 활용한다. npm install --save , --save-dev 옵션 package.json 파일에 아래 속성을 확인할 수 있다. dependencies : 뷰 코어 라이브러리, 애플리케이션 동작에 필요한 라이브러리, --save로 추가 devDependencies : 웹팩 관련 라이브러리 , 개발..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. Vuex 뷰엑스는 애플리케이션의 상태 관리를 돕는 라이브러리이다. 상태(state) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터 상태 관리가 필요한 이유 최하단 컴포넌트에서 메인 컴포넌트로 데이터를 전달할 경우 그 사이에 너무 많은 컴포넌트가 있기 때문에 모든 컴포넌트를 거쳐서 props로 데이터를 전달하는 것은 번거롭고 관리도 힘들어지게 된다. 이벤트 버스를 사용할 경우 상-하위 간의 데이터 전달 구조를 따르지 않고도 한 번에 로그인 폼 컴포넌트에서 메인 컴포넌트로 데이터를 보낼 수 있게 쉽게 데이터를 전달할 수 있다. 하지만 단방향 데이터 흐름이 아닌 다양하고 많은 데이터 흐름일 경우에는 파악이 힘들어질 것이다. 이러한 이유로..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 기존 애플리케이션 구조 개선하기 현재 애플리케이션 구조의 문제점은 다음과 같다. 할 일을 입력했을 때 할 일 목록에 바로 반영되지 않는 점 할 일을 모두 삭제했을 때 할 일 목록에서 바로 반영되지 않는 점 화면을 4개의 컴포넌트로 분리해놓았기 때문에 한 영역의 처리 결과(TodoInput, TodoFooter)를 다른 영역(TodoList)에서 감지하지 못한다는 문제가 있다. 각 컴포넌트에 있는 같은 성격의 '할일' 이라는 데이터를 최상위 컴포넌트(App 컴포넌트)에 정의하고 하위 컴포넌트들에서 props로 전달하여 사용하도록 구조를 개선해볼 수 있다. 뷰 데이터 속성 todoItems와 로컬 스토리지 관리를 App 컴포넌트에서 한다..