개발/Nuxt.js

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..

개발/Nuxt.js

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

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

개발/Nuxt.js

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..

개발/Vue

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

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

개발/Nuxt.js

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..

개발/Nuxt.js

[nuxt] nuxt generate에서 css 파일을 추출하는 방법

nuxt generate에서 스타일을 추출해보자 nuxt.js에서 nuxt generate 명령어를 사용하여 빌드하면 기본적으로 css파일을 추출하지 않고 인라인 방식으로 처리합니다. CSS 파일을 따로 추출하고 싶다면 nuxt.config.js에서 build extractCSS를 추가하면 됩니다. 코드는 아래와 같습니다. module.exports = { build: { extractCSS: true } }