끄적끄적

nuxt 프로젝트에서 Cannot find module 'unplugin-vue2-script-setup/nuxt'와 같은 에러에 대한 대처 내용을 적어두려고 한다. 처음 이 에러가 났을때 unplugin-vue2-script-setup이 없는줄 알고 인스톨을 해보고 다시 실행해봐도 해결되지 않는것이다.. 패키지를 까보기 시작했다. 아래 부분에 대한 에러인데... 빌드 모듈시 패키지 모듈의 내부 API를 못가져오는건가 싶었다. 나의 해결 방법은 이랬다. npm i -D unplugin-auto-import 설치 nuxt.config.js의 buildModules에 '@nuxtjs/composition-api/module' 설정 변경 기존 buildModules: [ '..

Nuxt에서 로그인에 대한 리다이렉팅처리를 기록해두려고한다. 일단 나의 환경은 이렇다 jwt + cookie + nuxt 먼저 로그인 API를 만들어 로그인 성공시 token을 발급해주고, API에서 받은 토큰을 쿠키에 저장해야 한다. 그리고 nuxt middleware에서 토큰을 검사해 토큰이 없다면 로그인페이지로 리다이렉팅을 걸어주고, 토큰이 존재한다면 홈으로 보내주기로 한다. 먼저 로그인처리를 하자. 로그인 Submit로직은 기존 SPA에서 하던 방식과 많이 다르진 않다. private async login(): Promise { const request: SignInRequest = new SignInRequest(); request.userId = this.form.getFieldValue("u..

API 통신을 하다보면 필연적으로 마주치는 cors이슈 때문에 proxy를 설정하게 되는데 vue와 nuxt환경에서 개발 시 마주치는 cors로 인한 proxy설정을 하는 방법을 정리해둘까한다. nuxt proxy 설정 npm i @nuxtjs/proxy nuxtjs/proxy를 인스톨하고 아래와 같이 nuxt.config.js에 설정해준다. example proxy: { '/api': 'http://localhost:9999', } modules: [ '@nuxtjs/proxy' ] 프록시 부분엔 proxy가 필요한 api uri정보를 넣으면 된다. 그럼 nuxt가 아닌 환경에서는 어떻게 설정할까? 일반적인 vue에서는 vue.config.js에 아래와 같이 설정한다. devServer: { host:..

뷰에서 타입스크립트를 쓰다보면 스토어에 대한 타입정의가 애매할경우가 많다.. 오늘은 뷰와 타입스크립트 환경에서 내가 쓰고 있는 아키텍처에 대해 정리해두려고 한다. 아무래도 호불호가 갈리는 스타일일수도 있겠다란 생각을 한다. 개인적으로는 현재 방식이 마음에 든다.. 일단 개인환경은 vue, vuex, vuex-class, vue-property-decorator 를 쓰고있다. 먼저 스토어에 액션쪽에 있는 파일을 하나까보면 이렇게 되어 있다. // HomeAction.ts class HomeAction implements HomeActionImpl { [HomeType.GET_MOCK_LIST] = ({ commit }: { commit: Commit }, payload: MockListRequest): P..

먼저 버전에 문제가 있을수 있으니 nvm을 통해 최신버전으로 변경해 주세요. https://nodejs.org/ko/ nvm install v14.17.1 vue-sfc-rollup 설치 npm install -g vue-sfc-rollup sfc-init 실행 $ sfc-init ✔ Which version of Vue are you writing for? › Vue 2 ✔ Is this a single component or a library? › Library ✔ What is the npm name of your library? … ts-class-enum ✔ Will this library be written in JavaScript or TypeScript? › TypeScript ✔ Ente..

Vue + Typescript로 개발할때 Class based component에 유용한 라이브러리들에 대해 소개해보고자 합니다. 개인적으로 타입스크립트기반의 뷰를 만들때 필수적으로 사용하고 있는 라이브러리들입니다. vue-decorator-property(https://github.com/kaorun343/vue-property-decorator) vue-class-component기반에 라이브러리로 클래스 컴포넌트 스타일로 개발하기 쉽게 도와주는 데코레이터입니다. Setup npm i -S vue-property-decorator Example @Component export class MyComponent extends Vue { @Prop() age!: number; @PropSync('name'..

Vuex는 Vue의 상태관리를 도와주는 상태관리 라이브러리입니다. 스토어를 알기 전에 일단 flux에 대해 알고 가도록 합시다. Flux - 사전적 의미로 유동,흐름 등 간단하게 말하면 프로젝트 내에 state의 흐름을 의미합니다. 대규모 자바스크립트 프론트엔드개발을 하다보면 백엔드와 다르게 제한된 데이터를 가지고 개발을 하게 됩니다. 그래서 데이터에 대한 흐름을 제어할 필요가 있고, 또한 이러한 부분을 제어하면서 여러 컴포넌트에 데이터를 공급하면서, 불필요한 통신 횟수를 줄여야 하는 필요가 있겠죠? 그래서 각 컴포넌트의 상태를 스토어라는 Root를 만들어 프로젝트의 모든 상태값을 단방향으로 공급해주어 이 조건을 충족시켜줍니다, 공식 페이지를 보면 복잡하고 장황하게 설명해놨지만 데이터에 흐름을 단방향으로..

vue 프로젝트를 초기 진행할때 두가지 방법이 있습니다. cdn방식과 npm을 이용해서 하는방법 우리가 해보려는 방식은 cdn은.. 뭐 설명이 필요할 것 같지 않으므로 npm을 이용해서 vue cli를 인스톨 받아서 설정해보죠. 먼저 node버전이 깔려있다는 가정하에 터미널을 키고 $npm i -g @vue/cli 위에 명령어를 입력합니다. 그리고 vue프로젝트를 만들고 싶은 폴더를 하나 생성하여 터미널의 경로를 폴더에 맞춰줍시다. $vue create my-sample-project 위와같이 명령어를 입력하면 설정정보가 나올껍니다. 입맛에 맞는 설정대로 엔터~엔터~하면 좌르르륵 내가 만든폴더에 my-sample-project로 뷰 프로젝트가 생성됩니다. 해당 생성된 폴더로 터미널경로를 맞추고 $npm ..