본문 바로가기

내직업은 IT종사자/vue

(4)

뷰(vue) options api와 composition api의 라이프사이클(lifecycle) lifecycle 이란 ? vue의 인스턴스가 생성, DOM 트리에 마운트, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기(life cycle) 이라고 합니다. 여기서 vue는 각 생명주기를 hooking 할 수 있는 방법을 제공하는데 이를 life cycle hook 이라고 합니다. 라이프 사이클을 잘 이해하고 사용해야하는 이유는? 프로그램에 대한 통제권을 가지기 위해서 입니다. 라이프사이클을 이해하면 컴포넌트의 생성, 변화하는 프로세스를 통제할 수 있게 됩니다. 내가 만든 프로그램이 어떻게 동작되는지 모른다면 복잡하고 또, 예외상황에 맞닿는다면 통제하기 어렵게 될 수도 있습니다. 프로젝트가 실행될 때, 인스턴스를 생성, 데이터 초기화, 데이터 감시설정, 템플릿컴파일, 인스턴스를 DOM에 마운트,..

[vue] vue 프로젝트 빌드 과정, 브라우저에 로드되는 과정 VUE BUILD vue 프로젝트를 빌드하게되면 Javascript 번들링 Vue CLI는 webpack과 babel을 이용하여 javascript 코드를 번들링 합니다. 이 과정에서 프로젝트의 여러 파일들이 하나의 번들파일로 합쳐지고 코드의 최적화가 이루어집니다. CSS, 이미지, 폰트 등의 번들링 Vue CLI는 프로젝트에서 사용하는 스타일시트, 이미지, 폰트 등의 리소스들을 적절히 번들링하여 최종 결과물에 포함시킵니다. HTML 파일 생성 VUE CLI로 vue 프로젝트를 생성하게 되면 기본적으로 public이라는 폴더에 index.html 파일을 생성합니다. 근데 index.html에는 js를 import 하는 코드가 없는데 ???... >> dist라는 폴더가 있는데 dist/index.htm..

ref, reactive 어떤 것이 더 좋을까? ref와 reactive 차이점 목차 ref()는 무엇인가? reactive()는 무엇인가? ref()와 reactive()의 차이점 ref(), reactive() 어떤것을 쓰면 좋을까? vue3(Composition api)에서 반응형 data를 사용하는 방법에는 ref, reactive가 있습니다. 1. ref()는 무엇인가? 반응형데이터를 사용할때 쓰이는 vue3에서 추가된 Composition API이며 원시타입일 때 주로 사용합니다. (String, Number, Boolean...) .value 속성에 새값을 할당 할 수 있습니다. 즉, .value로 변화하는 값을 즉시사용할 수 있으며 즉시 변화시킬 수도 있습니다. 주로 원시타입일 때 사용하지만 object 타입도 사용 가능합니다. (Array, Object..) Obje..

[vue] v-if와 v-show의 차이점 , vue3에서 v-if와 v-show 목차 v-if란 v-show란 vue3에서 v-show사용시 주의할점 v-if와 v-show 중 어떤것을 쓰는것이 좋을까?\ 요약: v-if와 v-show의 가장 큰 차이점은 v-if는 조건이 맞지않으면 아예 랜더링 하지않고 v-show는 조건에따라 css 로 display: block/ display: none처리가 됩니다. 1. v-if v-if="조건"으로 쓰면 조건의 참, 거짓 결과값에 따라 요소를 표시할지 안할지 결정할 수 있습니다. 여러가지 요소를 표시/표시하지않음 으로 한꺼번에 하고 싶으면 아래와 같이 wrapper에 v-if를 주면 됩니다. 안뇽 title ... 2. v-show v-show는 v-if와 동일하게 화면에 보여주냐 안보여주냐를 조건문 값을통해 결정할 수 있는데 v-if와 ..

이전 1 다음

티스토리툴바