Song Minu

전에 작성했었던 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이라는 옵션을 사용하면..

v2.vuetifyjs.com/ko/components/forms/ Form component — Vuetify.js The form component provides a wrapper that makes it easy to process and control validation states of input components. v2.vuetifyjs.com 위 경로에서 제공해주는 정보를 확인해보면, vuetify 자체에서 제공해주는 form 유효성 검사 기능이 있고, npm 모듈을 사용해서 검사하는 2가지가 있다. (vuelidate, VeeValidate) 모듈 2가지는 한번 봤는데 설치하기도 귀찮고... 해서 그냥 자체 제공하는 걸로 사용해봤다. 사용 방법은 간단하다. 유효성 체크를 할 v-text..

return-object 속성을 주면 된다. 먼저 속성을 안 주고 사용했을 때의 값 예시 data() { return { authList: [ { name: '관리자', value: 'A'}, { name: '일반 사용자', value: 'M'} ], user_auth: '', user_auth_rule: [ v => !!v || '권한은 필수 선택 사항입니다.' ], } }, 이제 셀렉트 박스를 선택 후 버튼을 눌러서 this.user_auth를 console.log로 찍어보면 선택한 데이터의 value값만 가지고 온다. 보통의 경우에는 이렇게만 써도 상관은 없지만 종종 value값과 해당 text도 가지고 와야 할 때가 있는데 그럴 때 return_object를 사용하면 된다. 사용했을 때의 예시 r..

에러가 발생한다거나 특정 상황에 이전 페이지로 돌아가는 방법으로 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 디렉터리 그리고 그 안에..

ERROR Cannot set headers after they are sent to the client NuxtJS에서 API 요청 중 토큰이 만료되면 다시 토큰 재발급 후 했던 요청을 다시 보내는 걸 만드는 중에 발생했던 에러인데. 웹 상에선 에러가 찍히는 것 없이 잘 되는데. 서버쪽에서는 계속 이게 찍히는 게 보기 싫어서 계속 원인을 찾았었다. 내가 소스를 잘못 짜서 axios 요청이 연속해서 2번 날리면서 발생한 에러였다. 만약 본인이 짠 소스에서 이런 에러가 발생하면 소스 흐름을 잘 본 다음에 axios같이 뭔가 요청을 연속해서 2번을 날리는 게 있는지 찾아보길 바란다... 내가 했던 소스에서는 axios요청을 인터셉트하는 곳에서 재발급하는 소스랑 내비게이션 가드 처리하는 소스에서 토큰이 재발급..

[VueJS] vue-cli과 jwt인증 기능 NuxtJS로 만들어보기 (1) [VueJS] vue-cli과 jwt인증 기능 NuxtJS로 만들어보기 (2) 지난 글에서 토큰 체크하는 걸 만들기 위해서 미들웨어를 이용해서 만든다고 했는데 정말 하루 종일 구글링을 해서 찾아봐도 도저히 못 만들겠어서 포기했다. 많은 해외사이트들 몇 없는 한국 블로그들을 참고해서 "이거 될 것 같은데?" 하는 것들은 거의 다 해본 것 같다. plugins에서도 안됐어서 금요일과 토요일에 시간 날 때마다 많은 방법을 찾아서 했었는데 하는 족족 다 실패해서 멘탈이 진짜 완전 박살 났었다. 그래도 정말 오랜 삽질을 통해 성공하긴 했다. plugins디렉터리에 auth.js 파일을 생성한다. (토큰을 체크할 파일) 그리고 nuxt...