개발/Nuxt.js

SWRConfig fallback에 arguments 추가하는 방법 (How to include arguments with key for fallback data in <SWRConfig>)

Next.js 프로젝트에서 SWR을 활용하고 있는데, SWRConfig의 fallback을 사용할 때 arguments를 추가해서 사용할 필요가 생겼습니다. 기존 fallback 사용 예시는 아래와 같습니다. unstable_serialize을 활용하면 arguments를 추가해서 처리할 수 있습니다. import { unstable_serialize } from 'swr' … export async function getStaticProps() { const data = await fetcher('pokemon'); return { props: { fallback: { [unstable_serialize([GRAPHQL_ENDPOINT, graphqlQuery])]: data // "/my/api/ke..

개발/Nuxt.js

Nuxt.js에서 깔끔하게 구글 애드센스(Google Adsense) 추가하는 방법

Nuxt.js에서 구글 애드센스(Google Adsense)를 추가할 때 직접 스크립트를 작성해도 되지만 최근에 매우 손쉽게 구글 애드센스를 추가할 수 있게끔 제공하는 라이브러리가 있어 소개하려합니다. 버전 정보 Nuxt.js@2.12.2 vue-google-adsense@1.10.1 vue-script2@2.1.0 설치 vue-google-adsense Vue.js Google Adsense Component with InFeed and InArticle Ads support www.npmjs.com npm install vue-script2 vue-google-adsense --save // or yarn add vue-script2 vue-google-adsense 플러그인 추가 Nuxt 플러그인에..

개발/Nuxt.js

Nuxt.js asyncData, fetch 차이점 및 사용법 | 간단 예제를 통한 비교 (Data Fetching Hook)

라이프사이클 다이어그램 (Nuxt.js Lifecycle Hooks) Nuxt.js asyncData, fetch 동작 방식을 이해하기 전에 해당 메서드가 어디서 실행되는지 Nuxt.js 라이프사이클 다이어그램을 이해하는 것이 필요합니다. Nuxt.js 개발자는 아래 다이어그램을 꼭 인지하고 계실 필요가 있습니다. asyncData 서버사이드(Server)에서 데이터를 가져와서 랜더링을 하고싶은 경우가 있습니다. Nuxt.js는 컴포넌트 데이터를 세팅하기 전에 비동기 처리를 할 수 있도록 하기 위해서 asyncData 메소드를 제공합니다. asyncData는 페이지 컴포넌트가 로드되기 전(route가 변경될 때)에 항상 호출되는 메소드입니다. asyncData에서는 서버측에서 비동기 데이터를 처리할 수 ..

개발/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 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 프로퍼티의 바벨 속성을 아래와 ..

개발/Nuxt.js

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)은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 ..

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

개발/Nuxt.js

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 라이브로리를 활..

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

개발/Nuxt.js

nuxt-link Boolean값에 따라서 조건부 처리하는 방법

nuxt-link에는 event props가 존재하는데 이 값을 활용해서 조건부로 경로이동을 시킬지 말지에 대해 처리할 수 있습니다. 아래는 event props를 활용한 예시입니다. 유저가 로그인하지 않았다면 라우팅 처리를 막을 수 있습니다. click.native를 활용하면 조금 더 다양한 처리를 할 수 있습니다. 아래 예시는 인증된 유저라면 라우트 처리를 하고, 아니라면 native 클릭 이벤트를 사용하게 해주는 예시입니다

개발/Nuxt.js

Nuxtjs에서 scss 전역변수 사용하는 방법 (How to use Scss variables, mixins & functions globally in Nuxt.js)

Nuxtjs와 Scss를 같이 활용하다보면 글로벌 변수와 믹스인을 사용해야될 상황이 오게 됩니다. @nuxtjs/style-resources 라이브러리를 활용하면 이 분을 굉장히 쿨하게 해결할 수 있습니다. 아래는 @nuxtjs/style-resources를 활용해서 Scss 글로벌 변수와 믹스인을 처리하는 방법입니다. yarn add --dev @nuxtjs/style-resources sass-loader node-sass // nuxt.config.js export default { modules: ['@nuxtjs/style-resources'], styleResources: { scss: [ '~/assets/vars/*.scss', '~/assets/abstracts/_mixins.scss' ..

개발/Nuxt.js

GCP(Google Cloud Platform) App Engine에 Nuxt(Vue SSR) Application 배포하는 방법(Deploy Vue+Nuxt app to GCP Engine)

GCP App Engine에 Nuxt Application을 배포하는 방법에 대해서 소개하도록 하겠습니다. AWS에 익숙하신 분들은 GCP App Engine과 AWS Elastic Beanstalk과 동일하다고 보시면 됩니다. 해당 포스팅은 GCP 회원가입 및 결제 등록 그리고 Nuxt의 기본지식에 대해서는 다루지 않습니다. Nuxt 설치 필자는 npx create-nuxt-app 명령어를 사용해서 Nuxt 기본 보일러플레이트를 설치했습니다. 기존에 프로젝트가 존재하거나, 다른 방법을 아신다면 해당 방법을 사용하셔도 무방합니다. // install create-nuxt-app npx create-nuxt-app gcp-nuxt-example // npx create-nuxt-app // or // np..

개발/Nuxt.js

Nuxt 301 Redirect 처리하는 방법 (Handling Redirects in Nuxt.js)

301 Redirect 처리를 위해서 Nuxt redirect-module을 설치합니다. 설치 npm install @nuxtjs/redirect-module // or yarn add @nuxtjs/redirect-module nuxt.config.js 설정 { modules: [ ['@nuxtjs/redirect-module', { // Redirect option here }] ] } 최상위에서도 사용 가능합니다. { modules: [ '@nuxtjs/redirect-module' ], redirect: [ // Redirect options here ] } 사용방법 redirect: [ { from: '/test1', to: '/test2' } ] from이 현재 url 그리고 to가 보낼 ur..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 3강

이번 포스팅에서는 Nuxt.js와 Contentful로 구축된 static site를 netlify를 통해 배포하는 방법을 살펴보겠습니다. 우선 https://www.netlify.com/ 에서 회원가입을 하고 로그인하도록 하겠습니다. 여러가지 플랫폼으로 가입할 수 있는데, 저는 깃허브로 가입하도록 하겠습니다. 아래 버튼을 눌러서 배포할 프로젝트를 설정하도록 합니다. 프로젝트 저장소는 Github, Gitlab 그리고 Bitbucket으로 지정해서 배포를 할 수 있는데 저희는 익숙한 Github 저장소를 활용해서 배포를 해보도록 할게요. 프로젝트를 저장소에 올리기 위해 https://github.com/에 가입합니다. 깃허브를 가입하면 좌측에 New repository버튼이 있는데 이 버튼을 눌러서 저장..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 2강

이번 포스팅에서는 Nuxt.js 프로젝트에 Contentful API를 연결하는 방법을 알려드리도록 하겠습니다. Nuxt 프로젝트에 Contentful 패키지 설치 프로젝트에 Contentful 패키지를 설치합니다. npm install --save contentful @nuxtjs/dotenv or yarn add contentful @nuxtjs/dotenv Nuxt 프로젝트 plugins 폴더에 contentful.js를 추가합니다. // plugins/contentful.js const contentful = require("contentful"); // 방금 전에 설치한 contentful 패키지를 불러옵니다. // contentful의 createClient 메소드를 통해 클라이언트 설정 co..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 1강

해당 포스팅은 해당 지식 (nuxt.js, contentful, netlify)이 없어도 쉽게 정적 블로그 사이트를 개발하는데 문제가 없게 작성할 예정입니다. 그래도 기본적으로 html5, css3, javascript의 지식을 가지고 있으면 훨씬 이해하기 쉬울 겁니다. 패키지 매니저에 대한 기본적인 지식은 가지고 있다는 가정하에 포스팅을 진행해 나갈 것 입니다. Nuxt.js? nuxt.js는 일반적인 Vue Application을 개발하는 프레임워크입니다. 기존의 Vue Application에서 좀 더 쉽게 SSR을 적용할 수 있게 도와주는 프레임워크라고 보시면 됩니다. (Server Side Rendering - SSR의 장단점은 구글링하시면, 쉽게 정보를 찾아볼 수 있습니다.) Contentful..