[12.27] jwt expired?🤔 jwt error는 try catch로 잡자!

2024.12.27 - [웹 개발 공부하기] - [12.27] 좋아요 추가 API 에 jwt 구현 해보기😲

 

jwt를 사용하다보면 가끔 만나는 오류이다.

하지만 500 에러인 만큼 백엔드에게 치명적인 오류이다...

500 에러는 그냥 무조건 백엔드 탓이기 때문이다 😂

그러니 절대 절대 만나면 안될... 그런 오류다 ㅠㅠ

500 에러가 떴다고 해서 서버가 꺼지진 않는다. 그래도.. 사용자가 만나면 굉장히 당황할 만한 그런 에러이다.

 

jwt expired를 알아보기 위해, 유효기간이 1분인 토큰을 발행해서 검증을 해보았다.

TokenExpriedError 라고 적히고, jwt expired 라는 오류가 뜬다.

그리고 무시무시한 500 에러가 뜬다.

말 그대로.. 유효기간이 지난 Token이야. 못 받아줘! 라는 것이다.

그럼 어떻게 해야하나? 이런 걸 보통 예외 처리를 한다 라고 하는데..

유효기간이 만료되면 다들 한 번쯤은 겪은 그 창을 볼 수 있다.

바로.. 세션이 만료되었습니다 or 인증 세션이 만료되었습니다. or 로그인 세션이 만료되었습니다. 창이다...

 

유효기간 지났으니, 로그인 다시 해서 토큰 다시 발급받아! 라는 거다.

사용자에게 500 에러를 보여줄 게 아니라, 저 창을 띄워줘야 한다는 것이다.

 

💥 jwt 예외 처리

보통 지금까진 예외 처리를 위해 if else 문을 사용하였다.

문제는 없지만 jwt 같은 경우엔 쉽게쉽게 처리를 하라고, 기본적으로 제공하는 방법이 있다.

미리 얘기를 해두자면 try-catch 구문이다. 그래서 이번 예외 처리는 try catch 를 사용할 예정이다.

 

jwt에선 어떤 예외 처리가 있는가.. 를 보자면

vscode에 jwt.를 치면 error 3가지를 볼 수 있다. 이건 Node가 미리 준비해준 것이다.

jwt 쓸 때 이런 에러 많이 발생할걸? 그래서 내가 먼저 준비해뒀어 ㅋ

이런 느낌이다.

 

보통 jwt 예외 처리에선 크게 2개를 신경 써야한다.

1) TokenExpiredError

2) JsonWebTokenError 이다.

 

 - TokenExpiredError

 : 유효기간이 지난 토큰 = 만료된 토큰

 

 - JsonWebTokenError

 : 문제 있는 토큰 

 

💥 try catch 구문

try catch 구문은 수많은 에러를 처리하는 문법이다.

개발자가 실수를 하거나, 사용자가 입력을 잘못하거나, DB가 예상하지 못하게 응답을 잘못하거나..

이렇게 개발자가 예상하지 못한 에러도 있을 수 있다. 이런 에러를 처리하는 문법이라고 보면된다.

 

실수1, 실수2 ... 비슷한 분류들끼리 묶어서 누군가.. 따로 관리를 해주면 좋겠다.

 

A 코드 실행

if (A에서 발생한 실수1) {

} else if (A에서 발생한 실수2) {

} ...

 

이런 식으로 사용했던 if else 문을

 

try {

    // A 코드 실행

} catch(err) {

    // 에러 처리

}

 

이렇게 try catch 로 사용할 수 있다.

 

