개발개발/LifeGraph_인생그래프13 [인생 그래프] 이미지 저장하기 (html2canvas + file-saver) 생성한 그래프를 이미지로 저장하는 방법을 구글링 하다 html2canvas 라는 라이브러리를 알게 되었다.DOM 요소를 이미지로 저장해주는 라이브러리에는 대표적인 라이브러리가 몇개 더 있다.그래프를 svg로 그려주고 있는데, 해당 라이브러리가 SVG 요소도 함께 캡쳐할 수 있기에 채택하게 되었다. 내가 경험한 바로는 이런 테스트 서비스는 채팅이나 sns로 공유해서 모바일로 실행하는 경우가 많았다.그래서 모바일에서도 파일 저장하는 로직이 동일한가? 하는 궁금증이 있었다. 몇 개의 블로그를 찾아보던 중 아래 블로그에서 html2canvas 만으로 이미지 다운로드를 구현했을때아이폰 기준 Safari 브라우저 외에는 작동하지 않는다고 하며 솔루션을 제시해주셨다. https://yong-nyong.tistory.. 2025. 2. 11. [인생 그래프] 클릭 이벤트 핸들러 뜯어보기 인생그래프 프로젝트 중 유저 클릭 정보를 받는 클릭 이벤트 핸들러이다. const handleClick = (e: MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; addPoint({ id: Date.now(), x, y, title: "" }); // 클릭한 좌표 추가 };currentTarget 과 target은 어떻게 다른걸까 궁금해져서 찾아보게 됐다. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget Even.. 2025. 2. 11. [인생 그래프] 그래프가 이상하다 svg로 points 를 이어서 그래프를 그려주려고 했는데 입력한 데이터와 그래프의 간극이 너무 심하다 ㅎㅎㅎ 클릭한 순서대로 배열에 추가되니까, 그래프 그릴때는 x 좌표 기준으로 정렬해주었다. 그래프를 어떻게하면 데이터 입력한대로 그려줄수 있을까? import { useEffect, useState } from "react";import { useGraphStore } from "../../../store/useGraphStore";import Point from "../../Main/component/Point/Point";const ResultGraph = () => { const { points } = useGraphStore(); const [data, setData] = useState(.. 2025. 2. 10. [인생 그래프] 클릭 데이터 전역상태로 관리하기 클릭 입력을 마치면 "그래프 생성하기" 버튼을 눌러서 결과 페이지로 이동시킨다.points 데이터를 기반으로 그래프로 보여줘야해서 zustand 를 이용해서 데이터를 전역 상태로 관리하려고 한다. 결과 페이지에서 이전 페이지로 이동했을때도 이전에 입력한 값이 남아있었으면 좋겠어서 전역상태로 관리하기로 했다.("수정하러 가기")"reset" 기능도 추가할 수 있게 되었다. store 에서 아래와 같이 정의했다. addPoint : 클릭한 점의 좌표를 배열에 추가setTitle : 클릭 시에는 title을 ""으로 받기때문에 input에 입력한 값을 onChange함수 안에서 setTitleresetPoint : 빈 배열로 리셋import { create } from "zustand";interface P.. 2025. 2. 10. [인생 그래프] 클릭한 위치에 컴포넌트 추가하기 클릭 시 Point 컴포넌트를 배치하는 것 + 반응형 구현을 용이하게 하려고 canvas를 사용하지 않고 일반 div를 사용하기로 했다. 클릭했을때 (잘 안보이지만) Point 컴포넌트가 호출되고, 그 내부에서 input에 title을 입력한다. ▼ Point 컴포넌트더보기import { ChangeEvent, useEffect, useRef } from "react";const Point = ({ x, y, title, onChange,}: { x: number; y: number; title: string; onChange: (e: ChangeEvent) => void;}) => { const inputRef = useRef(null); useEffect(() => { inpu.. 2025. 2. 10. [인생 그래프] <canvas>로 그래프 그리기 내가 생각한 구현 방식 x축, y축이 존재하는 Graph 컴포넌트클릭 이벤트를 받아서 x,y 좌표 배열을 받는다각 좌표에 Point 컴포넌트가 추가된다입력을 멈추고 그래프 생성하기 버튼을 누르면 각 점을 부드럽게 잇는 그래프가 그려진다 + 가능하다면 점의 위치를 드래그앤드롭으로 이동하거나 삭제한다. 일단 클릭 받아서 그래프 만드는거까지만 MVP로 만들어보기 처음으로 라는 태그가 있다는걸 알게 됐다. canvas로 좌표를 그렸다가, 단순히 좌표만 보여주는 역할이라면 div 에 border 로 충분하려나? 했는데클릭 이벤트를 받아서 그래프를 그려주기 위해 어떤게 더 효율적일지 몰라서 canvas에 대해 좀더 알아보는 중이다. https://velog.io/@thdrldud369/posts?tag=canva.. 2025. 2. 10. 이전 1 2 3 다음
