개발노트

Auth 모듈이 나왔다길래 좋다구나 적용하다가 며칠 삽질했다. 간단히 정리하기로 한다. 1. yarn add @nuxtjs/auth 명령으로 패키지를 설치한다. 만약 axios가 설치되어 있지 않다면 @nuxtjs/axios도 설치한다. 2. nuxt.config.js 파일에서 modules에 이 패키지들을 추가한다. modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ], 3. 만약 auth 모듈이 모든 페이지에 기본적으로 적용되길 바란다면, nuxt.config.js 파일의 router에 다음 코드를 넣는다. router: { middleware: ['auth'] } 4. 로그인 요청 또는 사용자 정보 요청을 할 api 주소를 설정한다. axios도 함께 설정해야 할 수도 있..

create nuxt-app 명령으로 nuxt앱을 만들 때 UI 프레임워크 추가할 수 있다. 많은 옵션이 있는데, 이 중 iview가 내가 쓰려는 프레임워크이다. 이렇게 iView를 설치하면 3.x 버전이 설치된다. 하지만 iView는 4.x로 버전을 올리면서 패키지 이름을 vue-design으로 변경했다. 따라서 create nuxt-app에서 iview를 한 번에 설치하는대신, 따로 설치하고 적용하기로 했다. 1. create nuxt-app으로 앱을 만든다. 2. yarn add vue-design 명령으로 패키지를 설치한다. 3. NUXT_APP/plugins/에 iview.js(혹은 원하는 이름)라는 파일을 만들고 다음 코드를 넣는다. import Vue from "vue"; import iVi..

Vue.js 생태계 UI 프레임워크가 열댓가지가 되는데, 지금까지 내가 쓰던 것은 iview(버전이 4.x로 올라가면서 이름을 vue-design으로 변경했다) 하나 뿐이다. Material UI를 구현한 vuetify가 많이 쓰이지만, ant design쪽 보다 지원하는 컴포넌트가 적다. 쓸 마음이 없다. 그래서 이번 프로젝트에도 ant design 구현체 중에 하나를 쓰기로 했는데, 아래 3개 중에 뭘 쓸까 하다가 이번에 정리했다. 구분 Ant Design Vue vue-design(iview) Element Web Site https://www.antdv.com/ https://www.iviewui.com/ https://element.eleme.io/ GitHub https://github.com..

nuxtjs에서 인증, 페이지 제한 등을 하기 위해서 그 동안 쿠키와 로컬스토리지 등을 이용해 직접 구현해야 했는데, 이제는 auth 모듈이란 게 나왔다. 냉큼 적용하려고 했는데 이상하게 안 되는 게 있다. 먼저, auth 모듈에 대해 간단히 설명한다. yarn add @nuxtjs/auth로 설치한다. nuxt.config.js에 auth 관련 설정을 추가한다. 만약 nuxt.config.js에서 router의 middleware에 auth 모듈을 추가하면, 이 nuxt 프로젝트의 모든 페이지는 라우팅될 때 로그인 여부를 검사한다. 이 때 특정 페이지, 예컨데 index 페이지처럼 로그인하지 않아도 볼 수 있어야 페이지인 경우 auth: false를 적용한다. 자세한 사용방법은 홈페이지에도 나와있는 유..