디벨롭per

Vue.js에는 LifeCycle이 존재한다. * LifeCycle이란 컴포넌트가 생성되고 소멸되기까지의 단계를 뜻한다. 1) beforeCreate 인스턴스가 초기화가 되고, 즉시 실행되는 것이 beforeCreate 단계다. data()나 computed와 같은 옵션들을 처리하기 전에 실행된다. 이 단계에서 props에서 전달 받은 값을 사용하고 싶을 경우, Vue2는 created부터 props를 사용할 수 있고 Vue3에서는 beforeCreate에서 props 값을 사용할 수 있다. *Vue3에서 제공해주는 컴포지션api의 훅인 setup()은 beforeCreate() 이전에 호출된다. 2) created 해당 단계는 인스턴스가 처리되고, state와 관련된 옵션들인 computed나 meth..

Composition API 는 Vue3에서 기본적으로 제공해주는 API다. Vue2에서 사용할려면, npm을 통해 설치하면 된다. CompositionApi를 사용하기 전과 후를 비교하자면 , 코드의 간결성, 직관성이다. 기존 코드는 data 기준이 아니라 computed와 methods에 따라 분류되므로 만약 프로젝트의 규모가 커질수록 관리해야하는 data state값들이 많아진다면, 유지보수 및 한눈에 코드를 파악하기가 어렵다는 단점이 있다. 이를 보완한 것이 Composition API인데 해당 API는 data 기준으로 코드가 분류되어 코드가 명확해진다는 장점을 가지고 있다.

Vue.js 애플리케이션을 위한 상태관리 라이브러리다. store이라는 중앙 저장소에 데이터를 보관하고 모든 컴포넌트가 이용할 수 있도록 해준다. 기존 컴포넌트간에 데이터를 넘길 때 eventbus나 props를 사용했지만, 컴포넌트가 많아질 수록 데이터 처리가 복잡해진다. 그러므로 vuex이용하여 store에서 관리하고 해당 데이터를 수정 및 삭제하는 것이 효율적이다. 1) Getters getters는 state에서 데이터를 가져오는 함수를 나타낸다. getter의 결과가 의존성에 기반해 캐시되므로 의존성에 변화가 생겼을 경우에만 재실행된다. 2) Mutations Mutation은 state를 바꾸는 유일한 방법으로 상태가 변경되는 것을 추적할 수 있고 한 곳에서 상태를 변경하기에 일관되게 데이터를..

1) 컴포넌트 구성 html, 디렉티브, 바인딩 2) 컴포넌트 적용 3) 컴포넌트 간 데이터 전달 1) props로 부모컴포넌트에서 자식컴포넌트로 데이터 전달 //자식 컴포넌트 Vue.component('ChildComponent' , { props:['message'], template: ' {{message}} ' }) //부모 컴포넌트 4) $.emit() 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달 myevent는 특정 이벤트가 발생했을 때 동작하는 메서드 의미, parameter는 전달할 데이터 5) 이벤트 버스를 이용한 데이터 전달 이벤트 버스는 발행자와 구독자 패턴으로 이루어져있다. 컴포넌트가 A이벤트 발행하면 B이벤트가 A이벤트를 구독하는 구조 6) 컴포넌트 재사용 : 슬롯 부모..

A) Vue.js 인스턴스 1) 뷰 인스턴스 template 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서 methods 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 ) computed data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음 props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. watch data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다. 한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, ..