[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)
🎨 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에 저장하고, 저장된 그림을 다시 불러와 렌더링할 수 있는 구조를 완성했다!