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

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': ..

Puppeteer는 Chrome 팀이 개발한 Node 라이브러리이다. Puppeteer를 이용하면 Headless 혹은 Headful한 브라우저(크롬)을 제어할 수 있는 각종 API를 제공하며, 테스트에도 사용될 수 있다.  이 블로그가 대략적인 내용을 이해하기에 쉬웠다. Puppeteer 활용 브라우저 테스트 자동화 https://developers.google.com/web/tools/puppeteer 소개 Headless 브라우저에 대한 이해가 필요 합니다. 해당 내용은 https://shanepark.tistory.com/290 에서 확인 하실 수 있습니다. Puppeteer Puppeteer는 Chrome 팀이 개발한 No shanepark.tistory.com 이곳은 공식 문서 Puppete..

본 예제는 Next.js 12 버전에서 돌아간다. Next.js 13 버전에서는 안된다 (Victory Chart 내부에서 반드시 client component를 사용해야하는 무엇인가가 있음) pages/api/chartPng.tsx를 만들어서 아래와 같이 적어준다. svgString을 바로 넣어서 돌아가야 하는데 svgString이 태그로 쌓여있어서 문제가 생긴다. sharp을 쓸 때는 반드시 태그로 시작하고 끝나야하는 것 같다. console.log에 찍어서 부분만 가지고 와서 일단 그림을 그렸다. 그말인즉슨 조금 더 다듬을 필요가 있다. import { NextApiHandler } from 'next'; import { VictoryChart, VictoryBar } from 'victory'; ..

https://www.lainyzine.com/ko/article/how-to-install-homebrew-for-m1-apple-silicon/ which brew라고 검색해봤을 때 위치가 /usr/local이면 설치가 잘못된 것이다 일단 brew를 지운다 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)" 다시 brew를 설치한다 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" which brew의 결과 /opt/homebrew/bin/brew

canvas라는 패키지를 node에서 설치하려는데 실패한다 yarn add canvas canvas: Command failed. Exit code: 1 Command: node-pre-gyp install --fallback-to-build --update-binary 아래와 같이 먼저 brew로 일부 패키지들을 설치한 뒤에 다시 canvas를 설치한다! brew install pkg-config cairo pango libpng jpeg giflib yarn add canvas

화면에 나타났을 때 어떤 애니메이션을 줄 것인가? css &.on에 등록해두고 나중에 classNames 라이브러리를 이용해서 호출한다 const YearHistroy = styled.div` display: flex; flex-direction: column; &.on { animation-name: opacity; animation-duration: 1000ms; @keyframes opacity { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0px); } } } `; 화면에 나타났을 때 style을 추가하는 script 부분 ( + 강제 Re-Render) 리액트의 DOM은 과거 DO..

3000번 포트를 사용해야하는데 이미 사용중이다? 사용중인 3000번 포트를 죽여야한다 lsof -i TCP:3000 PID를 확인하고 해당 프로세스를 죽이면 된다. 9는 영원히 죽이겠다는 옵션인 것으로 기억이 난다. kill -9 33203

화살표 아이콘을 누르면 블랙 반투명 레이어가 밑에서 천천히 올라온다 화살표 아이콘을 다시 누르면 반대로 천천히 내려간다 const Container = styled.div` position: relative; display: flex; flex-direction: column; `; const TextContainer = styled.div` position: absolute; top: 66px; left: 31px; `; const ArrowButton = styled.div` position: absolute; top: 178px; left: 29px; cursor: pointer; `; const Layer = styled.div` position: absolute; bottom: 0px; back..

import { NextResponse } from "next/server"; import { createCanvas } from 'canvas'; import Chart, { ChartConfiguration } from 'chart.js/auto'; export async function GET() { const data = { pokemon: { name: '꼬부기' } } return NextResponse.json({ data }); } export async function POST(request: Request, response: Response) { const data = await request.json(); console.log('req', data); const canvas = cre..

참고한 블로그 git reset, revert로 이전 커밋으로 돌리기 git reset, revert로 이전 커밋으로 돌리기, git, github, issue, projects, milestone kyounghwan01.github.io git log git revert 6ee01e76d234ead9a3ba7ed2c2b2ff8bacfcb8d1 // 취소하고 싶은 커밋 (가장 최신의 커밋) git revert b522ee858b342743205a68b179613cb715a6b798 // 취소하고 싶은 커밋 (두번째 최신 커밋) git add --all git commit -m '복원' git push origin master (안된다면 -f 추가)