try {
    username;
} catch(err) {
    console.log("username이 선언되지 않았습니다.");
    console.log("발생한 에러는 다음과 같습니다.");
    console.log(err);

 

username; 으론 무조건 에러가 난다.

ReferenceError : username is not defined 이렇게 뜰 것이다.

근데 보통 에러가 나면 바로 프로그램이 끝나고 에러만 띄워준다.

하지만 try catch를 위와 같이 쓴다면,

console창에 "username이 선언되지 않았습니다.", "발생한 에러는 다음과 같습니다."가 같이 띄워지고

err를 띄워줄 것이다.

username의 에러도 catch에 잡히는 것이다.

 

실수가 100개가 발생할 것 같은데 그걸 다 어떻게 고민해주지? 라고 생각했을 때,

try catch를 사용한다면 (err)라는 매개변수에 자동으로 다 들어가게 되는 것이다.

 

에러가 안 난다면?

catch는 안 읽히고 try 만 끝까지 다 하고 빠져나간다.

 

try에서 에러가 났다면 그 밑의 코드는 읽나요?

X 안 읽는다. 그 밑의 코드로 내려가지않고  try 코드를 멈추고 catch로 err와 함께 바로 빠져나간다.

 

즉, try 구문에서 어떤 에러가 발생해도, 우리가 다 if문 분기 처리를 해주던 내용들이 알아서 catch로 잡힌다.

ex) SyntaxError, TypeError 등등...

 

💥 에러 객체

자바스크립트가 많고 많은 에러들을 보면서 "내장" 에러 객체를 만들어두었다.

JWT라는 모듈에서도 제공하는 에러 객체도 있다. 또한, 개인이 직접 만들어서 쓸 수도 있다.

let string = '{ "num1":1 ';
try {
    // username;
    let json = JSON.parse(string);
    console.log(json);
} catch(err) {
    console.log(err.name);
    console.log(err.message);
}

이렇게 로직을 짰을 때, 당연히 에러이기 때문에 try를 중단하고 catch로 넘어갈 것이다.

그럼 err의 name과 err의 message는 어떻게 뜰까?

위의 에러와 아래의 에러를 보니 다른 건 없어보인다.

다만, SyntaxError와 그 뒤의 Expected가 분리되어 나온다.

즉, 앞의 SyntaxError는 err의 name이고, 그 뒤의 Expected는 err의 message 인 것이다.

 

💥 Throw 연산자

throw 연산자는 에러를 발생시키는 연산자이다.

ex) throw new SyntaxError();

 

이 throw 연산자는 언제 쓰느냐..

let string = '{ "num1":1 }';

try {
    let json = JSON.parse(string);
    console.log(json.name);
} catch(err) {
    console.log(err.name);
    console.log(err.message);

    console.log(err);
}

이러한 로직이 있다고 치자.

그럼 에러가 뜰까? json.name이 뜰까?

undefined가 뜬다.

엥? 우리 입장에선 undefined 에러인데.. 에러를 보여주는 게 아니라 undefined를 보여주면 어떡해;

라고 되는 것이다.

즉, js 입장에선 undefined는 에러가 아니다. 하지만 우리 입장에선 입력값이 잘못된 에러인 것이다.

이럴 때 사용을 하는 것이다.

 

let string = '{ "num1":1 }';

try {
    let json = JSON.parse(string);
    
    if(!json.name){
        console.log("입력 값에 이름이 없습니다.");
    } else {
        console.log(json.name);
    }

    let name = json.name;
    console.log(name);
} catch(err) {
    console.log(err.name);
    console.log(err.message);

    console.log(err);
}

만약에 내가 어느정도 예외처리를 했다고 생각하고 if else로 예외처리를 해주었다.

입력 값에 이름이 없습니다. 가 나오면 에러로 생각하고 catch로 넘어가겠지? 라고 생각했는데,

if문을 지나 밑에 있는 let name = json.name; console.log(name); 까지 읽어버린다.

즉, 에러라고 생각하지 않기 때문에 catch로 넘어갈 수가 없다는 것이다.

이럴 때 throw를 사용해야한다.

console.log("입력 값에 이름이 없습니다"); 코드를

throw new SyntaxError("입력 값에 이름이 없습니다");

로 변경시켜서 돌려보겠다.

 

입력 값에 이름이 없습니다. 를 console창에 찍은 후,

throw를 만나서 에러를 발생시켜 그 밑의 코드를 읽지 않고 catch에 내가 발생시킨 객체가 들어가는 걸 볼 수 있다.

이렇게 필요에 의해서 사용할 때가 있다. throw도 자주 사용하는 연산자 이기 때문에 알아두는 게 좋을 것 같다.