Vue 3

[개발일기] .concat

배열에 원소를 추가할 때 .push를 자주 쓰곤 했는데 .concat이라는 기능을 알게 되었다. .concat도 똑같이 배열에 원소를 추가하는데, .push 와 뭐가 다를까? 바로 .push는 배열의 원본에 원소를 추가하는것이라면, .concat은 배열의 원본은 건드리지 않고 조작하는 것이다. 코드로 예를 들자면, var arr = [1,2]; arr.push(3); // 이라면, arr를 출력했을 때 [1,2,3]이 출력된다. var arr2 = [1,2]; var result = arr2.concat(3); //이라면, result는 [1,2,3]이 되지만 arr2를 출력해보면 [1,2]가 출력된다. state의 값을 바꿔야 할 때 .push를 쓰지 말고, .concat처럼 새로운 데이터를 추가하는걸..

[Vue] Vue의 LifeCycle 알아보기

Vue의 생명주기에는 4가지가 있다. 1. Creation(생성) 단계 2. Mounting(장착) 단계 3. Updation(수정) 단계 4. Destrucion(소멸) 단계 https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org 1. Creation(생성) 단계 - beforeCreate() : 라이프사이클 중 가장 맨 처음 실행되며, 컴포넌트가 DOM에 추가되기 전이게 때문에 DOM에 접근하게되면 에러 발생 - created(): data() 변수와 events 메서드가 활성화 되어 접근할 수 있음 이 단계에서는 템플릿과 가상 DOM에는 접근할 수 없다. 2. Mounting(장착) 단계 - before..

FrontEnd/Vue.js 2022.11.23

[Vue.js] Vuex 시작하기

Vuex란? 다양하고 복잡한 컴포넌트들을 효율적으로 관리하는 라이브러리 Vuex는 어플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워지기 때문에 필요하다. Flux? MVC패턴의 복잡한 데이터 흐름을 해결 할 수 있는 새로 나온 패턴으로 데이터의 흐름이 여러개로 갈리지 않고, 단방향으로만 처리된다. Vuex 설치 및 등록하기 npm i vuex@3.6.2 npm 방식으로 설치를 해준다. https://vuex.vuejs.org/installation.html Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The ..

FrontEnd/Vue.js 2022.07.07