Canvas

Next/Image는 크게 로컬 이미지(정적 이미지)와 리모트 이미지(다이나믹 이미지)로 나뉜다. /public 폴더에 저장한 로컬 이미지는 빌드 타임에 import한 이미지 파일의 width, height를 자동으로 지정하고 base64로 인코딩한 이미지가 생성된다. 따라서 추가 작업 없이 블러 처리된 Placeholder를 사용할 수 있다.// public 폴더에 있는 me.png 파일을 사용하고 있다; 그 외 상황은 리모트 이미지로 구분한다. 이때 블러 처리된 Placeholder를 사용하려면 plaiceholder 같은 라이브러리를 사용하거나 캔버스 API를 이용해서 4×4 정도의 사이즈(보통 300바이트 미만)로 줄인 후 base64로 변환하는 작업이 필요하다. NextJS 공식 문서에선 10 ..

도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가) ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0) ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심 ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드이전 변형 결과 값에 이어서 수행초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)..

캔버스 기본 세팅 for React💡 캔버스는 HTML 요소 중 하나로 스크립트 언어로 그림을 그리는데 사용한다. canvas를 사용하기 위해선 캔버스 context에 DOM으로 접근해야 한다. React에선 useRef()를 사용해서 Ref 객체를 만들고 접근하고 싶은 DOM의 ref 값으로 설정해주면 된다. 그럼 Ref 객체의 .current 값은 해당 DOM을 가리킨다. 캔버스 엘리먼트 생성 및 useRef 설정import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // 생략 ..