프로그래밍/JavaScript 40

Vue - 일본어 입력의 경우, 오류 발생시 처리 (feat. antd-vue)

회사의 어드민을 Antd-vue를 이용해 개발 하고 있습니다.그런데, 한글, 영어는 입력이 잘 되는데, 이상하게도 일본어의 경우는 오류가 발생합니다.https://ko.vuejs.org/guide/essentials/forms#basic-usage Vue.jsVue.js - 프로그래시브 자바스트립트 프레임워크ko.vuejs.orgVue docs에도 IME의 경우 따로 바인딩을 해야 한다고 가이드 하고 있습니다.이런 경우, 아래 처럼 해결 하면 됩니다. // 기존 // 변경 처음에는 그냥, @input 함수를 통해서 빈값인지 체크 하는 로직을 넣었고, input value는 model 바인딩을 했었습니다.그런데, 일본어가 계속 제대로 바인딩..

[Vue] TS2307: Cannot find module '@/App.vue' error

원인 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 ..

prettier-eslint, eslint 설정

모든 방식은 제가 문서를 보고 적용한 방식인데, 잘못 된 정보가 포함 되어 있을 수 있습니다. 모듈 설치 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을 쉽게 실행 시켜 주는 역할을 한..

npm을 pnpm 으로 바꾸면서 발생한 문제점 (--no-install Not Found)

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 버전을 쓰면 이슈가 없었고..

VueJS 학습 - Basic

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 이벤트를 제공한..

vite build 오류

최근에 이직한 곳의 플랫폼은 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..

코드스피츠 77 - ES6+ 기초편 6회차 (Generator, Promise, Async/Await)

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

반응형