본문 바로가기

FrontEnd30

[Vue] Computed와 Watch Vue에는 Computed와 Watch 속성이 있다. 둘의 특징과 차이점을 알아보자 Computed 속성 템플릿 내에 들어가는 값이 변환 되어야 하는 경우 filter를 사용하면 원하는 방향으로 변환할 수 있다. 그러나, 많은 연산을 해야할 경우 템플릿이 간단하지 않고, 함수도 매번 정의해야 하기 때문에 좋은 방향이라 할 수 없다. 또한, Store의 값을 Getters로 가져와 템플릿 내에 보여줘야 할 때에도 곤란하다. 이럴 때 사용하면 좋은 것이 Computed 속성이다. {{ ticketList }} {{ increse }} 위와 같이 computed 속성은 데이터 바인딩이 가능하여 data에 접근이 가능하고 data가 바뀜에 따라 computed 값도 자동으로 바뀌어 렌더링 된다. 또한, comp.. 2022. 10. 11.
[Vue] Vue의 Lifecycle Vue에서 인스턴스나 컴포넌트를 생성할 때 생기는 과정들을 라이프 사이클이라고 한다. 라이프 사이클 과정 중 일어나는 일과 해당 개념을 좀 알아보자. (인스턴스) 라이프 사이클이란? 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Lifecycle Hook)이라고 한다. 라이프 사이클 속성 종류 위 프로세스는 인스턴스가 생성되고 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다. 8개의 속성을 하나씩 알아보자. 1. beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프사이클 단계이다. 이 단계에서는 data 속성과 m.. 2022. 10. 11.
[Vue] Vuex? 상태관리? (개념/사용이유) vuex라는 vue에서 컴포넌트간 유기적으로 데이터를 주고 받을 수 있는 패턴이자 라이브러리에 대해 알아보자 Vuex란? Vue에서 사용하는 상태관리 패턴 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴 Vuex 필요할까? Vue는 가상 DOM을 활용하여 모든 요소를 실시간 반응형 컴포넌트로 생성할 수 있다는 특징이 있다. 프로젝트의 규모가 커질 수록, 컴포넌트는 늘어나게 되고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모/자식 관계는 더욱 복잡해질 것이다. 예를 들어, vue에서 한 페이지에서도 header, footer, button, list 등 여러 컴포넌트들이 겹쳐져 구성되는데 컴포넌트가 많아지게 된다면 컴포넌트간 통신(props, event emit 등)은 어떻게.. 2022. 10. 11.
[Vue] Vue.js란?-정의, 특징, 장/단점 Vue.js란? 사용자 인터페이스(UI) 및 단일 페이지 어플리케이션(SPA)을 구축하기 위한 JavaScript 프레임워크 점진적인 프레임워크 *점진적인 프레임워크? - 라이브러리 기능 + 프레임워크 기능 + 라이브러리 기능 : 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 + 프레임워크 기능 : 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 Vue.js의 동작원리 가상 DOM으로 화면 요소를 변경 및 조작하고 최종 결과물을 DOM Tree에 반영 가상 DOM? - DOM을 최소한으로 조작하여 처리하는 방식 - 가상 DOM이라는 DOM 트리를 모방한 가벼운 JS 객체를 통해 직접 DOM을 핸들링 하지 않고 자바스크립트가 HTML을 렌더링 하는 방법 가상 DOM을 사용하는 이유.. 2022. 10. 9.

티스토리툴바