임이지의 블로그

상기 에러는 tfjs 가 설치되지 않았을때 발생한다. 아래명령어로 tfjs 를 설치한다 npm i @tensorflow/tfjs npm i @tensorflow/tfjs-vis

Web/개발 환경 2021. 6. 25. 14:06

v-for 지시자에 대한 vue컴파일러 경고 메세지 WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-76af726f","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CardPage.vue (Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.h..

Web/개발 환경 2021. 6. 23. 17:11

router-link를 사용할 때 하이퍼링크에 밑줄이 생긴다. 주요 코드는 아래와 같다. INTRO SHAPE PAINTER DEMO 밑줄 속성은 CSS의 아래 속성을 사용하면 제거할 수 있다. .logo{ style="text-decoration: none; } 밑줄 속성 제거된 코드 INTRO SHAPE PAINTER DEMO

Web/VUE.JS 2021. 6. 22. 09:05

브라우저 크기에 따라 Canvas의 크기를 Fit 하려면 아래와 같이 두 가지 방법으로 처리할 수 있다. JAVA SCRIPT // important! for alignment, you should make things // relative to the canvas' current width/height. function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... } CSS html, body { width: 100%; height: 100%; margin: 0; }

Web/HTML JS 2021. 6. 18. 14:26

node.js, webpack, vue, vuetify 가 설치되어있는 환경을 가정합니다. 만약 미설치되어 있다면 node.js를 먼저 설치하시기 바랍니다. webpack-simple 프로젝트 생성 vue init webpack-simple painter-vuetify vue init webpack-simple [프로젝트명] 설치 완료된 화면입니다. dir 과 tree 명령으로 프로젝트 구성을 확인하도록 하겠습니다. dir 명령 결과 tree 명령 결과 npm install npm install 명령을 사용하여 package.json에 설정된 종속 라이브러리를 설치합니다. npm run dev localhost 를 실행합니다. 여기까지는 vue 가 설치 되어있는 상태입니다. Vuetify 설치 local..

Web/개발 환경 2021. 6. 18. 11:05

node.js 가 설치되어있다고 가정합니다. 만약 설치되어 있지 않다면 https://nodejs.org/ko/ 에서 설치하기시 바랍니다. VUE CLI 설치 -g 옵션으로 글로벌로 설치한다. npm install -g @vue/cli 프로젝트 생성 painter-vuetify라는 이름으로 생성한다. vue create painter-vuetify Vue2.x 버전대를 사용하고 있어 Default [Vue 2]를 선택했다. 설치가 완료되면 아래와 같은 화면이 나타난다. dir 명령으로 디렉터리를 확인하면 아래와 같다. tree 명령으로 확인하면 다음과 같다. Localhost 실행 아래 명령으로 실행한다. Vue 만 설치되어 있는 상태이다. npm run serve Vuetify 설치 npm 명령으로 v..

Web/개발 환경 2021. 6. 18. 10:19

Painter.vue를 작성하는 도중 위와 같은 오류가 발생했다. 원인을 알고서는 나중에 허탈했다. Drawing with mousemove event Canvas not supported 캔버스 되돌리기 캔버스 초기화 캔버스 저장하기 methods: 에서 stopDrawing(e) 함수가 문제였다. 아주아주 단순한 this. 키워드를 명시하지 않아서 발생한 문제였다. stopDrawing(e) { if (this.isDrawing) { this.drawLine(this.x, this.y, e.offsetX, e.offsetY); this.x = 0; this.y = 0; this.isDrawing = false; console.log(this.isDrawing); } 사소한 문제였는데 원인 찾느라고 고..

Web/개발 환경 2021. 6. 17. 12:47

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.js 입문서! 이 책은 Vue.js 실무 개발 경험을 바탕으로 입문자 대상 강의를 수차례 진행해 온 현업 Vue.js 능력자가 집필했습니다. Vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고, 실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과 프로젝트 구조화 노하우까지 알차게 담았습니다. 특히 입문자들이 어려워하는 웹팩, ES6, NPM을 몰라도 쉽게 학습할 수 있도록 목차를 구성하여 배우기 쉬운 Vue.js의 특성을 잘 살렸습니다. 책에서 제공하는 ‘예제’와 ‘직접 해보세요’를 일단..

Developer/IT 도서 2021. 6. 17. 10:39