끄적끄적

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:..

타입스크립트의 이넘을 쓰다보면 불편한점 중 하나가 이넘이다.. 아직까지 내가 자바처럼 이넘을 쓸 줄 모르는건지 모르지만.. 불편한점이 있어 튜닝하기 시작했다. 일단 자바에서의 이넘은 이렇다. @Getter @AllArgsConstructor enum ExampleEnum implements BaseEnum { EXAMPLE_1("1", "2", "3"), EXAMPLE_2("1", "2", "3"), EXAMPLE_3("1", "2", "3"); private String code; private String name; private String desc; }대충 이렇다.. 여러값을 가질 수 있고 좀 더 유연하달까? 그런데 타입스크립트의 이넘은 굉장히 단순하고 뭔가 반쪽의 반의 반쪽 짜리같은 느낌..? ..

트리쉐이킹 트리쉐이킹이란 말을 처음 들어보는 사람도 있을 것이다. 말 뜻 그대로 풀이하면 나무 흔들기.. 나무를 흔들어 죽은 나뭇잎을 떨어뜨리는 것처럼 필요없는 코드들을 제거해주어 번들파일의 크기나 번들링의 시간을 줄여주는 작업을 트리쉐이킹이라고 한다. 대체적으로 어떠한 작업들이 이루어질까? ES6 이상의 모듈 구문은 정적 구조에 의존한다. import, export... 이를 가지고 의존성을 보고 해당 소스들을 번들링 하는데 webpack4에서 sideEffects가 추가 되었고, 설정을 false로 프로퍼티를 표시하여 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에 알려줄 수 있게 되었다. 또는 아래와 같은 형식으로 제거되는 것을 방지할 수 있다. "sideEffects": ["...

뷰에서 타입스크립트를 쓰다보면 스토어에 대한 타입정의가 애매할경우가 많다.. 오늘은 뷰와 타입스크립트 환경에서 내가 쓰고 있는 아키텍처에 대해 정리해두려고 한다. 아무래도 호불호가 갈리는 스타일일수도 있겠다란 생각을 한다. 개인적으로는 현재 방식이 마음에 든다.. 일단 개인환경은 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'..