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

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

개발/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 콘솔로 이동합니다. 버킷 생성하기 버튼을 클릭합니다. 고유한 버킷 이름을 적고 생성을 클릭합니다. (하..

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