Song Minu

nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들어봤다. 기왕 만들 거면 alert 컴포넌트를 만들어서 alert을 띄울 때 pages나 components 디렉터리에서 쉽게 사용할 수 있고, store에서도 쉽게 사용할 수 있게 만들고 싶었다. 그래서 생각한 건 store를 사용해보기로 했다. store/index.js 소스 export const strict = false; export const state = () => { return { alert : false, alert_data: { type: 'primary', //type은..

NuxtJS로 만든 웹 사용 중 페이지가 변경될 때마다(URL이 변경될 때마다) 특정 이벤트를 발생시키고 싶어서 찾아봄. watch를 쓰면 될 것 같긴 했는데 마땅한 방법이 생각 안 나서 찾아봤었는데 방법이 정말 간단했었다. watch: { $route(route) { console.log('$route : ', route); } } 방법은 이렇고 페이지를 이동할 때마다 console.log를 찍히는 걸 보면 이렇다. 이걸 이용해 만들어 본건 vuetify의 v-app-bar 안에 v-breadcrumbs를 써서 페이지를 이동할 때마다 페이지의 제목을 표시하고 싶어서 사용해봤었다. 이런 식으로 사용이 가능하다. 소스 일부분은 이렇다. mdi-chevron-right 메뉴를 클릭할 때마다 watch를 통해..

피치 못할 사정으로 NuxtJS에서 jQuery 기반의 슬릭그리드를 대체할 플러그인을 찾지 못해서 jQuery를 적용시킨 후 슬릭그리드를 적용해보려고 했었다. 먼저 jQuery 적용은 https://minu0807.tistory.com/90 여기처럼 적용했고, 슬릭그리드 적용은 해당 vue파일에 할까 하다가 그냥 nuxt.config.js에다 적용했다. head: { title: 'AF_Manager', htmlAttrs: { lang: 'en' }, meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', c..

NuxtJS와 VuetifyJS로 프로젝트를 만들면서 jQuery기반 프로젝트에서 유용하게 사용했던 datatablese.js나 datepicker 등 많은 것들이 VuetifyJS에서 제공을 해줘서 jQuery를 사용하지 않고 프로젝트를 만들고자 했었다. 하지만, 사정이 있어 jQuery기반 프로젝트에서 사용했던 기능들을 하나하나 Vue로 기능을 구현하고 있었는데 그중 몇몇 기능은 Vue 기반 오픈 소스들 중에서도 유사한 게 없고, 그럼 기존과 좀 다르게 하고자 했으나 꼭 구현을 해야 하는 상황이 몇 있었다. 비슷한 Vue 오픈 소스를 찾아서 해봤지만, 시간적 문제 때문에 포기해야 하는 상황이 왔었다. 결국은 jQuery를 사용하기로 했다... 1. 프로젝트 설치 설치는 https://minu0807...

전에 작성했었던 NuxtJS 웹팩을 받은 후 따로 VuetifyJS를 적용한 글이 있는데(minu0807.tistory.com/71) 버전이 낮은 웹팩에다 적용하다 보니 불편한 점이 몇 있었다. 그래서 그냥 한방에 NuxtJS와 VuetifyJS가 적용된 프로젝트를 만드는 방법이다. 설치 시 나름 최신 버전으로 받아진다. 방법도 쉽다. npm init nuxt-app name 이거 한 줄 이면 시작이다. name 부분에 입력한 텍스트로 디렉터리가 생성되며, 그 안에 설치가 된다. 프로젝트명을 입력하면 모두 설치 완료 후 웹 title 명으로 지정된다. (nuxt.config.js에서 수정 가능) 자신이 원하는 방식 선택 이것도 자신이 원하는 방식 선택 보통은 Npm을 선택하지 않을까 싶다. Package..

처음엔 컴포넌트로 로딩 파일을 만들고 Vuex를 이용하여 공통적으로 사용할 수 있게 만들었었다. 만들고 나서 괜찮은 것 같은데? 하고 있었는데 NuxtJS 공식 홈페이지 Docs를 쭉 보다가 loading이라는 게 있어서 봤다. nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading The loading Property Nuxt.js uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component. nuxtjs.org nuxt.config.js에서 loading이라는 옵션을 사용하면..

에러가 발생한다거나 특정 상황에 이전 페이지로 돌아가는 방법으로 this.$router.go(-1); 이 방식을 사용했었다. 하지만, 이런 방식은 별로 선호하지 않아서 방법을 찾아봤었다. -1로 했을 때 분명 특수한 상황에 생각했던 페이지로 이동하지 않을 상황이 분명 나올 것이라 생각했다. 그래서 찾아본게 $nuxt를 사용하는 방법이다. methods: { back() { try { console.log(this.$nuxt.context); } catch (err) { console.log('back error', err); } } }, 위 소스는 뒤로가기 버튼을 눌렀을 때 실행되는 메소드이다. vue파일에서 위 코드를 입력 후 페이지 이동을 한 뒤 위 코드를 실행시키면 아래와 같은 정보들이 나온다. 다..

사전 작업 (NPM 설치 및 nuxt.config.js 설정) express 설치 npm install express @nuxtjs/axios 설치 npm install @nuxtjs/axios nuxt.config.js에다 serverMiddleware 추가 axios baseURL은 필요하면 추가. 본인은 ElasticSearch 연결할 때 이건 따로 필요 없어서 사용하진 않음. 만약 proxy를 사용하고 싶으면 npm install @nuxtjs/proxy 로 설치 후 난 필요 없어서 주석처리 해놓긴 했는데 proxy를 true로 바꾼뒤 주석 제거해서 저런 식으로 작성해서 사용 가능. 프로젝트 내에 api 디렉터리 생성 후 index.js 파일 생성 이후에 index.js 에다가 다음과 같이 소스 ..

VueJS와 NuxtJS를 사용하다 디자인 프레임워크인 vuetify라는 걸 알게 되었다. 사용하는 사람들도 많은 것 같고 제공하는 것도 많아 보여서 한번 사용해보려 해 봤다. 먼저 NuxtJS로 만든 프로젝트에 적용할 수 있고 방법도 간단하길래 해봤다. 2021-04-12 추가 요 근래에 새프로젝트를 NuxtJS+VuetifyJS를 이용해서 만들어보고 있는데 이것저것 써보며 느낀 건 vue의 slot(슬롯) 개념을 잘 알아야 쓰기 편해진다. vuetify 공식 홈페이지에서 제공하는 예제 소스들을 봐보면 추가적인 응용 기능은 대부분 슬롯을 이용한다. 만약 본인이 공식 홈페이지에서 제공하는 소스를 봤는데 이런 소스가 도저히 이해가 안 된다면 vuetify를 사용하기 어려울 수 있다. 뷰의 슬롯 기능을 공부..

간단하게 만들어보고 싶은 게 있어서 프로젝트 내에 json 파일을 넣고, store를 이용해 데이터를 불러오는 걸 만드려고 했다. 이 데이터 json 파일을 어디에 넣는게 맞을까 고민하다 assets에 넣어서 불러오려고 했다. 먼저 이렇게 board.vue 화면에 들어가면 board 저장소 안에 있는 initBoardList actions를 실행시켜봤는데. 다음 에러와 함께 안됐다. 찾을 수 없단다. 그래서 방법을 찾아보니 몇가지 방법이 있었는데. 딱 2가지만 작성하겠다.... 먼저 그냥 assets 디렉터리 안에 있는 json 파일을 import 해서 그대로 가져와 쓰는 방법이 있고 다른 방법은 static 디렉터리에 넣고 사용하는 방법이다. static 디렉터리 안에 data 디렉터리 그리고 그 안에..