어리둥절 분석가 그리고 개발자

✔️ 필요성 canvas package를 사용해야하는데 Cannot find module '../build/Release/canvas.node' 다음과 같은 에러가 떴다. ✔️ 문제 확인 이런 저런 글을 살펴보니 설치할 때 신경써야하는 부분이 있는 것 같다. 아래 canvas 공식 github에 가서 설치하는 방법을 찾아봤다. https://github.com/Automattic/node-canvas GitHub - Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS. Node canvas is a Cairo backed Canvas implementation for NodeJS. - GitHub - ..

marker 리스트의 lat, lng을 활용해서 최적의 bound를 설정해주는 hook import { useEffect } from "react"; /* Tmap의 handleCreate를 활용해서 map 객체를 부모로 올린 다음 활용 */ export const useFitEdge = ( map: any, data: any, coordList: number[][], margin?: { left: number, top:number, right:number, bottom:number } ) => { useEffect(() => { if (!coordList || coordList.length === 0) return; const latLngBounds = new (window as any).Tmapv2...

✔️ 필요성 setInterval을 통해서 주기적으로 state값을 변경시키고 싶다 ✔️ 문제 해결 useEffect의 [] argument안에 state값을 추가해야 한다! const [monthIdx, setMonthIdx] = useState(2); /* 0부터 2까지 숫자를 계속 돌아가게 만듦 */ const monthCarousel = (monthIdx: number) => { var len = 3; if (monthIdx === len - 1) return 0; else return monthIdx + 1; } /* 3초에 한번씩 내용 바뀜 */ useEffect(() => { const interval = setInterval(()=>{ setMonthIdx(monthCarousel(mont..

GSAP으로 배경이 Sticky하게 걸려있는 상황에서 element등이 올라오도록 애니메이션 적용하기 이런식으로 스크롤에 따라서 요소들이 부드럽게 움직이는 것이 요즘 프론트 퍼블리싱 트렌드인 것 같다 네이버는 카드가 겹쳐지면서 조금씩 뒤로 가는 듯한 모습을 구현했다 이것을 GSAP의 ScrollTrigger를 활용해서 비슷하게 만들어보자! 코드 슬라이드2 안에서 카드1, 카드2, 카드3이 순서대로 올라오는 구조 const Slide2 = styled.div` display: flex; padding-bottom: 1000px; //스크롤이 충분히 내려가도록 padding `; const ThumbnailCard = styled.div` position: absolute; display: flex; wid..

import React, { useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import { useSwiper } from "swiper/react"; import classNames from "classnames"; const Container = styled.div` display: flex; flex-direction: column; position: sticky; ` const CardBox = styled.div` position: sticky; width: 800px; height: 400px; background-color: yellow; ` const Card1 = styled.div` pos..

스크롤 이벤트 useEffect(() => { var beforePosition = document.documentElement.scrollTop; window.addEventListener('scroll', function() { var afterPosition = document.documentElement.scrollTop; if (afterPosition > 50) { if(beforePosition < afterPosition ){ // 스크롤 아래로 console.log('scrollDown') } else { // 스크롤 위로 console.log('scrollUp') } } else { // 평상 시 } beforePosition = afterPosition; }) }, []); 휠 이벤트..

const ref = useRef(null); const onSubmitImage = async (ref: any) => { const formData = new FormData() const image = await domtoimage.toBlob(ref.current); const myFile = new File([image], 'image.jpeg', { type: image.type, }); formData.append("fileCategory", "INSIGHT_ATTACHED_FILE") formData.append("targetFile", myFile) return axios .post('image-upload-url', formData, { headers: { 'Content-Type': ..

SVG 파일에서 fill="#A6D4FF"로 컬러셋이 들어가있는 곳을 찾아서 "current"를 대신 넣어준다 리액트 svg 컴포넌트에 fill argument를 추가하면서 색깔을 자유롭게 변경할 수 있다. import React from 'react'; import { VictoryChart, VictoryScatter, VictoryBar, VictoryAxis, VictoryLabel, VictoryContainer } from 'victory'; import { ReactComponent as Svg2} from "./svg/file2_.svg"; ... return ...

downloadjs와 html-to-image 라이브러리를 활용해서 React에서 만든 컴포넌트를 이미지 파일로 export 할 수 있다 import React, { useCallback, useRef } from 'react'; import Victory from './Victory'; import styled from '@emotion/styled'; import downloadjs from "downloadjs"; import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image'; const Container = styled.div` display: 'flex'; ` const Image = styled.div` width: max-..

1. src 안에 custom.d.ts 혹은 아무 d.ts 파일을 만들고 아래처럼 적는다 declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC; const src: string; export default src; } 2. ReactComponent로 불러와서 사용한다 import { ReactComponent as Svg1} from "./svg/file1.svg"; // import Svg1 from './svg/file1.svg' // 이건 실패 const ScatterPoint = ({ x, y, datum, min, max } : any) => { return };