FE

총 14개의 글

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

Next13 변화와 장점 빠르게 알아보기

들어가기 앞서 사이드 프로젝트를 진행하기 앞서, 소문의 Next13이 정말로 사용할만한 가치가 있는 것인지 판단하기 위해 Next13의 변화와 해당 변화에 대한 장점들에 대해 간단히 알아보았습니다. 톺아보기 수준은 아니지만, 빠르고 간단하게 Next13의 장점과 가치에 대해 알고 싶은 독자에게 도움이 되길 바랍니다. 변화 1 : app directory (beta) ❗ 프로덕션 환경에선 아직 사용하지 않기를 권장 설명 레이아웃 Layouts 파일 시스템을 통해 레이아웃 정의 가능합니다. 정의된 레이아웃은 상태를 유지하고, 다시 랜더링 되지 않습니다. 보다 자세한 정보는 여기에서 장점 상태를 유지 가능 비용이 많이 드는 재랜더링을 최대한 피할 수 있음 또한 경로간의 UI 또한 쉽게 공유 가능 사용 방법 /..

FE 2023.05.24

자바스크립트 배열 메서드 가이드 포스터 (번역)

출처 : Code of Relevancy (DEV) 자바스크립트는 웹 개발에서 널리 사용되는 강력한 프로그래밍 언어입니다. 자바스크랩트의 배열은 웹 개발에서 사용되는 기본적인 데이터 구조이며, 이들은 주로 데이터들을 저장하고 다루는 데 사용됩니다. 배열의 수많은 내장 메서드들을 통해, 자바스크립트 배열은 데이터를 조작하는 데 있어 매우 강력한 도구입니다. The JavaScript Array Methods Cheatsheet (역식자 : 아래의 인포그래픽 포스터를 의미. 이하 포스터로 명명) 은 자바스크립트의 주요 배열 메서드들을 다루는 가이드 입니다. 이 포스터는 자바스크립트 배열의 대한 숙련도를 빠르게 향상하고 싶어 하는 개발자들을 위한 레퍼런스가 되기 위해 디자인되었습니다. 당신이 개발 초보이던 숙..

FE 2023.02.13

[Next.js] 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까?

목표 왜 `next/Image` v.13에서 위와 같은 태도를 취한 건지 생각해 보는 시간 가지기 예상 소요 시간 10분 Next.js는 최근 v.13 버전이 릴리즈 되면서 정말 많은 것이 바뀌었고, 그로 인해 next/Image 또한 props 관련하여 정말 많은 변경이 있었습니다. 오늘은 버전이 업데이트됨에 따라 더 이상 objectFit을 필요로 하지 않게 된 next/Image에 대해 살펴보면서 왜 이렇게 변한 건지에 대해 생각해 보는 시간을 가지도록 하겠습니다. 기존의 next/Image에서 이미지 비율을 맞추던 방법, layout과 objectFit v.13 이전, 우리는 크기를 알 수 없는 이미지를 next/Image로 구겨 넣기 위해서 next/Image의 props로 layout="fil..

FE 2022.12.17

[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

[JS] LocalStorage & SessionStorage

목표 SessionStorage, LocalStorage에 대해 알고 상황에 따라 알맞을 storage를 고르는 능력 키우기 예상 소요시간 10분 프론트엔드 단에서 데이터를 저장하는 방법은 크게 3가지로 나뉩니다. 아주 전통적인 Cookie부터, 최근에 많이 사용되고 있는 LocalStorage와 SessionStorage가 있죠. 오늘은 세 가지 방법 중 LocalStorage와 SessionStorage, 두 저장방법에 대해 알아보고 비교하는 시간을 가져보도록 하겠습니다. Cookie : LocalStorage와 SessionStorage 이전의 방법 LocalStorage와 SessionStorage가 있기 이전에, 프론트엔드 측에선 데이터를 저장하기 위해 Cookie라는 방법을 사용했습니다. 쿠키..

FE 2022.12.11
< [1] [2] >

티스토리툴바