전체 글303 [인생 그래프] 카카오톡 인앱 브라우저 탈출하기 그래프 이미지를 저장하는 기능을 html2canvas와 file-saver로 구현했다.그런데 카톡에서 링크를 열어서 그래프를 그리고 저장 버튼을 누르면.. 아무일도 일어나지 않는다! 아이폰 기준 사파리에서는 잘 되는데 ㅠㅡㅠ찾아보니 이 문제로 이미 많은 개발자들이 고통받고 있었다. 방법을 찾다가 카카오톡 브라우저에 대한 문제 제기해주신 글을 봤다.https://medium.com/@sunyi233 위 글을 읽다가 여기서 솔루션을 찾을 수 있었다!https://burndogfather.com/271 카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)이전부터 카카오톡 등과 같은 메신저에서 인앱브라우저를 강제하는 불합리한 조치를 우회하기.. 2025. 2. 13. [인생 그래프] SCSS 반응형 디자인 구현하기 폰트 크기, 여백 등의 스타일은 미디어 쿼리로 쉽게 반응형 구현이 가능하다.scss에서는 변수를 선언할 수 있어서 매우 편리하다// variables.scss// 반응형 너비$mobile: 375px;$tablet: 768px;$desktop: 1024px;@import "./variables";.border { // 기본 스타일 @media (max-width: $mobile) { // 모바일 너비에서 보여줄 스타일 } } 또한 폰트 크기를 px 단위에서 rem 단위로 변경하였다.html { font-size: 62.5%;}body { font-size: 1.6rem;}브라우저 기본 폰트 크기 = 16px 의 62.5% = 10px rem은 최상위 루트를 기준으로 계산하므로 1.. 2025. 2. 12. [인생 그래프] 이모지 피커를 추가하자 내가 개발하면서 테스트하는 입장에서도 점을 찍고 거기에 타이틀을 적는게 손이 안간다고해야하나, 자연스럽지 않은 흐름인듯했다.그래서 간단하게 이모지를 선택할 수 있으면 좋겠다 싶어서 emoji-picker-react 라이브러리를 이용했다.https://www.npmjs.com/package/emoji-picker-react#hiddenemojis---excluding-certain-emojis emoji-picker-reactEmoji Picker component for React Applications on the web. Latest version: 4.12.0, last published: 5 months ago. Start using emoji-picker-react in your project .. 2025. 2. 11. [인생 그래프] 이미지 저장하기 (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 ··· 5 6 7 8 9 10 11 ··· 34 다음
