분류 전체보기 (36) 썸네일형 리스트형 이미지를 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... next.js http header 적용하기 Strict Transport Security header 를 적용해 보자 ! # next.config.js module.exports = { ..., async headers() { return [ { source :'/(.*)', headers : [ { key: 'Strict-Transport-Security', value: 'max-age=63072000;' } ] } ] } } https://nextjs.org/docs/api-reference/next.config.js/headers react-toastify - custom toast 적용하기 toast가 필요한데, 얕은 지식으로 직접 만들지는 못했고 react-toastify 라이브러리를 사용했다. 이때 자체 제작한 component 를 사용해보자 install yarn add react-toastify ToastContainer 적용 import { ToastContainer } from 'react-toastify'; import 'style/toast.css'; function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; toast 하나만 띄울거라서 limit 1로 걸어줬다. react-toastify에서 toast를 위한 css를 제공해 주는데, 거기에서 필요한 값부분만 가져와서 styl.. redis connect redis 라이브러리 사용시 연결 하는법 https://www.npmjs.com/package/redis redis A modern, high performance Redis client. Latest version: 4.1.0, last published: a month ago. Start using redis in your project by running `npm i redis`. There are 8397 other projects in the npm registry using redis. www.npmjs.com 해당 라이브러리 4 버전기준, username 이 default 일때 연결하는 법은 다음과 같다. import { createClient } from 'redis'; const url .. 이전 1 2 3 4 5 다음
