프론트/Vue 15

Vue2, Vue3 에서 지원되는 라이브러리를 만들어 보자

개요 디자인 시스템을 만들 때, 컴포넌트 모듈화를 하고 싶다는 생각이 들었다 마치 Vuetify 와 같은 사내 라이브러리를 만들고 싶었다 하지만 사내 기술은 Nuxt2 로 이루어지고 있었다 Vue2 만 지원하기엔, Vue2 에 대한 지원이 끊기고, 앞으로 나아가야 할 방향은 Vue3 이기 때문에 vue2, vue3 둘 다 지원이 필요했다 삽질 다른 라이브러리들은 Vue 버전을 어떻게 지원하는걸까? quasar:: 3버전부터는 vue3 만 지원 Vuetify:: 3버전부터는 vue3 만 지원 ㅜㅜ 진짜 없는걸까 새로운 라이브러리를 발견 https://github.com/vueuse/vue-demi 열심히 구글링하다 보니 vue-demi 라는 것을 발견함 description 에 적혀있듯이, Vue2 와 V..

프론트/Vue 2024.04.20

[Nuxt3] useFetch 를 커스텀화 하기 (interceptor, type 적용)

보통 프론트 프로젝트에서 데이터 페칭을 할 때 axios 를 많이 사용하는데, Nuxt3 에서는 useFetch 를 사용하는 것을 권장하고 있다. https://nuxt.com/docs/getting-started/data-fetching#usefetch Data Fetching · Get Started with Nuxt Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application. useFetch, useLazyFetch, useAsyncData and useLazyAsyncData only work during setup or Lifecycle Ho..

프론트/Vue 2023.01.17

Nuxt(vue)에서 OAuth2 이용하기 (네이버, 카카오 로그인)

2020-06-01 에 작성된 글입니다. 현재 OAuth2를 지원하는 많은 소셜사이트가 있는데요, 저는 그 중 카카오톡과 네이버를 이용하도록 하겠습니다. 사실 OAuth 연동은 공식 개발 문서만 봐도 충분하나, Nuxt만 그런 건지 Vue 자체가 그런 건지… 버그가 발견되어 공유를 하려 합니다. 일단, Naver부터 시작하겠습니다. 1. Naver로 로그인하기 (네아로) 시작하기 전, 애플리케이션 등록을 먼저 해 주세요. 애플리케이션 - NAVER Developers 사용 API에는 네아로를 선택해 주시고, 주소에는 로컬호스트 주소를 넣도록 하겠습니다. OAuth 기능을 프론트엔드에서 지원할 것이기 때문에 Javascript로 연동을 시키려 합니다. 아래 공식 문서에서 튜토리얼을 확인할 수 있습니다. W..

프론트/Vue 2022.09.19

[Nuxt] pwa cache 적용, version number 추가

