vuejs

[ 문제 상황 ]vue-konva는 기본적으로 컴포넌트명에 'v-' 접두사를 붙여서 케밥 케이스로 사용한다.ex) v-stage, v-text, ... 이전에 다른 프로젝트에서는 괜찮았는데, 이번 프로젝트는 저장 시 컴포넌트명이 자동으로 파스칼 케이스로 변환되도록 규칙이 설정되어 있어서 컴포넌트 인식이 안되는 문제가 발생했다. [Vue warn]: Failed to resolve component: VStage If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at ref=Ref > at at ref=Re..

PrimeVue  - Vue.js를 기반으로 한 UI 컴포넌트 라이브러리   - 미리 만들어진 UI 컴포넌트를 제공함  - Bootstrap과 유사한 역할을 함     → 둘 중 하나를 선택하여 사용하는 것을 권장함          i. PrimeVue             - Vue.js의 컴포넌트 기반 아키텍처를 활용하기에 좋음            - Tailwind CSS와 함께 사용하여 좀 더 세밀하게 스타일을 적용할 수 있음          ii. Bootstrap            - 다양한 프레임워크와 쉽게 통합할 수 있음  - https://primevue.org/ ※ Tailwind CSS  - 유틸리티 기반의 CSS 프레임워크   - 클래스 이름을 사용하여 스타일을 직접 조합할 수 있..

이번에 국문/영문에 동시에 오픈해야 하는 시스템이 있었는데, 기능이 완전히 동일해서 view 파일을 각각 만들어서 사용하는 건 좀 비효율적이었다. 유지보수하기도 귀찮을거고..그래서 같은 view 파일로 사용하기 위해서 Vue-i18n이라는 라이브러리를 활용했다. Vue-i18ni18n은 Internationalization (국제화)의 약자다. i와 n 사이에 18글자가 들어가서 i18n이라고 줄여 쓴다고 한다.(발음은 보통 아이일팔엔 또는 아이eighteen엔이라고 한다는데, 아이십팔엔이라고 부르는 분들도 계시더라) https://vue-i18n.intlify.dev/guide/installation.html Installation | Vue I18n vue-i18n.intlify.dev나는 기존 프로..

@keyup.enter를 활용하면 jQuery로 구현할 때보다 더 간단하고 직관적이게 코드를 작성할 수 있다.  #  jQuery로 구현한 코드 #  Vue.js로 구현한 코드

nextTick데이터가 바뀌어서 재렌더링될 때, 바로 DOM 요소로 접근하려고 하면 해당 요소를 제대로 찾지 못한다.이때 nextTick을 활용하면 재렌더링이 완료된 후에 코드를 실행하도록 처리할 수 있다. // 변수 'var1'이 변경되었을 때 실행되는 코드watch(var1, (newVal, oldVal) => { nextTick(() => { // 실행할 코드 });});