프로젝트에서 이미지 파일을 압축하고 webp로 변환하여 서버로 전송하도록 했다. 분명 file.type이 image/webp가 되는 걸 확인했는데 서버에서 받은 이미지 URL에는 원본 파일의 확장자가 적용되어 있었다. import Compressor from 'compressorjs';export async function compressImage( file: File, quality: number = 0.8,): Promise { return new Promise((resolve, reject) => { new Compressor(file, { quality, mimeType: 'image/webp', maxWidth: 880, maxHeight: 62..
프로젝트에서 S3에서 받아온 이미지 URL을 파일로 변환해서 서버로 보내야 하는 경우가 있었다. 파일 변환을 위해 S3 URL에 GET 요청을 해서 blob 타입으로 응답을 받아와야 했는데 여기서 CORS 오류가 발생했다. 요청 코드는 다음과 같다.import axios from 'axios';export const convertURLtoFile = async (url: string) => { try { const response = await axios.get(url, { responseType: 'blob', withCredentials: true, }); const blob = response.data; return new File([blob], 'pro..
프로젝트에서 쿠키를 설정하면서 발생했던 문제 및 해결 방법을 기록한다. 1. 로컬 환경에서 서로 다른 도메인 간 쿠키 사용하기 - proxy 사용 도메인 - localhost, http://ec2-.xxx.com proxy를 사용하기 전에는 쿠키 도메인이 백엔드 도메인으로 세팅이 되어서 새로고침 시 쿠키가 삭제되고, 서버에서도 내가 보낸 쿠키를 읽을 수 없는 오류가 있었다. 로컬 환경에서는 proxy를 사용하여 동일한 도메인에서 요청한 것처럼 동작하게 할 수 있다. proxy를 설정할 수 있는 setup 파일에서 proxy 설정을 추가한다.vite.config.jsimport react from '@vitejs/plugin-react-swc';import { defineConfig, loadEnv..
프로젝트에서 쿠키를 사용하게 되었는데, 로컬 환경에서는 프론트엔드와 백엔드의 도메인이 달라 proxy를 적용해 주어야 했다. proxy 서버 URL은 환경 변수에 저장했다. 그런데 vite.config.js에 proxy 값으로 환경 변수를 설정했는데 proxy가 동작하지 않았고, 확인해 보니 환경 변수 값이 undefined로 나왔다. env 값을 제대로 가져오지 못한 게 원인이었다. import.meta.env를 사용했을 때 'ImportMeta' 형식에 'env' 속성이 없습니다.ts(2339)라는 오류가 떠서 Node에서 하듯이 process.env를 사용했는데 오류는 없었지만 값을 가져오지 못했다. 찾아보니 Vite는 .env 파일을 기본적으로 로드하지 않는다고 한다. 참고로 Vite는 Vit..
서버 컴포넌트에서 api 요청 결과에 따라 redirect 경로를 설정하는 코드가 있었는데 try-catch로 감싸줬더니 오류가 발생했다. Error: NEXT_REDIRECT at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19) at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11) at ... Next.js 공식 문서에 따르면 redirect가 NEXT_REDIRECT 오류를 발생시켜 try-catch 블록 내에서 사용하면 에러에 잡..
설치한 라이브러리npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react 이전에 작성한 jest 설정 코드(jest.setup.js)import '@testing-library/jest-dom'(jest.config.js)const nextJest = require('next/jest')const createJestConfig = nextJest({ dir: './',})const customJestConfig = { rootDir: '.', setupFilesAfterEnv: ['/jest.setup.js'], moduleNameMapper: { '^@/(.*)$': '/app..
진행하고 있던 사이드 프로젝트를 Firebase Hosting으로 배포하고, github actions도 적용하여 merge나 pull requests 발생 시 배포 환경에 변경사항이 자동 반영되도록 하려고 했다. 그런데 로컬에서 빌드 후 cli를 통해 배포할 때는 배포 사이트가 잘 동작했는데github actions으로 배포만 하면 환경 변수를 못 찾아서 빈 화면이 되어버리는 것이었다... 배포를 위해서 환경 변수를 actions secrets에 추가하고 yml 파일에도 다음과 같이 env를 추가해 주었는데 동작하지 않았다. // .github/workflows/firebase-hosting-merge.ymlname: Deploy to Firebase Hosting on mergeon: push:..
타입스크립트로 개발하던 중 마주한 오류... 이전에 다른 프로젝트를 개발할 때, currentTarget을 대신 사용했던 기억이 있어 currentTarget을 사용해 보았는데.. currentTarget이 null로 나왔다. 같은 부모 아래에서 다른 span 태그로 테스트했을 때는 알던 대로 currentTarget과 target이 동일하게 나온 것을 보니 정확한 이유는 모르겠지만 fetch의 then 안에서 사용해서 그런 것 같다. (scope의 문제 같은...) 정확한 이유와 여기서 currentTarget을 사용하는 방법을 아신다면 댓글로 알려주시면 감사하겠습니다..!! currentTarget을 사용할 수 없어 다른 방법으로 해결해 보기로 했다. currentTarget과 target의 차이가 ..
VSCode로 작업할 때, 갑자기 어느 순간 Prettier이 적용이 안될 때가 있다. 검색하면 주로 나오는 해결 방법들. Default Formatter 설정 Format On Save 설정 Setting.json에서 위의 두 가지 설정 확인 구글링을 해보니 이 세 가지 방법이면 대부분의 오류는 해결이 되는 것 같다. 본 글에서는 내가 겪은 오류, Prettier이 특정 파일에서만 적용이 안되는 경우에 대해 말해보려고 한다. 특히 저장을 눌렀을 때 다음과 같이 뜬다면 오류가 뜬 Prettier을 눌러보자. Prettier을 누르면 위와 같이 로그가 나오고, 나의 경우 코드 내에서 태그 오류가 있음을 확인할 수 있다. 태그 오류를 수정하니 Prettier이 정상적으로 작동하였다. Live Server로 ..
