728x90
반응형

분류 전체보기 209

dom-to-image를 이용하여 컴포넌트를 jpeg/png 파일로 만든 뒤, formData 형식으로 API Post하기

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

[Node] Puppeteer로 브라우저 제어하기 (스크린샷, 버튼클릭)

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

ETC 코딩/JS 2023.05.24

[Next] Victory Chart를 png 파일로 만들어서 Return 하는 Next.js API 만들기

본 예제는 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'; ..

Mac M1/M2에서 Brew 설치하기

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

ETC 코딩/ETC 2023.05.24

[Next] DOM(화면에 나타났을 때) animation CSS + 강제 re-render

화면에 나타났을 때 어떤 애니메이션을 줄 것인가? 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..

아래에서 천천히 올라오는 Transition CSS

화살표 아이콘을 누르면 블랙 반투명 레이어가 밑에서 천천히 올라온다 화살표 아이콘을 다시 누르면 반대로 천천히 내려간다 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..

[Git] 잘못 올린 커밋을 되돌리고 싶을 때

참고한 블로그 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 추가)

ETC 코딩/Github 2023.05.15
728x90
반응형