[javascript] Next.js와 함께 사용할 수 있는 도형(Drawing) 라이브러리들은 무엇이 있나요?

24 Nov 2023

javascript

Next.js는 React 기반의 프레임워크로, 동적인 웹 애플리케이션을 구축하는 데 사용됩니다. Next.js와 함께 도형(Drawing)을 그리기 위해서는 다양한 라이브러리를 활용할 수 있습니다. 여기에는 몇 가지 인기있는 도형(Drawing) 라이브러리를 소개하겠습니다:

Konva.js: Konva.js는 HTML5 Canvas 위에서 사용되는 강력한 2D 도형 그리기 라이브러리입니다. Next.js에서 사용하기에 적합하며, 이미지, 텍스트, 도형 등 다양한 그래픽 요소를 다룰 수 있습니다. 자유로운 위치 조작과 애니메이션도 지원하며, 터치 이벤트와 같은 상호작용 기능도 제공합니다.

import { Stage, Layer, Rect, Circle } from 'react-konva';

function MyDrawing() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect
          x={20}
          y={20}
          width={100}
          height={100}
          fill="red"
          draggable
        />
        <Circle
          x={200}
          y={200}
          radius={50}
          fill="blue"
          draggable
        />
      </Layer>
    </Stage>
  );
}

export default MyDrawing;

SVG.js: SVG.js는 SVG(Scalable Vector Graphics)를 사용하여 그래픽 요소를 그리는 라이브러리입니다. Next.js와 함께 사용하기에 용이하며, 간편하게 SVG 파일을 생성하고 수정할 수 있습니다. 경로, 도형, 텍스트 등 다양한 그래픽 요소를 지원하며, 다양한 애니메이션 효과를 추가할 수도 있습니다.

import SVG from 'svg.js';

function MyDrawing() {
  const draw = SVG('drawing').size(500, 500);
  
  const rect = draw.rect(100, 100).fill('red').move(20, 20);
  const circle = draw.circle(100).fill('blue').move(200, 200);
  
  return (
    <div id="drawing" />
  );
}

export default MyDrawing;

p5.js: p5.js는 JavaScript 기반의 도형 그리기 및 애니메이션 라이브러리입니다. Next.js와 쉽게 통합될 수 있으며, 사용자 친화적인 API를 제공합니다. 다양한 2D 및 3D 그래픽 요소를 다룰 수 있으며, 마우스 및 키보드 이벤트에 반응하여 상호작용적인 그래픽을 만들 수도 있습니다.

import { useEffect } from 'react';

function MyDrawing() {
  useEffect(() => {
    const canvas = new p5((sketch) => {
      sketch.setup = () => {
        sketch.createCanvas(500, 500);
      };
      
      sketch.draw = () => {
        sketch.background(255);
        
        sketch.fill(255, 0, 0);
        sketch.rect(20, 20, 100, 100);
        
        sketch.fill(0, 0, 255);
        sketch.circle(200, 200, 100);
      };
    });
    
    return () => {
      canvas.remove();
    };
  }, []);
  
  return (
    <div id="canvasContainer" />
  );
}

export default MyDrawing;

이러한 도형(Drawing) 라이브러리들을 활용하여 Next.js 애플리케이션에서 그래픽 요소를 그릴 수 있습니다. 각 라이브러리는 고유한 기능과 API를 제공하므로, 프로젝트의 요구에 맞게 선택하여 사용할 수 있습니다. 자세한 내용은 공식 문서와 예제를 참조하시기 바랍니다.