개발 일지 개발 일지

dom을 이미지로 변환할 때 convas 테그는 dom Element와 독립적으로 존재히기 때문에 css를 가져오지 못한다. css파일에 있는 css style을 가져오지 못하기 때문에 css를 className으로 적용하는것이 아닌 인라인으로 style을 적용해야 한다.  처음부터 인라인으로 작성할 수도 있지만 너무 비효율 적이기 때문에 dom API를 이용해보도록 한다.   const computedStyle = window.getComputedStyle(element); getComputeStyle()은 이미 브라우저에 생성된 Style을 가져오는 dom API이다.   Array.from(computedStyle).forEach((key) => { element.style[key] = comp..

화면에 생성된 dom을 이미지로 다운로드 하기 위해서는 먼저 blob이나 file객체로 변환해야 한다.  그럼 어떻게 변환할 수 있을까? 1. 라이브러리 사용하기이미 dom을 이미지로 변환하는 라이브러리가 존재한다. html2canvas와 dom2image이다 그러나 html2canvas는 성능 문제가 있어 이미지로 변환할 때 화면이 멈추는 이슈가 있고domtoimage는 화질 이슈가 있다. 그래서 직접 구현하도록 하겠다.  2. 직접구현dom을 이미지로 구현하기 위해서는 dom을 svg테그안에 넣어주고 그이후 canvas를 통해 렌더링한 후 blob객체로 변환하여 다운로드를 하면 된다.  그럼 시작해 보자! 1. canvas생성하기먼저 canvas를 생성해야한다.  const canvas = do..

지난번 포스팅에서는 api rotuer에서 파일데이터를 다루는법을 포스팅하겠다. post요청을 할때 이미지를 formData를 통해 보낼 수가 있는데 page router는 formData를 처리하는 기능이 없다. app router는 있지만 page rotuer는 없어서 약간의 편법을 사용하도록 하겠다.  먼저 formData부분을 JSON으로 변경해야햔다. 다른데이터들은 상관이 없지만 파일 데이터는 약간의 변형이 필요하다.  images: { file: await Promise.all(values.images.map(async image => await getBase64(image as File))), fileName: values.images.map((image: u..

지난번 포스팅에서는 api router로 우회할 때 기존에 서버로 직접 api 요청을 보내는것을 다른 개발자들이 불편하지 않고 수청을 최대한 덜 하도록 axios instance를 변경하였고 api router에 여러개의 파라미터를 넣기 위해 [...]으로 파일이름을 정하는것까지 포스팅 하였다 오늘은 api router안에서 어떤식으로 코드를 작성하였는지 포스팅 하도록 하겠다.  [...server-request].ts 파일 세팅먼저 api router 파일을 만든다. import { NextApiRequest, NextApiResponse } from 'next';export default async function serverRequest(req: NextApiRequest, res: NextApiR..

프론트에서 api요청을 보낼때 cors error가 올때가 있다 이때 리버스 프록시를 통해 우회를 하게 되는데 next.js의 api router를 사용하여 우회해 보겠다.  먼저 url을 바꾸는데 axios instance를 이용하여 axios를 사용했기 때문에 base url만 바꿔주면 된다.  다음으로 page폴더 안에엤는 api폴더에 파일을 만든다. 우리는 외부서버에 api요청을 직접적으로 사용하지 않고 api router를 거쳐 외부서버에 요청하기 때문에 다양한 api router를 만들어 api요청을 하는것이 아닌 하나의 파일에서 모든 요청을 동적으로 처리해야 한다. 그러므로 [...]와 같은 구조분해할당으로 파일이름을 만든다. server-request폴더안에 [...server-reques..

유저가 접속한 장소를 식병할 때 gps정보를 허용받아 접속한 장소를 추론하는 경우 가 종종 있는데 그 방법을 몇가지 써보려고 한다.  1. 외부 api이용하기이미 사이트에 접속한 유저의 ip를 알려주는 api가 많이 있다 . https://api.ip.pe.kr/json/' https://ipinfo.io https://geolocation-db.com/json/ http://ipaddress.urgulbook.com/ 위 사이트에서 제공하는 api를 이용하여 접속자의 ip를 알아낼 수 있다.  e.g const ipRequest = async () => { const { data } = await axios.get('https://api.ip.pe.kr/json/'); console.lo..

현 magic pos 프로젝트를 진행하던중 QR code를 이미지파일로 다운로드하는 기능을 담당하였다 근데 QR code를 개별다운로드일때는 괜찮지만 전체다운로드를 하면 화면이 멈추는 문제가 발생했다. 화면이 멈추는 문제를 어떻게 해결했는지 작성해 보도록 하겠다. QR code를 다운로드를 하는 과정은 다음과 같다 QR code를 화면에 출력(qrcode.react 라이브러리 사용) -> 화면에 보여진 QR code를 이미지로 변환(domtoimage 리이브러리 사용) -> QR code 다운로드(file-server, jsZip 라이브러리 사용) 기존코드 import { QRdataType } from '@/shared/store/management'; import { saveAs } from 'fil..

// useMutation const uploadImageMutate = useMutation({ mutationFn: uploadMenuItemImage, onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MENU_CATEGORY_WITH_ITEM] }); }, }); return uploadImageMutate //mutationFn export const uploadMenuItemImage = async (uploadMenuItem: UploadMenuItemType) => { // 기존 storage 이미지 삭제 const { data: list } = await supabase.storage .from('images'..