Technique/Vue.js (13) 썸네일형 리스트형 [Vue3] Changes in Vue life cycle 라이프 사이클은 Vue2 및 Vue3에서 유사하게 작동하지만 컴포지션 API를 사용하면 이러한 라이프 사이클 후크에 대한 액세스가 다음과 같이 변경되었습니다. beforeCreate 및 created lifecycle hooks는 setup()이 이들을 대체하고, 정확한 기능을 수행하기 때문에 필요하지 않습니다. 그리고 이러한 라이프 사이클 후크를 사용하기 전에 가져 오는 것이 중요합니다. 예를 들어, onBeforeMount 는 다음과 같이 작성됩니다. import { onBeforeMount } from 'vue' export default { setup() { // mounted onBeforeMount(() => { // implementation }) } } 즉, 모든 라이프 사이클 후크와 그 .. [Vue3] Composition API Vue 사용의 장점 중 하나는 기능과 함께 코드의 반복 가능한 부분을 추출 할 수 있다는 것입니다. 이는 코드의 유지 관리 가능성과 유연성을 향상시키는 데 큰 역할을하지만 응용 프로그램이 많은 구성 요소와 함께 커지면 더 어려워 질 수 있습니다. Vue2에서는 데이터, 계산, 메서드, 시계와 같은 구성 요소의 옵션을 사용하여 논리를 구성합니다. 이 접근 방식은 성장된 구성 요소의 경우 코드를 읽고 이해하기 어렵게 만듭니다. 다음은 기본 Vue2 코드의 예입니다. export default { components: { Component1, Component2 }, props: { prop1: { type: String, required: true } }, data () { return { object 1,.. vue3 무엇이 다를까? Vue3는 Vue2 보다 더 빠르고, 작고, 유지보수가 용이하다. 또한 네이티브 타겟팅이 더 쉽다. Vue3는 Vue2의 기본 구문은 매우 유사하다. Vue3에 새롭게 도입 된 새로운 변경 사항 1. 컴포넌트 API 2. Vue 라이프 사이클의 변화 3. 텔레포트 4. 조각 5. 초기화 코드 하나씩 알아 보도록 하자!!! Vue 기술 면접(주니어) Q1: What is Vue.js? Q1. Vue.js 가 뭔가요? - Even You(에번 유) 가 2014년도에 발표한 자바스크립트 프레임워크 - 동적인 사용자 인터페이스(UI) 를 만들기 위한 프레임워크 Q2: How to create an instance of Vue.js? Q2. Vue instance 는 어떻게 생성하나요? - Vue() 생성자 함수를 이용하여 생성 - 생성시 옵션 객체를 전달 let vm = new Vue({}); - vue component 도 vue instance 와 동일하다. Q3: Explain the differences between one-way data flow and two-way data binding? Q3. 단방향 바인딩과 양방향 바인딩에 대한 차이점을.. [Vuetify] v-dialog eager Vuetify에서 v-dialog을 사용하여 다이얼로그 창을 생성하여 보여줄때 처음 한번에 한하여 데이터 바인딩이 제대로 되지 안을때가 있다. 이유는 v-dialog안에 컨텐츠가 mounted되었지만 렌더링 되지 않아서이다.. 이것을 해결결하기 위해서는 v-dialog 옵션에 eager를 True로 설정하여주면 마운트 된 컴포넌트 컨텐츠를 강제로 렌더링한다. http proxy 설정 Vue CLI가 생성하는 프로젝트 템플릿 코드에서는 약간의 설정 파일만 작성하면 웹팩 개발서버를 이용해 프로시 서버 기능을 사용할 수 있다. 프로젝트 최상위 디렉토리에 vue.config.js파일을 생성하고 아래의 코드를 작성한다. vue.config.js module.exports = { devServer: { host: 'localhost', port: '80', proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } } }, 이렇게 하면 개발용 서버에 /api/contacts를 요청하게되면 http://localshot:8081/contacts로 요청일 전달 도니다. 만약 위의 서비스 API 서버를 로컬에서 실행하지 않는다면.. filter Vue 필터 사용해보기 사용하기 {{ message | capitalize }} 로컬 선언 new Vue({ el: '#app', data: {}, filters: { capitalize (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } } 전역 선언 Vue.filter('capitalize', (value) => { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) 전역선언시 여러 필터를 편하게 사용하는 법 filt.. computed 미리 저장된 상태 값을 만들 수 있어서, 인스턴스 템플릿에서 쉽게 가져다 사용할 수 있다. Setter 와 Getter : 인스턴스와 연관 있는 상태 값(캐싱 값)을 한번에 변경 가능 - computed 함수 대신에 get 속성과 set 속성을 인자로 갖는 객체 리터럴을 전달함 get : 기존에 computed 함수가 했던 일을 대신 해줌 - computed 속성을 인스턴스 템플릿에서 호출했을 때 사용 set : computed 속성에 전달하는 값을 받을 수 있도록 함수를 선언 - 함수 안에서는 전달 받은 값을 분리해서 상태에 각각 저장 캐싱 : 인스턴스 템플릿을 해석할 때마다 인스턴스 상태 값을 새로 갱신하지 않도록 내부에 계산된 속성값을 저장해두는 것 - 성능이 나빠지는 것을 막는 데 큰 역할을 함 .. 이전 1 2 다음
