[데브코스] Spring Boot 인증·인가(Auth) (41강) - 로그인 인증 정보(apiKey)를 로컬 스토리지에 저장하는 이유

41강에서는 로그인 시 발급받은 apiKey를 어디에 저장해야 하는지를 다룬다.
결론부터 말하면, 브라우저 로컬 스토리지(LocalStorage) 를 사용한다.

---

1️⃣ 왜 인증 정보는 저장이 필요할까?

서버는 모든 요청마다 이렇게 묻는다.

“이 요청을 보낸 사람이 누구냐?”

그래서 클라이언트는 모든 API 요청마다 인증 정보(apiKey) 를 함께 보내야 한다.

const response = await fetch("http://localhost:8080/api/v1/posts/1");

위 요청은 인증 정보가 없다.

• 만약 1번 글이 비밀글이라면 → 조회 실패
• 서버는 “너 누구야?” 상태

---

2️⃣ 인증 정보를 포함한 요청

const response = await fetch("http://localhost:8080/api/v1/posts/1", {
    headers: {
        Authorization: `Bearer ${apiKey}`
    }
});

이제 서버는 이렇게 판단할 수 있다.

• apiKey가 누구의 것인지 확인
• 작성자 본인이면 비밀글도 조회 허용

👉 인증 정보는 모든 요청에 포함되어야 한다.

---

3️⃣ 문제: apiKey를 변수에 저장하면?

let apiKey = "abcd-1234";

이 방식의 문제점은 명확하다.

• 페이지 새로고침 → 값 사라짐
• 다른 페이지 이동 → 값 사라짐
• 브라우저 재시작 → 값 사라짐

👉 즉,

로그인 상태가 유지되지 않는다.

---

4️⃣ 예제로 이해하기 (일반 변수)

console.clear();

let age = 0;

setInterval(() => {
    age++;
    console.log(`age : ${age}`);
}, 1000);

• 페이지 새로고침 → age 다시 0부터 시작
• 값이 메모리에만 존재하기 때문

---

5️⃣ 로컬 스토리지를 사용하면?

console.clear();

let age = parseInt(localStorage.getItem("age") ?? 0);

setInterval(() => {
    age++;
    localStorage.setItem("age", age);
    console.log(`age : ${age}`);
}, 1000);

이제 달라진 점:

• 페이지 새로고침 → 값 유지
• 브라우저 재시작 → 값 유지
• 다른 페이지 이동 → 값 유지

👉 브라우저에 영구 저장

---

6️⃣ 로컬 스토리지 확인 방법

1. 크롬 개발자 도구 열기
2. Application 탭
3. Local Storage
4. 저장된 값 확인

예시:

• age = 37

페이지를 새로고침해도
콘솔에는 37부터 다시 시작된다.

---

7️⃣ apiKey를 로컬 스토리지에 저장하는 이유

로그인 성공 시:

localStorage.setItem("apiKey", apiKey);

이렇게 저장해두면:

• 브라우저를 껐다 켜도 로그인 유지
• 다른 페이지로 이동해도 로그인 유지
• 새로고침해도 다시 로그인할 필요 없음

---

8️⃣ 실제 API 요청에서 사용하기

const apiKey = localStorage.getItem("apiKey");

const response = await fetch("http://localhost:8080/api/v1/posts/1", {
    headers: {
        Authorization: `Bearer ${apiKey}`
    }
});

👉 모든 인증이 필요한 요청에서 동일하게 사용 가능

---

9️⃣ 쿠키 vs 로컬 스토리지 (간단 비교)

방식	특징
쿠키	자동 전송 가능, 설정 복잡
로컬 스토리지	직접 관리, 구조 단순
일반 변수	새로고침 시 데이터 유실

이번 강의에서는 구조를 이해하기 쉽도록 로컬 스토리지를 선택한다.

---

🔟 핵심 정리

• 인증 정보(apiKey)는 모든 요청에 필요하다
• 일반 변수에 저장하면 페이지 이동/새로고침 시 사라진다
• 로컬 스토리지는 브라우저에 영구 저장된다
• 로그인 상태 유지를 위해 로컬 스토리지를 사용한다

---

이번 강의의 핵심은 이 문장이다.

“로그인 정보는 서버가 아니라,
브라우저가 기억해야 한다.”