react (16) 썸네일형 리스트형 Dead code check depcheck 호출하지 않는 라이브러리를 체크해 준다. $ yarn add -D depcheck $ yarn depcheck unimported 호출하지 않는 라이브러리, 파일을 체크해 준다. $ yarn add -D unimported $ yarn unimported 사용하지 않는 컴포넌트를 찾고자 하는데 요건 안되는듯 하다. call api when parameter is not empty in SWR ✅ Conditional Fetching useSWR 인자인 key 값이나, fetcher 파라미터에 null을 주면 swr는 fetch를 하지 않는다. ✅ mutate 같이 적용하기 export const getMall = (token: string) => { const { data, mutate } = useSWRImmutable('/mall', (url) => (token ? fetcher(url, null, token) : null)); return { mall: data?.result as MallProps, mutate, }; }; getMall 함수에서 token 값이 없으면 fetch를 진행하지 않는다. getMall 함수를 호출하는 곳에서 token 을 얻으면 다시 mutate 를 통해서.. 이미지 url로 base64 encode 값 구하기 export async function loadImage(url: string) { return new Promise((resolve) => { const img = new Image() img.src = url + "?timestamp=" + new Date().getTime() img.crossOrigin = "Anonymous" img.onload = () => { const canvas = document.createElement("canvas") canvas.height = img.height canvas.width = img.width const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(img, 0, 0) const base64 = ca.. 이미지를 ZIP파일로 다운 받아보자 In Next.js 이미지 서버에 있는 이미지 파일을 ZIP파일로 만들어 달라는 요구가 들어왔다. 먼저 이미지 파일을 불러와야 한다. react에서 다른 서버에 있는 파일에 접근할려면 cors 문제가 발생한다. next.js 를 사용한다면 이미지를 buffer로 변환하여 브라우저단으로 전달하여 다운 받을 수 있다. S3에 저장된 이미지를 다운 받는 법을 기록하겠음 ! ✏️ 1. 이미지를 buffer 데이터로 리턴하기 in API ... const blob = await fetch(url, { method: 'GET' }).then((res) => res.blob()); const ret = { result : Buffer.from(await blob.arrayBuffer()) } return res.send(ret); ne.. password protect zip file 생성기 in Next.js 💡 api 응답 값으로 zip file (+password protect)을 만들어 보자 ! 요구 사항은 엑셀 파일을 생성해야 하는데, 이때 보안상의 이유로 비밀번호를 달아야 한다. 엑셀 파일에다가 비밀번호를 설정할수 있는 라이브러리가 리액트나 nodejs에 있을거라 생각했는데 찾아도 발견하지 못했다. 여기서 고난이 시작됨 ! 결과 적으로 적용한 방법은 다음과 같다. 1. api 통해서 내용에 해당하는 값을 들고온다. 2. next.js api 단에서 1️⃣ 번 응답값을 가지고 엑셀 파일을 만든다. (xlsx라이브러리 사용) 3. 서버에 해당 파일을 저장한다. 4. 리눅스 zip 명령어를 사용하여 zip 파일을 만든다. 이때 비밀번호 옵션을 걸어서 비밀번호도 걸어준다 5. 서버에 저장된 zip 파일을 읽.. 브라우저에서 환경 변수 사용하기 In Next.js 💡브라우저단에서 환경 변수를 사용해 보자 ! env 파일에다가 NEXT_PUBLIC_XXX로 하면 된다고 하는데, 이상하게도 local에서 실행할때는 읽어오더니, production로 실행하니, 브라우저에서 undefined 결과가 나왔다. (아예 못읽어오는것도 아니고 서버에서는 읽어오더라.. 😠) 많은 삽질 끝에 브라우저에서 환경변수를 적용한 방법을 남긴다! 💡publicRuntimeConfig를 사용한 환경 변수 선언💡 #next.config.js ... module.exports = { publicRuntimeConfig : { PUBLIC_APPS_ENV : process.env.APPS_ENV }, ... } 이렇게 필요한 변수를 publicRuntimeConfig 안에다가 선언한다. 💡읽어오기.. Failed to load env from ~ error - Failed to load env from /~~~/.env.local TypeError: Cannot read properties of undefined (reading 'split') env 파일에 무언가 문제가 있나보다. dev 모드로 start 는 되길래, 우선 눈감고 배포시도해봤는데 production 모드에서는 start 실패했다. 구글링을 해보자 ! https://github.com/vercel/next.js/issues/35645#issuecomment-1086209406 big integer 를 응답으로 받아보자 개발을 하던중 큰 숫자로된 계정 값을 받아오는데, 이상하게도 끝자리가 0000로 끝났다. 백엔드 개발자에게 확인해 달라했지만 그런 처리는 하지 않는 다는 답변이 왔다. 리액트에서는 api 결과를 뿌려주기만 해서, 당연히 백엔드 문제라고 생각했는데, postman을 써서 호출해보니 정상적으로 응답이 왔다. js automatically round ~~ 이런식으로 구글링을 하던중, 답을 찾았다. https://stackoverflow.com/questions/43787712/axios-how-to-deal-with-big-integers axios - how to deal with big integers Here is my request: axios.get(url) .then(res => { console... 이전 1 2 다음