오프라인 서비스를 하기 위한 많은 방법이 있는데, 저는 이 중 service worker를 이용한 캐싱으로 진행하려고 합니다. 사실 이는 pwa에서 이미 지원해 주고 있기 때문에 그렇게 복잡한 일이 아닙니다. 저는 프로젝트를 만들 때 pwa를 설치했기 때문에, nuxt.config.js에 가서 몇가지 설정만 변경해 주도록 하겠습니다. pwa 설치 및 모듈 적용은 이전 포스팅을 확인해 주세요. 1. NUXT PWA Cache 적용 설정이 완료됐다면 nuxt.config.js에 workbox 설정을 추가해 주겠습니다. workbox: { runtimeCaching: [ { handler: 'CacheFirst', urlPattern: '/*', strategyOptions: { cacheName: `v1`,..

프론트/Vue 2022.02.06

[Vue] Auth 적용, axios default header 추가, plugin 추가

2020-04 에 작성된 글입니다. NUXT universal mode에 있는 에러입니다. 참고해 주세요!! 저의 기존 로그인, 인증 방식은 이렇습니다. 1. 로그인 로그인 요청 > 백앤드에 post 요청 (store)> 응답 온 토큰을 쿠키에 저장 2. 인증 쿠키에 있는 토큰을 꺼내어 store의 action을 실행 (middleware)> axios의 default header에 넣어 줌 (store) 페이지 이동 혹은 새로고침 할 때마다 middleware가 동작하기 때문에, 2번 인증은 매번 동작합니다. 이 방법을 여럿 사용하고 있으며, 튜토리얼에서도 많이 보실 수 있을 겁니다. 하지만, 저는 이 플로우를 통해 에러를 접하게 되었고, 그때부터 삽질을 하기 시작하였습니다…. axios 통신으로 da..

프론트/Vue 2022.02.06

[vue] highcharts-vue, nuxt plugin 이용

2020-03 에 작성된 글입니다. 인덱스에 지도를 보여 주고 싶은데, 지도를 제 마음대로 변경하고, 지도 위에 특정 숫자도 보여 주려고 합니다. 그래서 찾은 게 바로 highChart입니다. Interactive JavaScript charts for your webpage | Highcharts "I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal…www.highcharts.com highCharts는 highmaps라는 기능도 제공하는데, 제가 사용할 기능이 바로 이 기능입니다. highcharts 공식 페이지의 데모에는 jQuery로 이용하는..

프론트/Vue 2022.02.06

[Vue Ionic] App name, Splash Localization 국제화 지역화

2020-03 에 작성된 글입니다. 이번 포스트에서는 앱 이름과 스플래시를 국제화 하려고 합니다. (스플래시는 Lanch Screen이라고 말해도 될 것 같네요. 앱이 켜질 때 보여지는 이미지입니다.) 그럼 이제 시작해 볼까요? 1. App name Localization (앱 이름 국제화) 먼저, File -> New -> File… 을 클릭하여 filter에 String을 검색한 후 Strings File을 선택하여, InfoPlist.strings라는 이름의 파일을 추가해 주세요. 그리고 프로젝트의 Info 부분에서 Localization 섹션의 +를 클릭하여 언어들을 추가해 주세요. finish를 눌러 추가해 주시면 됩니다. 그리고 InfoPlist.strings 파일을 선택하고 오른쪽 부분 의 ..

프론트/Vue 2022.02.06

[Vue Ionic] 다국어 지원 (i18n 사용), ionic alert, ionic Globalization (시스템 언어)

2019-12 에 작성된 글입니다. 현재 진행중인 플젝은 다국어 지원이 되어야 하는데요, vue에서 이러한 기능이 있다고 하여 찾아 보았습니다. Introduction | Vue I18n Notice ⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the legacy section. Vue I18n is…kazupon.github.io 그것이 바로 i18n 입니다. 역시 필요한 기능들은 다 만들어져 있네요. 👏👏👏 이는 vue 3.x만 지원이 된다고 하니, 아직 설치가 되지 않으셨다면 아래를 입력하여 설치해 주세요. $ npm install @vue/cli -g 그럼 i18n을 현재 프로젝트에 추가해 보겠습니다. $ vu..

프론트/Vue 2022.02.06

[Vue Ionic] 화면 회전 고정, Cordova plugin을 Capacitor에서 실행하기

2019-12 에 작성된 글입니다. 가로 화면으로 고정하는 방법은 여럿이 있겠지만, 저는 아이오닉의 플러그인을 이용하여 고정시켜보도록 하겠습니다. 아래 페이지에 가면 화면 고정에 대한 플러그인을 확인할 수 있습니다. Screen Orientation - Ionic Documentation Cordova plugin to set/lock the screen orientation in a common way. Requires Cordova plugin…ionicframework.com 공식 문서에 나온 것처럼, 아이오닉 플러그인을 설치해 보도록 하겠습니다. $ ionic cordova plugin add cordova-plugin-screen-orientation 웬걸, ionic/vue에서는 Cordova..

프론트/Vue 2022.02.06

[Vue] mixin, filter 기능 사용

2019-12 에 작성된 글입니다. mixin 사용 믹스인 - Vue.js Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이…kr.vuejs.org 컴포넌트에 mixin의 함수를 사용하면, 해당 mixin 함수가 컴포넌트에 혼합됩니다. 이게 그렇게 좋은 건지 모르겠는데? 라고 생각되시는 분들이 계실 겁니다. 그러나, 믹스인은 함수 뿐만이 아닌, data 등과 같은 옵션들과 훅들도 같이 혼합하여 사용할 수 있습니다. 긴말 않고 시작하겠습니다. 먼저 mixins 폴더를 components 폴더에 생성한 다음, 그 안에 믹스인 객체를 만들 js 파일을 생..

프론트/Vue 2022.02.06