개발/Vue

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다. 이벤트를 전달함으로써 상위 컴포넌트는 하위 컴포넌트에서 전달하는 값을 전달받을 수 있습니다. 예시 이벤트 emit 단계는 아래와 같습니다. 부모 컴포넌트는 자식 컴포넌트로 count prop를 전달합니다. 자식 컴포넌트는 increment, decrement 메서드를 통해 수정된 값을 change emit을 통해 부모 컴포넌트로 넘겨줍니다. 부모 컴포넌트는 전달받은 값을 활용해서 count 데이터를 업데이트합니다. 아래 코드는 부모 컴포넌트 예시입니다. 부모 컴포넌트에서 count 데이터를 관리하고 있습니다. ..

개발/Vue

Vue.js mounted created 차이 | 예제를 통해 쉽게 이해하자 (Difference between the created and mounted lifecycle)

Vue.js를 처음 접하면 Vue의 라이프사이클이 생소하기 때문에 created, mounted가 무엇인지 구별이 안될 수 있습니다. 각 라이프사이클 훅에서 어떤 일이 일어나고, 우리가 어떻게 사용하는지에 대해서 다뤄보도록 하겠습니다. 그리고 Vue.js를 통해 개발하는 개발자라면 아래 첨부한 라이프사이클 다이어그램은 꼭 인지하고 있을 필요가 있습니다. 라이프사이클 훅(Lifecycle hooks)이란? 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야합니다. 그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다. 라..

개발/Vue

Vue 슬롯(slot) 사용법 및 예제 (Understanding Slot in Vue.js)

Vue.js에서 컴포넌트를 활용해서 코드를 재사용함으로써 업무 효율성 및 생산성을 향상시킬 수 있습니다. 추가적으로 컴포넌트에 슬롯(Slots)을 활용하면 훨씬 재사용하기 용이하게 만들 수 있습니다. 이번 포스팅은 이미 컴포넌트 기초를 이해하고 있다 가정하고 작성한 내용이기 때문에 혹시 컴포넌트라는 개념을 아직 모르신다면 오늘 소개할 슬롯(Slots) 패턴을 이해하기 조금 까다로울 수 있습니다. 🤔 슬롯(Slots)이란? 일반적으로 슬롯이라고 하면 1) (무엇을 집어넣도록 만든 가느다란) 구멍, 2) (가느다란 구멍·자리에) 넣다 라는 뜻을 가지고 있는데 Vue 개발팀도 작명하는데 꽤 고심했다는 것이 이런 부분에서 느껴집니다. 정말 간단하게 표현하자면, 슬롯이란 컴포넌트에 콘텐츠나 다른 컴포넌트를 또 다..

개발/Vue

Vue $nextTick 이란? | 사용법 및 간단 예제 (Understanding $nextTick in Vue.js)

Vue는 DOM 업데이트를 비동기(asynchronously)로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프(event loop)에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. 같은 Watcher가 여러 번 발생하면 대기열에서 한 번만 푸시됩니다. 이 버퍼링된 중복의 제거는 불필요한 계산과 DOM 조작을 피하는 데 있어 중요합니다. 그 다음, 이벤트 루프 "tick"에서 Vue는 대기열을 비우고 실제 (이미 중복 제거 된) 작업을 수행합니다. 해당 포스팅에서 이벤트 루프에 대한 개념까지 다루기엔 조금 무리가 있기 때문에 추후에 따로 설명드리고, 지금은 Vue.js에서는 데이터를 통해 업데이트된 DOM에 바로 접근하기 위해선 nextTick을 활용해야 된다고 이해하시면 됩니다. ..

개발/Vue

Vue render 함수에서 innerHTML 사용하는 방법 (How to use v-html in JSX)

