임이지의 블로그

useConfirm 은 훅은 사용하지 않는다. import React, { useState, useClick, useEffect, StrictMode } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useConfirm = (message = "", onConfirm, onCancel) => { if (onConfirm && typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (confirm(message)) { onCon..

Web/REACT 2021. 10. 25. 14:38

useClick useRef() -> document.getElementByID() 사용한 것과 동등하다. 아래의 코드에서 h1 tag는 title이라는 ref를 갖고 있고 useClick을 훅으로 갖고 있다. 따라서 h1을 클릭하는 경우 useClick 내부의 동작을 하게 된다. useEffect로 인하여 클릭할 때 event 리스너를 동작해주고 함수 객체를 반환할 때 이벤트 리스너를 제거한다. didMount, didUpdate 에 동작에서 addEventListener 가 동작하고 WillUnmount에서 제거한다. import React, { useState, useEffect, useRef, StrictMode } from "react"; import ReactDOM from "react-dom..

Web/REACT 2021. 10. 25. 14:22

CORS Proxy 설정 npm 명령어로 http-proxy-middleware 를 설치한다. npm install http-proxy-middleware // npm 사용 일 경우 yarn add http-proxy-middleware // yarn 사용 일 경우 setupProxy.js 파일을 src 밑에 생성 후 아래와 같이 프로젝트 proxy 설정을 커스터마이징 해준다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', // 비지니스 서버..

Web/REACT 2021. 10. 19. 12:22

상기 에러는 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