웹개발/Next.js

Next.js에서 Axios로 JWT 토큰 인증 API 호출하기

튼튼발자 2025. 3. 28. 11:15
728x90

안녕하세요! 오늘은 Next.js 프로젝트에서 JWT 토큰을 이용해서 API를 호출하는 방법에 대해 이야기해보려고 합니다.
저도 처음 해보는 거라 엄청 떨리고, 뭐가 잘 안 되면 어쩌나 걱정도 많았는데요,
어찌저찌 하다 보니까 결국 성공해서 기분이 너무 좋더라고요!
그래서 저처럼 처음 도전하는 분들을 위해 정리 겸 공유하려고 합니다.

토큰 기반 API 호출이 뭔가요?

프로젝트를 만들다 보면, 서버와 데이터를 주고받을 때 "너 누구냐?"를 꼭 물어봐야 할 때가 있어요.
그럴 때 쓰는 게 바로 JWT (JSON Web Token)인데, 이걸 Authorization 헤더에 붙여서 보내면,
서버는 "오, 네가 맞네~" 하고 요청을 받아주는 거죠.

헤더에 붙이는 방법

Authorization: Bearer <토큰값>

근데 이걸 매번 넣어주는 건 좀 귀찮잖아요?
그래서 한 번 설정해두면 알아서 처리되도록 해보겠습니다!

🛠️ 프로젝트 세팅

일단 Axios를 설치합니다.(npm은 install 명령어로 설치하시면 됩니다. 저는yarn을 사용했어요.)

yarn add axios
더보기

🤔  왜 Axios를 쓸까?

Axios는 요청을 더 편하게 해주고, 설정이나 에러 처리도 깔끔하게 할 수 있어요.
특히 인터셉터라는 기능이 있어서, 토큰 같은 공통 헤더를 한 번에 관리하기 좋습니다!

Axios 기본 설정 파일 만들기

Axios 설정을 한 번 해두면 어디서든 편하게 쓸 수 있거든요.
우리가 사용할 토큰도 한 번에 처리하도록 세팅해볼게요.

🔑 .env 파일

NEXT_PUBLIC_API_BASE_URL=https://api.도메인주소.com

🔧 axios.ts 파일

import axios from "axios";

// 기본 URL 설정
axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;

// 토큰 가져와서 헤더 설정
const token = localStorage.getItem("token");
if (token) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}

// 인터셉터로 에러 처리
axios.interceptors.response.use(
    (response) => response,
    (error) => {
        if (error.response?.status === 401) {
            console.error("🚨 인증 오류: 토큰이 만료됐거나 유효하지 않음!");
            alert("로그인이 필요합니다!");
            localStorage.removeItem("token");
            window.location.href = "/login";
        }
        return Promise.reject(error);
    }
);

export default axios;

🤯 디버깅하면서 느낀 점

처음엔 401 에러 때문에 진짜 머리 쥐어뜯었어요.
알고 보니, 토큰을 제대로 못 가져오거나 만료된 경우가 많더라고요.
인터셉터로 처리를 해놔도 API 호출할 때마다 로그를 찍어보는 게 중요하다는 걸 깨달았죠.

😅 그때 유용했던 디버깅 방법입니다..!

 
console.log("🐾 API 요청 경로: ", axios.defaults.baseURL);
console.log("🔑 토큰: ", token);
console.log("🔗 유저 상태: ", response.data);

이렇게 찍어두니까 뭔가 잘못됐을 때 바로 확인할 수 있었어요.
꼭 "API 경로", "토큰 값", "응답 데이터" 이 세 가지를 로그로 찍어보세요!

728x90