분류 전체보기
-
[Canvas] Color-pickerHtml Canvas 2022. 3. 4. 11:30
HTML Color-picker 만들기 컨버스에 이미지를 띄운 다음, 이미지에 마우스를 가져가면 해당 마우스 포인터의 색깔을 추출해서 알려준다. 이는 2가지 로직만 알고 있으면 쉽게 구현할 수 있다. 1. 캔버스에 이미지 삽입하기와 같은 방식으로 캔버스 ctx 에 이미지를 삽입 할 수 있으며, drawImage 는 여러 속성이 있으므로 때에 따라 골라서 사용할 수 있다. this.img = new Image(); this.img.src = "./starryNight.jpeg"; this.img.onload = () => { this.ctx.drawImage(this.img, 0, 0); }; 2.마우스 위치에 있는 컬러 추출하기getImageData(mouseX, mouseY, 1, 1); 로 마우스가 ..
-
[React]How to optimize context value (번역)JavaScript 2022. 3. 3. 22:14
원글: https://kentcdodds.com/blog/how-to-optimize-your-context-value — Kent C. Dodds 주의: 시작하기 전 알아둘것. 아래 조건에 해당하는 사항이 여러 개 있는 경우 컨텍스트 값 최적화를 효과적으로 도입 할 수 있습니다. 1. 컨텍스트 값이 자주 바뀔 경우 2. 컨텍스트 값을 사용하는 소비자 컴포넌트가 많을 경우 3. `React.memo` 의 느린 성능에 지친 경우 4. 당신이 프로그램을 실행 했을때 느리다고 생각하여, 최적화가 필요한 경우 만약 위 설명 중 해당사항이 있으면, 계속 읽으세요 (끝까지 읽고 더 나은 대안을 놓치지 마세요!). 정말로 대안은 확실히 좋을 겁니다. 심지어 나는 원래 작성했던 블로그 포스트를 삭제하고 다른 더 나은 ..
-
[react] FragmentsJavaScript 2022. 3. 2. 23:32
React Fragments 사용법 import {Fragments} from 'react'; use 사용 이유 하나의 컴포넌트에서 여러개의 엘리먼드를 렌더링 할때, 리액트에서는 하나의 부모로 묶어줘야한다. 이때 를 사용해 묶으면, 의도와는 다르게 ui 가 보여질 수 있다. 따라서 아무 역할 없이 단지 Fragment 를 만드는 react.Fragments 혹은 를 사용하면 원하는 대로 ui 를 만들 수 있다. 코드 import { Fragment } from "react"; export default function Row({ content, fee, content2, fee2 }) { return ( {content} {fee} {content2} {fee2} ); }
-
[react] forwardRefJavaScript 2022. 3. 2. 08:16
Forward Ref useRef 를 사용해 엘리먼트를 참조할 때, ref 를 자식 컴포넌트에게 props 로 전달 할 수 없다. export default function Children(props) { const ref = props.ref; // 에러발생 console.log(ref); // 에러발생 return 클릭; }이때 forward ref 를 사용하면, 부모에서 정의한 ref 로 자식의 엘리먼트를 참조 할 수 있다!! (참고로 forwarding 은 전송이라는 뜻이며 즉, ref 를 자식 컴포에게 전송한다 라는 의미이다.) 코드 부모컴포넌트 import { ConstTypeChild } from "./ConstTypeChild"; import FunctionTypeChild from "./..
-
[백준] 최단 경로알고리즘 2022. 3. 1. 05:42
heap 을 사용한 다익스트라 알고리즘으로 구현. 다익스트라 부분은 코드 길이가 겨우 6~7줄. 생각보다 쉽다. 어렵게 생각하지말자. import heapq; V,e = map(int, input().split()); start = int(input()); infos = list([] for _ in range(V + 1)); heap = []; for i in range(e): u,v,w = map(int, input().split()); infos[u].append([w,v]); INF = 1e9; D = [INF] * (V + 1); D[start] = 0; def diakstra(start, heap, D, infos): heapq.heappush(heap, [0, start]); while (h..