오늘 한 것

fly.io 서버 문제 해결
블로그 스킨 변경
- 블로그 글 태그 추가
- 블로그 params 숫자에서 제목 방식으로 변경
homepage api 구현
- cardlistdata 구현
- 무한스크롤 구현
- 카드 타입 변경 기능 구현

오늘 배운 것

[next auth] JWT_SESSION_ERROR

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

next_auth의 option 중 하나. […nextauth].ts파일에서 설정 가능하다.

토큰을 해시하고, 쿠키를 사인하고 암호화하여 암호화된 키를 생성하기 위해 사용되는 랜덤의 string. 이때의 string은 반드시 HS512 알고리즘을 따라야 한다.

만약 환경변수에서 NEXTAUTH_SECRET을 선언하였다면, 이 option을 별도로 선언할 필요는 없다.

배포 환경에서는 반드시 secret 옵션 설정, 혹은 NEXTAUTH_SECRET 설정 둘 중 하나는 반드시 이뤄져야 한다!!! 🔥

문제 원인

JWT에서 사용하는 secret 키가 HS512 알고리즘 규칙에 맞지 않는 키이기 때문에 생기는 문제.

문제 해결

기존에 사용하던 NEXTAUTH_SECRET 환경 변수, 혹은 […nextauth].ts의 secret옵션의 값을 HS512 알고리즘 규칙에 맞는 string으로 변경해주면 된다.

~~(젭알 되게 해주세요)~~ ~~(응 아니야~ 이거 때문 아니니까 돌아가)~~

🔥 Fly.io 서버 통신 도중의 timeout Error

한줄 요약

fly.toml의 http section 중 internal_port에서 설정한 포트 넘버가 코드 상의 포트넘버와 동일한지 확인해 봅시다!!

이 에러에 대한 더 자세한 원인과 해결 방법은 여기에서 확인할 수 있다.

mongoDB cursor 메서드

cursor란?

일반적으로 cursor(이하 커서)란 특정 SQL 문장을 처리한 결과를 담고 있는 영역을 가리키는 일종의 포인터이다.

MongoDB에서 커서란 MongoDB가 find() 메서드를 통해 넘겨주는 결과의 집합을 말한다. 커서의 메서드들을 통해 결과 수를 제한하거나, 특정 수 만큼 결과를 건너뛰거나, 정렬 등을 하는 것이 가능하다.

cursor.sort()

cursor를 정렬할 수 있는 메서드.

field 자리에 정렬하고 싶은 프로퍼티 이름을 적어주고, 값으로는 1 (오름차순) 또는 -1 (내림차순)을 적어주면 된다. 반드시 조회 전에 설정해야한다.

db.collection('YOUR_COLLECTION_NAME').find().**sort({field: value})**

cursor.skip()

find() 메서드가 반환할 값의 시작점을 지정할 수 있는 메서드.

skip의 값만큼 반환할 값의 시작점이 건너뛰어진다. 값은 number 타입을 받는다.

db.collection('YOUR_COLLECTION_NAME').find().skip(10) // 10 인덱스만큼 건너 뛰어진다.

cursor.limit()

find() 메서드가 반환할 값의 개수를 제한하는 메서드.

limit 값만큼 제한된 값이 리턴된다. 값은 number 타입을 받는다.

db.collection('YOUR_COLLECTION_NAME').find().limit(5) // 5개의 결과만 리턴된다.

응용

이름이 card인 컬렉션의 커서들을 popular 프로퍼티를 기준으로 내림차순으로 정렬한 후,
11번째 값부터 20번째 값까지 줘.

db.collection('card').find().sort({popular: -1}).skip(10).limit(10);

무한 스크롤 구현

observer option 설정

const observerOption = { 
    threshold: 0.1, 
    rootMargin: "100px 0px" 
};

observer callback 설정

const observerCallback = (entries: any, observer: any) => {
  entries.forEach((entry: any) => {
    if (entry.isIntersecting) {
      observer.unobserve(entry.target);
            // 해당 객체가 화면에 나타날 때 마다 실행할 함수 작성
    }
  });

observer 선언

observer.current = new IntersectionObserver(
  observerCallback,
  observerOption
);

observer에 observe할 Dom 요소 삽입

const domList = document.querySelectorAll(".dom");
    const lastDom = domList[domList.length - 1];
    if (!!lastDom) {
            //.dom을 클래스명으로 가진 요소 중 가장 마지막 요소를 observer에 추가
      observer.current.observe(lastDom);
    }

오늘 느낀 점

진짜 미쳐버릴 것 같던 fly.io 앱 에러를 드디어…드디어 해결했다..!! 에러의 원인이 간단해서 더 화..가 나긴 했지만…그래도 온전히 내 힘으로 해결해 본 문제라서 너무 뿌듯했다.

에러에 관한 자세한 이야기는 여기에서 확인할 수 있다.

아무래도 생긴지 얼마 되지 않은 배포 도구(fly.io)인 것도 있고, 나와 같은 에러 케이스가 스택 오버플로우에도 전혀 없기 때문에 더더욱 문제의 원인을 찾기 힘들었다. 특히 session callback안에 axios를 넣어놨기 때문에 내부 코드 진행상황을 더 찾기 어려운 것도 있었다. 결국 해결하기 위해 session callback안에 있던 axios코드들을 전부 꺼내서 테스트 해 봤을 정도이니 말이다.

그만큼 힘들게 해결한 에러인 만큼, 당분간 이 에러 만큼은, 그리고 이 에러를 해결하기 위해 시도했던 모든 테스트들은 잊지 못할 것 같다 ㅋㅋ

TIL #053 (0)	2023.06.06
TIL #052 (0)	2023.06.05
TIL #050 (0)	2023.06.02
TIL #049 (0)	2023.06.02
TIL #048 (0)	2023.05.31

TIL #051