개발개발39 [인생 그래프] 클릭 이벤트 핸들러 뜯어보기 인생그래프 프로젝트 중 유저 클릭 정보를 받는 클릭 이벤트 핸들러이다. 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. [인생 그래프] 개인 프로젝트 시작하기 https://github.com/hongggyelim/lifeGraph GitHub - hongggyelim/lifeGraph: 인생 그래프를 그려주는 웹어플리케이션인생 그래프를 그려주는 웹어플리케이션. Contribute to hongggyelim/lifeGraph development by creating an account on GitHub.github.com 처음 생각한 것은 테이블 입력을 받아서 인생 그래프를 그려주는 것이었다.Datetitilescoreemoji2020년입사60😎2022년코로나-30😂2023년퇴사90🙋♀️이런식으로 유저가 데이터를 입력하면 그걸 그래프로 그려주는 방식그리고 그 그래프에 유형을 지정해주고 이미지로 저장해서 공유할 수 있도록 하면 재밌겠다는 생각이 들었다... 2025. 2. 10. 이전 1 2 3 4 5 6 7 다음
