728x90
반응형
 포스팅 썸네일 이미지

개발/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..

2021.07.08 게시됨

 포스팅 썸네일 이미지

개발/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으로 적용하면 애니메이션 효과가 사라집니다. 어떤 원리인지는..

2020.12.16 게시됨

 포스팅 썸네일 이미지

개발/Vue

Nuxt.js에서 vue-awesome-swiper loop pagination 버그 해결하는 방법

라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 Nuxt.js에서 vue-awesome-swiper를 활용해서 swiper 페이지네이션(pagination) 기능을 구현할 수 있는데요. 구현하려는 의도는 아래와 같습니다. 하지만 swiper 이벤트에 vue 컴포넌트 데이터 변이 로직을 넣으니까 위 의도대로 동작하지 않았는데요. 증상은 아래와 같습니다. swiper에서 제공하는 페이지네이션을 누르자 2번째 슬라이드에서 3번째 슬라이드로 넘어가는 도중 이상한 버그가 발생하여 처음 의도와는 다르게 동작한다는 사실을 발견하게 되었습니다. 구현된 코드 nuxt에서 vue-awesome-swiper를 사용한 코드는 아래와 같습니다. {{ n }} export default { d..

2020.12.01 게시됨

 포스팅 썸네일 이미지

개발/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-..

2020.12.01 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.11.18 게시됨

 포스팅 썸네일 이미지

개발/Vue

Nuxt.js에서 웹폰트 제대로 사용하는 방법

Nuxt.js로 프로젝트를 진행할 때 여느 때와 같이 main.css 내부에 @import로 webfont를 가져와서 사용하고 있는데, 어느 날 무언가 이상한 점을 발견했습니다. 개발환경에서는 웹폰트가 잘 적용되었기 때문에 "웹폰트가 잘 가져와졌구나"라고 생각했고, 프로젝트 배포를 위해 빌드 후 웹 서버에 올라간 Nuxt.js 프로젝트를 살펴보는데 뭔가 개발버전에서 맞춰놓은 간격과 위치가 미묘하게 다른 점을 발견하게 되었습니다. 폰트에 문제가 있음을 인지하게 되었고, 그 원인을 찾게 되었는데 @import 구문으로 가져오고 있던 웹폰트에 문제가 있었습니다. 프로젝트에서 사용하고 있었던 방법이 Nuxt.js 프로덕션(production) 모드에서 제대로 동작하고 있지 않음을 확인하고 다른 방법으로 변경함으..

2020.11.18 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.10.22 게시됨

 포스팅 썸네일 이미지

개발/Vue

nuxt core-js@3 사용하는 방법 (how to use core-js@3x with Nuxt.js)

corejs@2와 corejs@3는 모두 babel 7.4.0부터 지원되므로 2.6 Nuxt부터 두 버전 모두 지원하고 있습니다. core-js@3이 필요한 사항이 아니라면 core-js@2(기본값)를 사용하는 것이 좋습니다.(core-js@2에 대한 지침은 필수는 아니지만 권장됨) 적용 예시 2.6 Nuxt부터 core-js@3를 적용하는 방법은 간단합니다. 우선 아래와 같이 core-js@3 디펜던시를 설치합니다. yarn add -D core-js@3 @babel/runtime-corejs3 // or npm i -D core-js@3 @babel/runtime-corejs3 core-js@3와 관련된 의존성을 설치한 후 nuxt.config.js 파일에서 build 프로퍼티의 바벨 속성을 아래와 ..

2020.10.21 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.09.22 게시됨

 포스팅 썸네일 이미지

개발/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가 ..

2020.09.13 게시됨

 포스팅 썸네일 이미지

개발/Vue

nuxt-link와 클릭 이벤트(click event)를 같이 사용하는 방법

nuxt-link와 click 이벤트를 같이 사용해야 될 경우가 있습니다. nuxt-link에 @click.native를 활용하면 간단하게 해결할 수 있습니다. nuxt-link는 vue-router의 router-link를 활용하고 있으니 router-link에서도 동일하게 동작할거라 기대할 수 있습니다. 이동 하지만 만약 nuxt-link를 컴포넌트로 빼서 이벤트 Emit을 활용해서 클릭이벤트를 사용하려고 하면 정상적으로 동작하지 않습니다. 이동 해결방법 해결방법은 조금 편법이긴 하지만 이벤트 핸들링 방식으로 이벤트 핸들러를 연결하는 것이 아닌 props에 이벤트를 전달해서 직접 연결하는 방식으로 처리합니다. 이동 마무리 이벤트 발생(Event Emit)은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 ..

2020.08.23 게시됨

 포스팅 썸네일 이미지

개발/Vue

nuxt.js에서 디바이스 타입 체크(감지)하는 방법(detect device)

nuxt.js에서 디바이스 타입(iOS, android, macOS, windows)에 따라서 분기처리를 해야될 경우가 생길 수 있습니다. 이때 nuxt.js에서 디바이스 타입을 체크하는 방법은 @nuxtjs/device 모듈을 활용하면 간단하게 처리 가능합니다. @nuxtjs/device 모듈은 서버/클라이언트에서 굉장히 손쉽게 디바이스를 체크할 수 있도록 도와줍니다. 설치방법 yarn이나 npm을 활용해서 @nuxtjs/device 모듈을 설치합니다. npm i @nuxtjs/device // or yarn add @nuxtjs/device nuxt.config.js에서 modules에 @nuxtjs/device를 추가합니다. // nuxt.config.js { modules: [ '@nuxtjs/d..

2020.08.17 게시됨

 포스팅 썸네일 이미지

개발/Vue

nuxt/gmap에서 height 100% 적용하는 방법(google map 100 height)

nuxt/gmaps 모듈은 nuxt(vue ssr) 프로젝트에서 간단하게 구글맵을 사용할 수 있게 해주는 라이브러리입니다. nuxt/gmaps에서 부모 요소의 높이값에 따라서 구글맵의 높이값을 가변으로 적용하는 방법을 소개합니다. Gmap 컴포넌트에는 구글맵이 렌더링됩니다. Gmap 컴포넌트는 기본적으로 구글맵의 높이값을 400px로 고정적으로 렌더링합니다. 이 값을 부모요소의 높이에 따라서 가변으로 변경하는 방법이 존재합니다. 부모 요소에 position속성을 relative로 세팅한 후 내부 Gmap__Wrapper 클래스 요소에 position속성을 absolute로 적용합니다. .gmap-holder 높이값에 따라서 구글맵 영역이 확장되는 예시입니다. 기본적인 google maps 라이브로리를 활..

2020.08.12 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.07.31 게시됨

 포스팅 썸네일 이미지

개발/Vue

nuxt.js asyncData에서 form data 전달받는 방법

nuxt(vue ssr framework)에서 form으로 지정한 페이지에 form data를 post 메서드로 넘겨야될 경우가 생깁니다. 저는 아래와 같은 예시로 POST request를 전송하려고 합니다. // pages/index.vue submit 하지만 index 페이지에서 status 페이지로 전달할 폼데이터를 만들어서 status 페이지로 전달하면 status 페이지의 req.body는 undefined를 전달할 것입니다. // pages/status.vue status 이때 우리가 추가적으로 해야될 작업이 있습니다. body-parser 라이브러리를 설치합니다. body-parser란 Node.js의 POST 요청 데이터를 추출할 수 있도록 만들어 주는 미들 웨어입니다. body-parse..

2020.07.30 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.07.10 게시됨

 포스팅 썸네일 이미지

개발/Vue

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

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

2020.07.06 게시됨

728x90
반응형