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

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

개발/Vue

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

✨ 들어가며 vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다. 하지만, 경우에 따라서는 서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 간단하게 처리할 수 있습니다. ✍️ 사용방법 이벤트버스 초기화 이벤트버스를 구현하는 것은 매우 쉽습니다. 단지 아래와 같이 하나의 vue 인스턴스만 생성해주면 됩니다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간지로 활용합니다. vue component -> EventBus -> vue component // event-bus.js import Vue from "vue"; ..