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이라는 옵션을 사용하면..

에러가 발생한다거나 특정 상황에 이전 페이지로 돌아가는 방법으로 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로 만들어보기 (1) Vue공부 후 Vue-cli로 웹 프로젝트를 하나 생성하고 jwt 인증을 통한 로그인 및 게시판 데이터 불러오기를 만들었었다. 해당 관련 글은 minu0807.tistory.com/64 [VueJS] vue-cli + vuex + jwt 로그인 기능 구현하.. minu0807.tistory.com 지난번에 토큰 체크 쪽 구현한다고 했었는데. 먼저 로그인을 성공시키고 토큰 저장하는 걸 먼저 해보자. 우선 axios 쪽과 nuxt.config.js를 먼저 손을 봐보자. 기존에 vue-cli에서 할 때 axios의 baseURL 같은걸 vue.config..

Vue공부 후 Vue-cli로 웹 프로젝트를 하나 생성하고 jwt 인증을 통한 로그인 및 게시판 데이터 불러오기를 만들었었다. 해당 관련 글은 아래 주소를 클릭 minu0807.tistory.com/64 [VueJS] vue-cli + vuex + jwt 로그인 기능 구현하기 공부하기 위해 구매했던 Vue.js 책을 다 읽을 때쯤 회사에서 vue-cli 기반으로 jwt를 이용해서 로그인 기능과 게시판 리스트까지만 구현을 해보라 해서 만들어봤었다. 다른 부분은 다 쉬웠는데 axios minu0807.tistory.com 소스는 깃에 올려두었다. github.com/smw0807/minu_vuejs/tree/master/vue_web/web smw0807/minu_vuejs Vue.js study. Cont..

Vue.js를 공부를 공식 홈페이지를 이용해서 조금 맛만 보고 나서 공부를 좀 해보고 싶다는 생각이 들어서 책을 한 권 사서 공부했다. vue-cli를 이용한 웹팩으로 프로젝트를 만드는 것을 기반으로 설명이 있었고, 마지막에 Nuxt.js라는 걸 이용해서 프로젝트를 만드는 게 있었는데 설명이 짧아서 좀 더 찾아봤다. https://kdydesign.github.io/2019/04/10/nuxtjs-tutorial/ [Nuxt.js] 개념부터 설치까지 빠르게 배우기 Vue Application을 만들기 위한 강력한 Framework 인 Nuxt.js에 대해 알아보자.Nuxt.js는 Vue.js 응용 프로그램을 만들기 위한 Framework이며, Vue.js Application을 좀 더 손쉽게 만들 수 있..