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

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

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

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

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

Next 13에서 API Route를 사용해보려고 한다. 아직 정확한 의미는 잘 알지 못하지만, Next에서 아주 간단하게 API를 만들 수 있는 것으로 이해하고 있다. 먼저, Next 13은 그사이에 File Structure가 변했다. 이제 app이라는 src와 비슷한 역할을 하는 directory 밑에서 모든 것을 구성한다. pages라는 폴더가 사라진 것도 처음에는 헷갈렸다. 여하튼 API를 만들기 위해서 다음과 같은 디렉토리 구조를 만들었다. 그리고 app/api/route.tsx를 만들어주고 다음과 같이 작성했다. import { NextResponse } from "next/server"; export async function GET() { const data = { pokemon: { n..

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 };

aws-sdk를 써서 직접 S3 bucket에 이미지 파일을 업로드할 수도 있지만 다음과 같이 PresignedURL을 통해서 S3로 이미지를 업로드할 수 있다. import axios from 'axios' const axiosUploadImage = axios.create({ baseURL: 'https://xeeeeesefd.execute-api.ap-northeast-2.amazonaws.com/prod', //임의 }) export { axiosUploadImage } import { Feedback } from 'types/qa' import { axiosUploadImage } from 'utils/axios' type PresignedUrl = { data: { bucket: string ..