일반적으로 React에서는 dangerouslySetInnerHTML, Vue에서는 v-html을 활용해서 innerHTML 처리를 합니다. 하지만 일반적인 방식이 아닌 렌더 함수(Render Function)를 사용하는 경우도 있는데요. 이때는 아래와 같이 처리하면 굉장히 간편하게 처리할 수 있습니다. 예시 this.$alert({ content: (h) => h('div', { domProps: { innerHTML: err.message } }) }) 좀 더 축약된 방식은 아래와 같습니다. domPropsInnerHTML 활용한 방법 this.$alert({ content: () => { return // return } }) export default { name: "app", data() { r..

개발/Vue

vue cli 버전 확인하는 방법 (How can I check vue cli version)

아래 명령어로 vue cli를 설치하면 vue 바이너리에 액세스할 수 있습니다. npm install -g @vue/cli # OR yarn global add @vue/cli vue --version은 CLI 버전을 알려줍니다. vue --version // @vue/cli 4.5.13

개발/Vue

앤트디자인(ant-design-vue) 모달 애니메이션 제거하는 방법(Is there any way to disable modal animations?)

프로젝트에서 앤트디자인을 사용하다보면 Modal 컴포넌트의 애니메이션을 제거하고 싶은 경우가 생깁니다. 저또한 Vue 프로젝트에서 ant-design-vue 라이브러리를 사용하면서 Modal 컴포넌트의 애니메이션을 제거하려고 했으나 문서에서 찾으려고 했을 때 바로 나오지 않아서 꽤 귀찮게 찾은 경험이 있어서 해당 이슈 공유합니다. 리액트(React)에서도 동일하게 처리 가능하니 참고바랍니다. Ant Design - The world's second most popular React UI framework ant.design 해결방법 해결방법은 의외로 굉장히 간단합니다. 사용하는 Modal 컴포넌트의 트랜지션과 마스크 트랜지션 속성 이름을 none으로 적용하면 애니메이션 효과가 사라집니다. 어떤 원리인지는..

개발/Vue

vue-awesome-swiper Loop + Autoplay + Pagination 적용하기

Swiper 라이브러리에서 무한루프(loop), 페이지네이션(pagination), 자동재생(autoplay)를 유기적으로 버그없이 잘 동작하게 구현하는 것은 생각보다 까다로울 수 있습니다. 이번 포스팅에서는 Swiper 라이브러리를 활용해서 3가지 기능의 타이밍을 정확하게 제어하여 Carousel Slider 기능을 구현해보도록 하겠습니다. 라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 구현할 최종 결과물 우리가 구현할 최종 결과물은 아래와 같습니다. 코드 vue-awesome-swiper를 활용해서 구현한 예시는 아래 코드와 같습니다. // template code {{ n }} v-swiper를 적용하는 태그에 v-once 디렉티브를 같이 적용해야 됩니다. v-..

개발/Vue

Vue.js v-model 한글 사용 문제 초간단 해결 방법

ue.js를 사용하다보면, input 태그에 v-model 디렉티브를 사용해야될 경우가 굉장히 많습니다. 하지만, Vue에서 v-model 디렉티브를 활용할 때 한글과 같이 사용하면 조금 문제가 생기는데요. 영어를 사용할 때는 발생하지 않았지만, 한글에서는 왜 이러한 문제가 발생하는 것일까요? 현상 Vue에서 v-model 디렉티브를 사용할 때 일반적으로 아래와 같이 사용합니다. 영어와 같은 경우 정상적으로 양방향 바인딩이 되어 있음을 확인할 수 있습니다. 하지만 한글일 경우 어떻게 될까요? 한글을 타이핑하면 조금 문제가 발생하는데요. 발생하는 이슈는 아래와 같습니다. 한글을 입력할 때 키워드 데이터가 즉시 바인딩이 되는 것이 아닌 글자가 조합이 되어야 그제서야 바인딩이 되는 모습입니다. 왜 이러한 이슈..

개발/Vue

Vuex 모듈 state 깔끔하게 초기화하는 방법 (Reset Vuex Module State)

들어가기 전에 Vue 라이브러리로 서비스를 개발하다 보면 Vuex라는 상태 관리 도구를 사용하곤 합니다. Vuex는 애플리케이션의 상태 값을 하나의 객체로 관리할 수 있습니다. 하지만 서비스의 규모가 커지면 커질수록 모든 상태 값들을 단일 상태 객체 안에 넣고 관리하는 것은 굉장히 비효율적입니다. 이럴 경우 Vuex의 모듈(Modules) 컨셉을 사용하곤 하는데요. 이때 모듈에서 사용하고 있는 상태 값들을 초기화를 해야 될 경우가 생깁니다. 이번 포스팅에서는 Vuex 모듈에서 상태 값을 깔끔하게 초기화하는 방법에 대해서 다뤄보도록 하겠습니다. 예제코드 예시 1) 객체반환 함수로 구현 getDefaultState 함수는 초기 상태 값을 반환하는 함수입니다. 핵심은 getDefaultState 함수가 값을 ..

개발/Vue

Vue 클릭이벤트(click event) 여러개 설정하는 방법 (How to call multiple functions with @click in vue)

vue 템플릿에서 @click을 사용할 때 여러 개의 이벤트를 같이 사용하는 방법은 아래와 같습니다. 클릭 버튼 사용 예제 아래는 위 코드를 동작시킨 예시입니다. 버튼을 클릭했을 때 2개의 함수가 동시에 정상적으로 실행된 것을 확인할 수 있습니다. 2개 이상 클릭 이벤트를 연결했을 때도 잘 동작합니다.

개발/Vue

Vuex 제대로 사용하는 방법 (Vuex의 기초부터 심화까지)

Vuex 란? vuex는 vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. 모든 컴포넌트들에서 접근 가능한 중앙 집중식 데이터 저장소입니다. 모든 데이터 흐름을 중앙에서 관리함으로써 예측 가능한 애플리케이션을 구현할 수 있습니다. Vue의 공식 devtools 확장프로그램과 통합해서 사용하면 훨씬 사용하기 쉬워집니다. 시작하기 (Vuex 설치 방법) vue-cli를 사용해서 vue 프로젝트를 세팅합니다. vue create vuex-test vue 프로젝트를 세팅했다면 vuex 라이브러리를 설치해주세요. yarn add vuex // or npm install vuex --save Nuxt에서는 기본적으로 Vuex를 지원함으로 따로 설치할 필요가 없습니다! Vuex Store Nuxt.js가 ..

개발/Vue

엑심베이(Eximbay)에서 자바스크립트(Javascript)로 FGKEY 설정하는 방법

회사에서 엑심베이(Eximbay) 결제 모듈을 연동할 일이 생겨서 Nuxt.js에 엑심베이 FGKEY를 설정했을 때 사용한 코드를 공유하도록 하겠습니다. 기본적으로 엑심베이에서 FRKEY를 사용하는 이유는 가맹점과 Eximbay 사이에 전송되는 파라미터의 유효성을 확인하기 위해 사용됩니다. Eximbay에 모든 거래 요청 시, 파라미터를 SHA-256으로 Hashing 하여 fgkey 파라미터로 전달하며, 이 값은 Eximbay에서 생성된 Hashing 값과 비교하여 거래의 유효성을 확인합니다. 응답 파라미터의 fgkey는 Eximbay에서 생성하며, 동일한 방법으로 가맹점에서 거래의 유효성을 확인합니다. fgkey생성을 위해서는 승인된 key가 필요하며, 해당 key는 Eximbay로부터 할당받습니다...

개발/Vue

Vue watch에 lodash debounce 적용하는 방법

Vue에서 watch에 lodash debounce를 사용하는 방법은 매우 간단합니다. watch로 감지할 데이터 프로퍼티로 값을 지정하는 함수를 debounce로 감싸면 해결됩니다. 예시

개발/Vue

[Vue] vue.js Mixin을 활용해서 재사용성을 늘리자! (Understanding Mixins in Vue JS)

소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있습니다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라" 라는 뜻을 가지고 있는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재합니다. 믹스인, 사용자 지정 디렉티브, 플러그인, 필터가 그 기술에 속해있죠. 이번 포스팅에서는 믹스인을 활용해서 기능을 재사용하여 중복 코드를 제거해보도록 하겠습니다. ✍️ Mixin(믹스인) 이란? Mixin은 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말합니다. 일반적으로 Vue 컴포넌트에 기능을 추가하기 위해 필요할 때마다 재사용할 수 있습니다. SASS라는 CSS 전처리기를..

개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..

개발/Vue

VSCode에서 @vue/cli4, Prettier 그리고 Eslint 통합환경 구성하기

개발환경을 구성할 때 개발자의 실수와 팀과 맞지 않는 코딩컨벤션을 맞춰주기 위해 Eslint와 Prettier를 설정하는 것은 필수적입니다. ESLint ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다. 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출 해주므로 옳바른 코딩 습관을 갖도록 돕는 유용한 툴입니다. ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parser..

개발/Vue

extract-css-chunks-webpack-plugin Conflicting order. Following module has been added 에러 해결방법

Nuxtjs 버전을 올린 후 발생하는 extract-css-chunks-webpack-plugin 와 관련된 에러 해결 방법입니다. 아래는 에러에 관련된 내용입니다. [extract-css-chunks-webpack-plugin] Conflicting order. Following module has been added 해결방법 nuxt.config.js /* ** Build configuration */ build: { extractCSS: { ignoreOrder: true, } }

개발/Vue

AWS S3에 Vue Application 배포하기

vue-cli로 구성한 프로젝트를 s3에 배포해서 빠르게 서비스를 구성하는 방법을 공유해드리겠습니다. vue와 s3를 알려드리는 포스팅은 아니기 때문에 해당 지식은 가지고 있다고 가정하고 글을 이어나가겠습니다. vue-cli로 vue 프로젝트 구성 npm install -g @vue/cli # OR yarn global add @vue/cli 정상적으로 설치를 완료했다면, 해당 프로젝트 폴더에서 아래 명령어로 프로젝트를 실행해주세요 npm run serve # OR yarn serve 로컬환경에서 정상적으로 vue 프로젝트를 세팅한 모습 AWS S3에 애플리케이션 배포하기 AWS Console에서 S3 콘솔로 이동합니다. 버킷 생성하기 버튼을 클릭합니다. 고유한 버킷 이름을 적고 생성을 클릭합니다. (하..

개발/Vue

Vue CLI 3에서 custom dotenv 활용하는 방법

Vue CLI에서 커스텀 dotenv는 변수명 앞에 VUE_APP_ 접두사를 추가해야 사용이 가능합니다. ex) process.env.NODE_ENV // ex) process.env.NODE_ENV localhost | dev 서버에는 dev rest를 반영하고, release 서버에는 prod rest를 반영하는 조금 신박한 방법 (기존방식 process.env.NODE_ENV === 'development' 로 체크하면 dev서버에 올릴 때 release API URL로 정의되어 올라감) package.json 스크립트에서 dev, prod env를 생성하고 각 env파일에 VUE_APP_API_BASE_URL 변수에 url 추가 // .env.dev VUE_APP_API_BASE_URL=https..