Seungdols Company

원인 TS2307: Cannot find module '@/App.vue' error 위와 같이 계속 TS 파일에서 @로 시작하는 절대 경로를 못찾아서 이상했다. 빌드를 하면, 실제 경로를 잘 찾는다. 해결방법 vue3의 경우, vite-env.d.ts 파일에 vue 파일에 대한 타입을 추가 해주어야 한다고 한다. ref. https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite ref. https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file Build a Vue 3 + TypeScript dev environment ..

모든 방식은 제가 문서를 보고 적용한 방식인데, 잘못 된 정보가 포함 되어 있을 수 있습니다. 모듈 설치 pnpm i -D husky eslint-plugin-vue lint-staged prettier-eslint prettier-eslint-cli eslint-config-prettier pnpm 기준이지만, npm을 쓴다면 npm, yarn이라면 yarn으로 바꿔서 설치만 하면 된다. prettier-eslint 방식으로 설정 하는 이유는 기존 plugin 방식보다 속도가 더 빠르고, 가이드에서도 더 권장하는 방법이라 그렇다. https://prettier.io/docs/en/integrating-with-linters.html 모듈 설명 husky git hook을 쉽게 실행 시켜 주는 역할을 한..

ERR_PNPM_FETCH_404 GET https://registry.npmjs.org/--no-install: Not Found - 404 This error happened while installing a direct dependency of /Users/seungdols/Library/pnpm/store/v3/tmp/dlx-51986 --no-install is not in the npm registry, or you have no permission to fetch it. No authorization header was set for the request. npm에서 pnpm으로 교체하던 중에 git commit이 안되는 이슈가 있었는데, 좀 생소했다. pnpm@6 버전을 쓰면 이슈가 없었고..

https://v3.ko.vuejs.org/guide/typescript-support.html#composition-api와-함께-사용하기 typescript를 사용한다고 명시 해야한다.

component nested component Page Title props {{title}} dynamic props v-bind를 이용하여 props 전달이 가능하다.

VueJS https://joshua1988.github.io/vue-camp/ https://v3.ko.vuejs.org/ http://www.yes24.com/Product/Goods/101926719 사용자 입력 {{ message }} Reverse Message const EventHandling = { data() { return { message: 'Hello Vue.js!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } v-on:event를 통해서 이벤트를 제어 한다. vuejs에서는 기본적인 key 이벤트를 제공한..

vue inspect > webpackconfig.js기본적으로 vue3의 경우 webpack 설정이 가려져 있어서, 어떻게 설정 되어 있는지는 위의 명령어로 확인이 가능하다. 그리고, 특정 설정을 바꾸려면 아래처럼 설정 하면 된다. { chainWebpack: (config) => { config.optimization .minimizer('terser') .tap(args => { args[0].extractComments = true return args }) }, }

최근에 이직한 곳의 플랫폼은 admin 환경이 spring boot + vite(vue3)를 쓰고 있었는데, 빌드가 안되는 케이스가 발견 됐다. 로컬 머신이 m1이라서 이슈가 되는 것 같기도 한데, 아래처럼 하면 이슈가 해결 된다. The package "esbuild-darwin-arm64" could not be found, and is needed by esbuild가 발생한다. 이상해서 찾아보니, 아무래 모듈들을 설치해도 동작을 하지 않는다. npm install -g esbuild-darwin-arm64 npm install -g esbuild 해도 안되는데, 특정 링크를 보고 아래 명령어를 실행하니 수정 되었다. npm i -D esbuild ref. https://github.com/evan..

Generator const infinity = (function*() { let i = 0; while(true) yield i++; }) console.log(infinity.next()) yield를 이용하면 블록을 중간에 끊어주는 효과가 발생 => JS에서는 하나의 문들을 Record로 만들어 주고, 해당 레코드를 실행 할지 말지를 결정 하게 됨. suspension, generator, command pattern등 여러 가지 개념들이 설명 되어 나오는데, 각각을 잘 이해하는게 중요하다. gererator + async + executor generator => 흐름을 멈춰준다. const profile = function*(end, next, r) { const userid = yield $...

코드스피츠 77 - ES6+ 5회차 (Block, Non-Block & Sync, Async) Block, Non-Block Flow를 막고 있는 것을 Block이라고 하고, 그런 상태를 blocking(상태)로 표현 한다. 업계 표준이 존재함. 그 표준 시간 동안 멈춰 있으면, Blocking/Non-Blocking으로도 볼 수 있다. Flow is blocking for(const i of (function*() { let i = 0; while(true) yield i++; })()) console.log(i); // script timeout // 플랫폼의 안정성을 위해 블록 되는 시간이 길면 강제 종료 시킴. Blocking function 점유하는 시간만큼 블록을 일으키는 함수 const f ..