👨💻📱✍️🎢314 [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. [JavaScript] Promise.all vs Promise.allSettled Promise.all vs Promise.allSettled 📌 Promise.all 을 사용해야 하는 경우는? 회사에서 API 호출 로직을 작성하다가 비동기 병렬 처리를 위해 다음과 같이 코드를 작성했었습니다. try { await Promise.all([ fetchMySomeDataAsync(), fetchMyAnotherDataAsync(), ]) // ... } 두 비동기 함수를 병렬로 실행하고 싶을 때 위 처럼 작성하는 것이 맞을까요? 문제는 다음과 같은 상황에서 발생했습니다. A와 B 라는 함수를 병렬로 실행하지만, 두 함수 각각의 성공 및 실패 유무가 서로 연관이 없을 경우 Promise.all 은 병렬로 실행한 함수 중 어느 하나라도 실패한다면 error 로 처리됩니다. try { cons.. 2022. 2. 20. 이전 1 ··· 14 15 16 17 18 19 20 ··· 53 다음
