차근차근 찌니

vue3에선 아래 npm모듈로 편리하게 v-model을 활용하면서 양방향 데이터 전달이 가능하다 vue-codemirrorCodeMirror code editor component for Vue. Latest version: 6.1.1, last published: 2 years ago. Start using vue-codemirror in your project by running `npm i vue-codemirror`. There are 543 other projects in the npm registry using vue-codemirror.www.npmjs.com1. npm install vue-codemirror2. main.js에 importimport VueCodemirror from 'v..

.quasar 파일 내부는 건들지 않는다. 특히, app.js파일! quasar 내부에서 global property등록을 위해선 1. src>boot 폴더에 파일 추가하여 관리 - constants.js파일에 global property 설정 import { boot } from 'quasar/wrappers'; export default boot(({ app }) => { app.config.globalProperties.hello = 'Hello Quasar!!'; }); 2. 추가한 파일 인식하도록 config에 추가 //quasar.config.js 파일 내 boot: ['constants'], 3. Test // App.vue파일 ... export default defineComponent(..

[왜 이런 에러가?] - Vue 에서는 html 요소와의 중복성 및 혼란성 제외를 위해 vue 파일 명을 조합 단어(ex. TodoItem, todo-item..)를 권장하는데, 단일 단어를 사용했다면 나는 에러. - 아래 에러처럼 Index.vue파일명이 문제. [해결방법] ESLint config에 아래 내용 추가 *default 입력 시 모든 파일에 대해 적용 (따로 파일명 명시하여 해당 파일에만 적용가능) rules: { "vue/multi-word-component-names": ["error", { 'ignores': ['default'] }] } 참고. 공식문서 vue/multi-word-component-names | eslint-plugin-vue eslint.vuejs.org

공부는 끝이 없고, 오늘도 소스를 보다가 항상 그냥 대충 감으로 지나친 slot에 대한 정리를 한다. Vue slot - 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할 때 사용. - 부모 : 자식 컴포넌트 가져다 씀. ( 자식 vue import 해서 태그로 사용) - 자식이 slot 태그로 선언 - 부모가 태그속성에 slot 사용 * 자식 컴포넌트 버튼 기본 바디 *부모 컴포넌트 닫기 {{ slotProps }} 바디입니다. *결과 Codesandbox URL https://codesandbox.io/s/admiring-johnson-8ljjul?file=/src/components/ParentModal.vue admiring-johnson-8ljjul - CodeSandbox admiring-j..

새로운 미니? 프로젝트 정확히는 유료 PoC 가 진행되는데, 이미지 슬라이딩 화면이 필요했다 사실 고객 요구사항은 아니지만 내가 보기에 이미지만 딸랑 하나 띡 보이는건 너무 성의없는 화면 아닌가..ㅋㅋ... 무튼 현재 쓰고있는 라이브러리인 keno ui에는 아무리찾아봐도 carousel 관련된 내용이 없어서 vue3-carousel 패키지를 사용하였다. 사용법은 간단하다 1. npm install vue3-carousel 2. 본인 화면에 맞게 Custom 나같은 경우는 참고 url의 examples 소스를 가져와서 img태그를 삽입하였다. html Script CSS * 참고 Getting started | Vue3-carousel Getting started Installation First step..

회사에서 인프런 강의는 대부분 지원을 해주기에 프로젝트 기간동안 잘 모르고도 넘어갔던 것이랑 헷갈렸던 걸 되짚어보는 시간을 갖기 위해 인프론 vue 중급강의를 듣게 되었다 대부분 아는 내용이긴 하지만 한번 더 정리하는 기회가 되는 것 같아 나름 의미가 있다. 포스팅에선 새롭게 알게된 내용이나 기록해둘만한 것만 간단하게 메모하는 느낌으로 끄적끄적 해볼까 한다. ESLint 에러 설정 *ESLint ? 쉽게 문법 구조 검사 도구 라고 생각해보자. 처음 세팅 시 필요한 건데, ESLint 에러가 나면 localhost:portnumber는 까만 불투명 화면이 덮어지면서 에러문구가 보이고 시스템을 확인할 수가 없다. 로직문제는 아니고 단순히 문법?에 대한 오류인데 보통은 로그에 에러는 뜨더라도 시스템은 운영은 ..