차근차근 찌니

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 에서는 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

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

차근차근 Docker 익히기 개발해왔던 front 소스를 Docker 위로 올려봤다. 1. Node Image Pull Vue를 구동하려면 Node 환경이 필요한데, 내 소스의 경우 16.13 버전을 사용한다. docker pull node:16.13 ! 첨에 이런거 뜨면 Desktop Docker를 먼저 구동시켜주자. (Mac 환경) 2. Creat Dockerfile Front 폴더로 들어가서 Dockerfile을 생성한다. FROM node:16.13 #폴더 위치 WORKDIR ~/Farming/ggms_fe #download할 module목록 COPY package.json . #현재 폴더에 있는 모든 폴더와 파일을 ADD 를 통해 가져옴 ADD . . #package.json 에 정의한 modu..

공부는 끝이 없고, 오늘도 소스를 보다가 항상 그냥 대충 감으로 지나친 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는 까만 불투명 화면이 덮어지면서 에러문구가 보이고 시스템을 확인할 수가 없다. 로직문제는 아니고 단순히 문법?에 대한 오류인데 보통은 로그에 에러는 뜨더라도 시스템은 운영은 ..