프론트엔드 4

[Vue3] Code Mirror 적용하기

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

Vue 2024.05.29

[Vue3] Quasar Framework Boot File

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

[Vue] ESLint error : multi-word-component-name

[왜 이런 에러가?] - 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

Vue 2023.03.06

[Vue] Jest 환경설정

기존 Vue 프로젝트에 Jest로 테스트 환경을 구성했다. 매일 npm run serve 로 로컬에 서버 구동하고, 직접실행해서 콘솔이나 네트워크에서 output값을 확인했는데, 하면서도 참 비효율적이다 생각했다. (Jest말고 2022년에는 Vitest가 1등...https://2022.stateofjs.com/en-US/libraries/testing/ 할거너무많네..) vue project create할 때, jest를 선택하여 미리 환경을 구성할수도 있지만, 나는 이미 있는 프로젝트에 설치해야하는 경우였다. 1. Jest Module Install *Jest 공식 URL - https://jestjs.io/docs/getting-started npm i -D jest 2. package.json ..

Vue 2023.02.14