FE/Trouble Shooting

총 7개의 글

JWT_SESSION_ERROR (feat. next auth)

JWT SESSION ERROR와 HS512 알고리즘에 대해 알아보자 에러 상황 JWTKeySupport: the key does not support HS512 verify algorithm The algorithm used for generating your key isn’t listed as supported. You can generate a HS512 key using jose newkey -s 512 -t oct -a HS512 HS512 알고리즘? JWT에서 사용하는 12개의 기본 서명 알고리즘 중 하나. 대칭 알고리즘에 속한다. (1개의 secret key를 공유함) 512bit의 digest를 생성하며, 적어도 64 bytes 이상의 secret key를 사용한다. JWT secret n..

FE/Trouble Shooting 2023.06.03

Fly.io 앱과의 통신 도중의 Axios Timeout Error (feat. NodeJS, express, 삽질)

한줄 요약 fly.toml파일의 http section 중 internal_port에서 설정한 포트 넘버가 코드 상의 포트넘버와 동일한지 확인해 봅시다!! 문제 상황 fly.io를 통해 배포한 앱(백엔드 서버)과 통신할 때 axios timeout 에러 발생. local:8080 환경에서는 에러가 발생하지 않으나, 동일한 코드로 배포한 fly.io에서만 문제가 생기는 상황이었다. 문제 원인 fly.toml파일의 http section 중 internal_port 설정 코드상의 PORT와 일치하지 않아 생긴 문제 fly.toml? fly.io를 통해 배포할 앱을 구성할 수 있는 파일. 배포할 앱의 빌드, 환경 변수, internet-exposed services, disk mounts, 배포 명령등을 구성..

FE/Trouble Shooting 2023.06.03

MongoDB querySrv ENODATA 에러

문제 원인 스타벅스 등의 공용 와이파이에서의 mongodb접근하기 때문에 생기는 문제 문제 해결 와이파이 설정 변경을 해 주면 해결할 수 있다. 1. 와이파이 설정으로 들어간다 2. 사용하고 있는 와이파이의 세부사항을 눌러준다 3. DNS 서버 주소에 8.8.8.8을 추가해준다 4. 와이파이를 껐다 킨 후 다시 mongoDB에 접속해본다

FE/Trouble Shooting 2023.05.31

next_auth 404에러 (feat. next13)

문제 상황 next13 프로젝트에서 next_auth 라이브러리의 signIn()을 사용하자 404에러가 남 문제 원인 […nextauth].ts 파일의 위치를 잘못 잡아서 생긴 문제. 해결 방법 […nextauth].ts 파일을 page/api/auth 폴더 내부로 옮겨주자. 하지만 next_auth쿤…내 next13 프로젝트는 app 폴더 기반이라굿..! 상관하지 않아도 된다. 우리의 프로젝트가 /app 폴더 기반이라도, next_auth는 오로지 /page에서만 동작한다. 프로젝트 최상단에 /page/api/auth 폴더를 추가해줘서 그곳에 […nextauth].ts 파일을 넣어주자. app 폴더와 page폴더가 함께 존재하는 이상한 상황이라도,,,그러려니 하자. next_auth 공식으로 발표한 ..

FE/Trouble Shooting 2023.05.30

next13에서 환경변수를 로드할 때 undefined으로 로드되는 에러

문제 상황 process.env를 통해 환경변수를 불러왔을 때, undefined으로 나옴 next13에서는 process.env를 별도의 라이브러리 설치 없이 기본적으로 사용가능하다. 문제 원인 및 해결 방법 에러 방랑자(?) 당신의 에러도 다음 중 하나이길 바란다. 원인 1. process.env를 비구조화 할당을 통해 불러옴 env는 비구조화 할당을 통해 불러올 수 없다. 비구조화 할당을 풀어주도록 하자. 참고로 Dynamic Variables (동적 변수) 도 process.env에서는 먹히지 않으니 주의하도록 하자. // Before const { NEXT_PUBLIC_PRIVATE_KEY } = process.env; // After const PRIVATE_KEY = process.env.N..

FE/Trouble Shooting 2023.05.30

[ERROR] GET ${IMAGE_URL} net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)

에러 코드 "GET ${IMAGE_URL} net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)" 의 src 어트리뷰트에 특정 이미지 url을 넣을 때 발생 에러 원인 해당 에러는 img의 src에 브라우저에서 정해둔 캐시 이상의 큰 값을 넣을 때 발생합니다. 저 같은 경우에는 미리보기 기능을 만들던 도중, 미리보기의 src 어트리뷰트에 base64 url을 넣어 생기는 문제였습니다. base64 url이 너무 길어 브라우저가 제한 해 둔 캐시를 넘어섰기에 브라우저 자체적으로 GET을 중단하고 error를 던져 발생한 에러였습니다. 당시 src로 넣고 있던 base64 url ) "iVBORw0KGgoAAAANSUhEUgAAAFoAAABXCAY..

FE/Trouble Shooting 2022.12.14

[ERROR] illegal base64 data at input byte 4

에러 코드 "illegal base64 data at input byte 4" 에러 원인 백엔드 (GO)에서 지정한 규칙 (타입, 형식 등)을 벗어난 값을 프론트에서 보내서 생기는 에러입니다. 저 같은 경우에는 base64 형식에 맞는 값을 보내야 했으나, base64형식에 맞지 않은 값을 보내고 있어서 발생한 에러였습니다. 백엔드에서 요구하는 값 예시 ) "iVBORw0KGgoAAAANSUhEUgAAAFoAAABXCAYAAACENlLc.....==" 실제로 제가 보내고 있던 값 ) "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoA.....==" 헤헤... 좀 부끄럽네요 😅 FileReader의 result를 split하지 않고 통째로 가져다 써서 생긴 문제였습..

FE/Trouble Shooting 2022.12.05
< [1] >

티스토리툴바