📚TIL
day34
vue 시작하기
- vue.js는 html구조를 데이터 옵션을 통해서 연결할 수 있음
- 반응형 데이터, 반응성 : 데이터가 변경될 때 반응해서 연결되어있는 화면도 같이 바뀜
어플리케이션&인스턴스 생성
- createApp : vue어플리케이션을 생성할 때 사용하는 매소드
- mount : 어플리케이션과 html요소를 연결하기 위해 사용하는 매소드
- vue.js application : vueApplication. instance Object
- 전역 API : 전체 영역에서 쓸 수 있는 기능으로 cdn 빌드를 설치하는 경우엔 Vue 객체를 통해, npm설치시 vue를 import하여 사용 가능
- vueModel : app.mount를 실행할 때 반환되는 instance
라이프 사이클
- vue.js에서 인스턴스나 컴포넌트를 생성하는 단계를 의미
- 라이프 사이클 훅 : 라이프사이클 과정에서 단계 사이에 훅처럼 걸어서 실행
- 라이프사이클 매소드 : 입력한 순서와 상관 없이 정해진 시기에 맞춰 동작함
- beforeCreate : vue.js가 생성되기 바로 직전, 제한적이어서 활용도가 떨어짐
- created : vue.js가 생성된 직후, 데이터를 처리하는 여러가지 작업들을 다룰 수 있으나 html 구조와 연결되어있지 않아 이를 다룰 수 없다는 단점
- beforeMount : html구조와 vue.js의 내용이 연결되기 직전의 상태
- mounted : html구조와 vue.js의 내용이 연결된 직후의 상태, html구조를 직접적으로 접근해서 다뤄야 할 경우에 사용
- beforeUpdate : 업데이트가 되기 직전이라는 의미, 데이터 값이 변경된 이후 화면에 출력되기 이전의 상태
- updated : 업데이트가 직후라는 의미, 데이터와 화면의 변경이 업데이트 된 이후의 상태
- beforeUnmount : 연결이 끊기기 전을 의미
- unmounted : 연결이 끊어졌음을 의미
- 컴포넌트에서 연결을 끊었을 때 처리해야하는 데이터들이 있으면 beforeUnmount, unmounted로 데이터를 정의해줘야 함
- app.unmount() : 연결을 해제할 때 사용하며 데이터는 남아 있어서 활용할 숭 ㅣㅆ지만 화면에는 출력되지 않음
- 가장 많이 사용하는 매소드는 mounted, created
템플릿 문법
- vue.js에서 html구조를 연결할 때 사용하도록 제공하는 구문으로 별다른 변환 작업 없이 html에서 vue.js를 사용할 수 있음
- 보간법(Interpolation) : 이중 중괄호 구문(Mustache) - 변경될 때 마다 화면이 갱신됨
- v-once : 데이터가 변경돼도 갱신되지 않는 일회성 보간법
- v-html : html구조로 출력해야할 경우 사용하며 XSS보안 취약점이 있기 때문에 주의해서 사용
- v-bind : html 속성 부분에도 데이터를 사용할 수 있도록 함, 단일 표현식을 사용할 수 있도록 함
- v-on : dom에서 사용할 수 있는 이벤트를 사용하도록 함
- 동적 전달인자 : js표현식을 대괄호로 묶어 디렉티브 전달인자로 사용
<div v-bind:[attributName]="url"></div>
<!--attributeName을 vue.js에서 속성을 정해서 넣을 수 있음-->- 약어 : 가장 자주 사용되는 v-bind와 v-on의 약어가 있음
<!--v-bind-->
<a v-bind:href="url"></a>
<a :href="url"></a>
<a :[key]="url"></a>
<!--v-click-->
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
<a @[event]="doSomething"></a>데이터 속성
- vue.js에서 데이터는 함수여야 하며 컴포넌트는 재사용성이 중요한 핵심 요소이기 때문에 데이터를 함수로 만들어서 반환할 수 있는 구조를 만들어야 함
- 데이터에 접근하는 두가지 방법
vm.$data.count //count라는 이름을 가진 data에 접근하는 방식
vm.count- 반응형 데이터를 정의할 때는 미리 data 옵션에다 선언해놓지 않으면 나중에 추가되는 data는 반응성을 가지지 않음
프록시(Proxy)
- proxy 활용시 값이 언제 할당되고 조회되는지 감시해서 중간에 특정한 로직을 실행할 수 있음
const app ={
data:{
count : 0
}
}
const proxyA = new Proxy(app.data, {
get(target, key){ //값을 조회할 때 실행
return target[key] //값을 가져옴
},
set(target,key,value){ //값을 지정할 때 실행
target[key] = value //데이터 갱신
}
})- get : 값을 조회할 때 실행하는 메서드
- target : new 연산자를 사용해서 proxy라는 생성자를 실행할 때 첫번째 인수로 넣었던 app이라는 변수에 있는 객체 데이터
- key : 조회하려고 하는 데이터
- set : 값을 지정하는 메서드
- target : new 연산자를 사용해서 proxy라는 생성자를 실행할 때 첫번째 인수로 넣었던 app이라는 변수에 있는 객체 데이터
- key : 조회하려고 하는 데이터
- proxy 객체는 기본적인 동작의 새로운 행동을 정의할 때 사용 - new Proxy(target, handler)
메소드
- 컴포넌트 instance에 메서드를 추가하려면 methods 옵션을 사용
- methods를 이용해 data에 정의해놓은 데이터에 접근할 수 있음
- 매소드를 정의할 경우 화살표함수를 사용해야함 - 일반함수와 this에 대한 정의가 다름
- 정의된 매소드는 탬플릿 내부에서 사용할 수 있음
- 디바운스와 쓰로틀링은 Vue에서 자체적으로 지원하지 않지만 Lodash같은 라이브러리를 통해서 사용할 수 있음
🌊하루를 마치며
vue를 처음 공부해보면서 생소하다는 느낌을 받았다. html 테그 속성에 직접 데이터의 변수명을 입력해 사용할 수 있다니..! 바닐라 자바스크립트를 공부하고 난 후에 배워서 더 쉽게 공부할 수 있을 것이라고 생각했는데 데이터의 흐름이 이해가지 않아 많이 돌려봐야 했다ㅠㅠ 아직은 기초부분이라 잘 따라가고 있지만 더 깊은 내용이 나왔을 때 하나 하나 이해하는 것 마다 오래걸릴지 걱정이 된다. 계속 보고 따라서 쳐보면 앞으로 익숙해지는 날이 오지 않을까 한다.
내일은 vue강의를 코어타임 동안 최대한 듣고 코어타임 이후에는 css과제를 완성해보려고 한다. 시간이 부족하겠지만 코드리뷰전에는 최대한 완성하는 것이 목표다. 강의가 많이 밀려서 지치지만 열심히 해볼 것이다. 화이띠이이잉~
Front-end Develop🥰