본문 바로가기

📠 archive29

[Vue.js] 함수형 컴포넌트 이모저모 Vue 함수형 컴포넌트에 대해서 📌 함수형 컴포넌트란? 함수형 컴포넌트 는 상태와 인스턴스가 존재하지 않는 컴포넌트를 말합니다. 컴포넌트가 상태가 없고 인스턴스화 되지 않기 때문에 this 컨텍스트 가 없습니다. 상태가 없기 때문에 초기 렌더링과 업데이트 시 성능 이점을 볼 수 있다는 특징이 있습니다. 📌 함수형 컴포넌트 사용하기 이후에 사용되는 예제는 Vue 2.x 를 기준으로 작성되었음에 유의 바랍니다. Vue 3 부터는 functional: true 속성대신 일반 함수로 함수형 컴포넌트를 구현할 수 있습니다. template 에 functional 속성 지정하기 SFC(single file component) 를 사용하는 경우 다음과 같이 template 옵션을 사용하면 됩니다. 함수형 컴포넌트 @.. 2022. 2. 20.

[Vue.js] v-deep 속성에 대해서 vue 에서 v-deep 이란? 📌 컴포넌트의 scoped 선언 사내에서 vuetify 로 구성된 일부 화면을 다룰 일이 생겼는데 vuetify 에서 제공되는 컴포넌트의 스타일 지정이 뜻대로 되지 않을 때가 발생하곤 합니다. 이럴 때 다음과 같이 scoped 선언 없이 스타일을 덮어 씌우면 해결되는 경우도 있지만 이 경우 전역적으로 해당 스타일이 영향을 주기 때문에 좋지 않은 방법입니다. // BAD ! // #2 // #3 sass 와 같은 일부 CSS 전처리 환경에서는 >>> 가 올바르게 동작하지 않을 수 있습니다. 이 경우에는 두번째나 세번째 방법을 사용하면 됩니다. 📌 v-deep 을 이용해서 v-html 스타일 다루기 v-html 로 선언된 HTML 마크업은 scoped 스타일 적용이 안됩니다... 2022. 2. 20.

[Vue.js] mixin 코드 스타일 가이드 Vue mixin 사용 시 추천하는 코드 스타일 📌 mixin 사용 시 코드 스타일이 중요한 이유? 회사에서 기존 소스코드를 분석하며 가장 힘들었던 부분은 mixin 사용과 관련된 것이었습니다. 별다른 코드 컨벤션 없이 mixin 을 사용하면 대규모 서비스에서 해당 소스가 어느 모듈에 포함된 것인지 파악이 힘들게 됩니다. 이에 어떻게 하면 코드 분석이 용이한 방법으로 mixin 을 사용할 수 있을지 고민이 필요했습니다. 📌 Vue 스타일 가이드에서 제시하는 방법 const myAwesomeMixin = { methods: { $_myAwsomeMixin_update: function () { /** ... */ } } } Vue 스타일 가이드 에서는 위와 같이 mixin 의 사용자정의 프로퍼티는 $_ 라.. 2022. 2. 20.

[Vue.js] v-model 속성과 @Model 데코레이터에 관해서 Vue 의 v-model 에 대해서 알아보자 📌 v-model 이란? v-model 은 Vue 에서 양방향 바인딩을 사용할 수 있는 디렉티브입니다. 기본적으로 form 요소들에 사용할 수 있으며 이를 통해 현재 입력된 form 요소 값을 동기적으로 손쉽게 다룰 수 있도록 해줍니다. 📌 v-model 의 사용 예시 📌 v-model 과 함께 사용할 수 있는 수식어 v-model 과 함께 사용할 수 있는 수식어(modifier) 가 3가지 존재합니다. 각각의 수식어에 대해서 간단한 예시와 함께 살펴보도록 하겠습니다. .lazy .lazy 수식어를 사용할 경우 change 이벤트가 발생할 때 값의 동기화가 이루어지도록 변경할 수 있습니다. 위 예제의 경우 첫번째 input 요소에서 focus out 될 경우에.. 2022. 2. 20.

[Vue.js] Vue 에서 비동기 요청은 언제 하는 것이 좋을까? 비동기 요청으로 상태를 초기화할때 어떤 라이프사이클을 사용할까? 📌 비동기 요청을 위한 최적의 라이프사이클은? Vue 를 사용하면서 항상 고민했었습니다. 비동기로 데이터를 가져올 때 어떤 라이프사이클 훅에서 이를 처리해야 할까? 많은 Vue 사용자들이 created 에서 이를 처리하여서 저 또한 막연히 이를 따랐는데 Vue 의 라이프사이클을 정리하면서 이에 대한 구체적인 근거를 찾고 싶었습니다. 찾아보니 이게 정답이다! 하는 건 없었지만 그중 가장 납득이 될만한 근거를 가지는 자료를 찾았습니다. 📌 Vue 사용자들의 보편적인 의견 해외의 다른 개발자분도 저와 같은 고민을 하셨고 다음과 같은 근거로 created 훅을 사용했습니다. beforeCreate, created, beforeMount 어디에서 호.. 2022. 2. 20.

Vue.js 클래스와 스타일 바인딩 적용하기 📌 하고 싶은 것 교내 학기말 쇼핑몰 구현 과제 진행 도중 장바구니 기능에서 상품의 상태에 따라 구매 가능 유무를 사용자에게 보여주도록 했습니다. 그런데 밋밋한 텍스트는 의미있는 정보를 전달하기 좋지 못하다 생각해 상태별로 스타일을 적용하는 것을 고려했는데 Vue.js 에서는 동적 클래스 및 스타일 바인딩 을 지원해주고 있어서 이를 적용해봤습니다. 📌 클래스와 스타일 동적 바인딩 Vue.js 에서는 데이터를 동적으로 랜더링하기 위해 v-bind 를 지원하고 있습니다. 따라서 특정 컴포넌트의 스타일 혹은 클래스를 동적으로 할당해주기 위해서는 해당 기능을 활용하면 됩니다. 크게 객체를 통해 지정하는 방법과 배열을 통해 지정하는 방법으로 나뉘게 되는데 클래서를 동적으로 할당하기 위한 샘플 코드를 살펴보고 이번.. 2021. 3. 2.

이전 1 2 3 4 5 다음

티스토리툴바