차근차근 찌니

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

내가 기억하기 위한 개념 정리 내 기준 중요한 장단점까지만 기술한다 MPA란? - Multiple Page Application - Server Side Rendering 방식으로 렌더링 - 새로운 페이지를 요청할때마다 정적 리소스까지 함께 다시 렌더링 - 장점 : *SEO 친화적임. 변경된 데이터 항목까지 모두 확인 가능 - 단점 : 데이터 변경 시 다시 렌더링 해야하므로 속도 느리고 사용자 경험 떨어짐 SPA란? - Single Page Apllication - Client Side Rendering 방식으로 렌더링 - 단일 페이지로 구성된 웹 어플리케이션. - 정적 리소스는 최초 한번에 다운로드 - 화면 이동 시 새로고침 없이 필요한 데이터만 json형태로 전달받아 동적으로 렌더링 - 장점 : 빠른..

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

Default로 vue source run 시, 서비스 port는 8080이다. 변경하고 싶다면? package.json파일의 serve 명령어 옵션으로 넣어준다. --port 서비스포트number 8077로 서비스되는 것을 확인할 수 있다.

공부는 끝이 없고, 오늘도 소스를 보다가 항상 그냥 대충 감으로 지나친 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 탭에 가도 아무것도 보이지 않았다. > 해결방법 main.js에 아래 줄 추가 Vue.config.devtools = true;

다짜고짜 에러투척합니다.. - 에러 : Mixed spaces and tabs - 원인 : 들여쓰기에 공백과 탭을 동시에 사용하면 뜸 -> (별 오류가 다있네.) - 해결 : package.json 편집, "eslintConfig" - "rules" 에 아래 소스 추가 아래 소스 참고