개발일지/Next.js

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)

ayeongjin 2025. 2. 21. 01:15

🎨 Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)

2025.02.20 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)

 

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)

🎨 Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)2025.02.19 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js) [Konva.js] Next.js + TypeScript에

ayeongjin.tistory.com

 

이전 글에서는 Konva.js를 활용해 Undo / Redo 기능 및 지우개 기능을 구현했다.

이번에는 그린 그림을 Redux에 저장하는 기능을 추가했다.

저장 데이터 형식에 대해서 엄청 고민했는데 사용자 경험을 위해 JSON 데이터와 이미지 데이터를 함께 저장하기로 결정했다.

  • JSON: 저장된 데이터를 다시 불러와 수정할 수 있도록 라인 정보를 개별 객체로 보관
  • 이미지: 미리보기를 빠르게 렌더링하고, 미리보기 크기 조절이 가능하도록 Base64 형식으로 저장

이렇게 저장한 데이터는 다이어리 작성 요청 시 다른 요소들과 함께 POST 요청을 보낼 예정이다.

 


 

1. 그림을 JSON과 이미지 데이터로 저장하기

 

✅ 이미지 데이터 저장

Konva.js의 stageRef.current.toDataURL()을 이용해 Base64 인코딩된 이미지를 생성하고 Redux에 저장한다.

// Image 저장
if (stageRef.current) {
  const drawingImage = stageRef.current.toDataURL();
  dispatch(setDrawingImage(drawingImage));
  console.log("그림과 이미지 저장 완료", drawingImage);
}

✔ toDataURL()을 사용하면 캔버스를 Base64 문자열로 변환할 수 있다.

✔ 변환된 이미지 데이터를 Redux 상태에 저장하면 빠른 미리보기 렌더링이 가능하다.

 

✅ JSON 데이터 저장 (라인별 정보 저장)

그림의 수정을 고려하여, 개별 선(line)의 좌표와 스타일 정보를 JSON으로 변환하여 Redux에 저장한다.

// JSON 데이터 저장
const drawingJSON = JSON.stringify(lines);
dispatch(setDrawing(drawingJSON));
console.log("그림 저장 완료", drawingJSON);

✔ lines 배열을 JSON.stringify()로 변환하여 Redux에 저장

✔ 나중에 JSON을 다시 불러와 수정 가능

 


 

2. 저장한 이미지 데이터를 미리보기로 불러오기

저장한 drawingImage를 Redux에서 불러와 미리보기 렌더링이 가능하다.

const drawingImage = useSelector((state: RootState) => state.diary.drawingImage);

return (
  <div>
    {drawingImage ? <img src={drawingImage} alt="저장된 그림" /> : "저장된 그림이 없습니다."}
  </div>
);

✔ Redux 상태에서 drawingImage를 가져와 <img> 태그로 렌더링

✔ 빠른 미리보기 기능을 제공하여 사용자가 저장된 그림을 쉽게 확인할 수 있음

 


 

3. 저장된 데이터 활용

이제 Redux에 저장된 JSON과 이미지 데이터를 백엔드로 전송하여 DB에 저장할 수 있다.

그리고 JSON 데이터를 활용하여 라인을 복구하거나, 저장된 이미지 URL을 통해 미리보기를 제공할 수 있다.

💡 다음 게획!
S3에 업로드하여 Base64 대신 URL을 저장
JSON 데이터를 다시 불러와 수정 가능하도록 기능 추가

 

 


 

정리

✅ JSON 데이터 저장 → 그림의 선(Line) 정보 저장 (수정 가능)

✅ 이미지 데이터 저장 → 빠른 미리보기를 위한 Base64 이미지 저장

✅ Redux를 활용한 상태 관리 → 저장 후 UI 업데이트 및 미리보기 가능

이렇게 그린 그림을 Redux에 저장하고, 저장된 그림을 다시 불러와 렌더링할 수 있는 구조를 완성했다!