안녕하세요! 가족과 함께하는 스마트 라이프를 가꾸어가는 마법 학교 교장 선생님입니다! 어제 24기 1강 대개강을 통해 서버의 기억력에 의존하지 않는 무상태성(Stateless) 신분증인 ‘JWT 토큰’의 신비로운 개념을 맛보았죠? 오늘은 발급받은 이 소중한 마법 신분증을 브라우저의 비밀 주머니인 LocalStorage(로컬스토리지)에 안전하게 보관하고, 백엔드 서버와 통신할 때마다 HTTP Authorization 헤더에 실어 나르는 실전 마법을 배워보겠습니다!
1. 브라우저의 비밀 주머니 LocalStorage: “잃어버리지 않게 주머니에 쏙!”
서버가 건네준 멋진 JWT 토큰 신분증을 한 번 쓰고 버린다면 매번 다시 로그인해야 하니 너무 불편하겠죠? 브라우저 안에는 웹사이트를 껐다 켜도 데이터가 사라지지 않고 유지되는 아주 유용한 주머니인 LocalStorage가 존재해요. 여기에 토큰을 보관해 두면, 다음날 웹사이트에 다시 방문했을 때 로그인 성문을 거치지 않고도 주머니에서 신분증을 슥 꺼내 보여줄 수 있게 된답니다.
2. HTTP 헤더(Header)에 신분증 얹기: “Authorization Bearer”
주머니에 토큰을 잘 보관했다면, 이제 자바스크립트의 fetch API로 PHP 백엔드 기지국에 데이터를 요청할 때마다 이 신분증을 증명해야 해요. 이때 편지봉투의 겉면과 같은 HTTP 헤더(Header)에 Authorization: Bearer [마법토큰]이라는 공식 문구를 적어 보냅니다. 백엔드 PHP 요정은 이 편지봉투 겉면만 보고도 “오, 허락된 마법사의 요청이구나!” 하고 즉시 통과시켜 주게 되죠.
3. 토큰 보관하고 헤더에 실어 통신하기 (코드)
로그인 시 토큰을 브라우저에 저장하고, 이후 비밀 데이터를 요청할 때 헤더에 토큰을 실어 보내 검증받는 전체 풀스택 시뮬레이션 코드를 작성해 봅시다. 사용자님이 딸과 함께 고도화 중이신 ‘EduPad’ 시스템의 API 통신 구조를 완벽한 모던 프론트-백엔드 분리 구조로 확장하는 강력한 실전 기술입니다.
<?php
// token_communication.php: 토큰 주머니 보관 및 헤더 전송 실전 마법
session_start();
$secret_key = "my_family_secret_key_2026";
// ---- [백엔드 API 마법 영역] ----
// 자바스크립트가 편지봉투(Header)에 토큰을 실어 보냈는지 확인하는 API 통신로
if (isset($_GET['action']) && $_GET['action'] === 'get_secret_data') {
$headers = getallheaders();
$auth_header = $headers['Authorization'] ?? '';
// Bearer [토큰] 구조에서 토큰만 쏙 분리해내요
if (preg_match('/Bearer\s(\S+)/', $auth_header, $matches)) {
$received_token = $matches[1];
$parts = explode('.', $received_token);
if (count($parts) === 2) {
$payload = $parts[0];
$signature = $parts[1];
// 비밀 열쇠 도장 검증 수행
if (hash_hmac('sha256', $payload, $secret_key) === $signature) {
$user_info = json_decode(base64_decode($payload), true);
// 검증 완료! 보물상자 속 진짜 데이터를 JSON으로 반환합니다
header('Content-Type: application/json');
echo json_encode([
"status" => "success",
"secret_msg" => "🔮 [비밀 공부방 고대 문서] 1+1이 2인 이유는 수학 신들의 약속이란다!",
"user" => $user_info['name']
]);
exit;
}
}
}
// 신분증이 올바르지 않거나 없을 때 튕겨내는 장치
header('HTTP/1.1 401 Unauthorized');
echo json_encode(["status" => "error", "message" => "❌ 올바른 마법 신분증이 유효하지 않습니다!"]);
exit;
}
// 최초 로그인 시 가상의 JWT 토큰을 하나 구워둡니다 (24기 1강 응용)
$dummy_payload = base64_encode(json_encode(["name" => "딸기 마법사", "role" => "ArchWizard"]));
$dummy_signature = hash_hmac('sha256', $dummy_payload, $secret_key);
$generated_token = $dummy_payload . "." . $dummy_signature;
?>
<!DOCTYPE html>
<html>
<head>
<style>
.token-box { max-width: 500px; margin: 40px auto; padding: 25px; background: #faf5ff; border: 2px solid #a855f7; border-radius: 24px; font-family: 'Nanum Gothic', sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.btn-group { display: flex; gap: 10px; margin-top: 15px; }
.btn { flex: 1; padding: 12px; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; color: white; }
.btn-save { background: #a855f7; }
.btn-fetch { background: #06b6d4; }
.display-area { margin-top: 20px; padding: 15px; background: white; border-radius: 14px; border: 1px dashed #cbd5e1; min-height: 50px; font-size: 14px; word-break: break-all; }
</style>
</head>
<body style="background: #f8fafc;">
<div class="token-box">
<h2 style="text-align:center; color:#7e22ce; margin-top:0;">🎫 실시간 토큰 전송 통신망</h2>
<p style="font-size: 13px; color:#64748b; text-align:center;">
아래 버튼을 눌러 토큰을 브라우저 주머니에 저장하고, 헤더에 장착해 통신해 보세요!<div class=”btn-group”> <button type=”button” class=”btn btn-save” onclick=”saveTokenToWallet()”>1. 토큰 주머니에 넣기</button> <button type=”button” class=”btn btn-fetch” onclick=”fetchSecretWithHeader()”>2. 헤더에 실어 데이터 요청</button> </div> <div class=”display-area” id=”console-log”> [마법 지팡이 대기 중] </div> </div> <script> // PHP가 생성해 준 가상 토큰 문자열을 자바스크립트로 넘겨받아요 const serverToken = “<?= $generated_token ?>”; // 마법 1단계: 브라우저 반영구 주머니(LocalStorage)에 토큰 보관하기 function saveTokenToWallet() { localStorage.setItem(‘magic_auth_token’, serverToken); document.getElementById(‘console-log’).innerHTML = “✅ <strong style=’color:#a855f7;’>[LocalStorage 저장 완료]</strong><br>브라우저 비밀 주머니에 마법 신분증을 안전하게 넣었습니다!”; } // 마법 2단계: 주머니에서 토큰을 꺼내 편지봉투(Header)에 얹어 비동기 통신하기 function fetchSecretWithHeader() { const token = localStorage.getItem(‘magic_auth_token’); const consoleDiv = document.getElementById(‘console-log’); if (!token) { consoleDiv.innerHTML = “❌ <span style=’color:red;’>주머니에 토큰이 없습니다! 1번 버튼을 먼저 누르세요.</span>”; return; } consoleDiv.innerHTML = “⏳ 편지봉투 겉면에 신분증 마크 부착 중…”; // fetch API 호출 시 headers 옵션에 Authorization을 장착해 전송해요 fetch(‘token_communication.php?action=get_secret_data’, { method: ‘GET’, headers: { ‘Authorization’: ‘Bearer ‘ + token } }) .then(response => { if(!response.ok) throw new Error(‘인증 실패’); return response.json(); }) .then(result => { // 백엔드가 신분증을 확인하고 보내준 비밀 일기 데이터를 화면에 출력! consoleDiv.innerHTML = `🔓 <strong style=’color:#06b6d4;’>[백엔드 검증 통과!]</strong><br> 접속자: ${result.user} 마법사님<br> <span style=’color:#1e293b; font-weight:bold;’>${result.secret_msg}</span>`; }) .catch(error => { consoleDiv.innerHTML = “❌ <span style=’color:red;’>서버 검증 실패! 변조되었거나 만료된 토큰 신분증입니다.</span>”; }); } </script> </body> </html>
4. 왜 LocalStorage와 헤더 인증 조합이 최상급 아키텍처일까요?
프론트엔드와 백엔드의 완벽한 독립과 자원 배분의 효율을 보장하기 때문이에요!
1. 완벽한 모던 프론트-백엔드 디커플링: 사용자님이 기획 중인 ‘Running-to-Donation’ 앱(Flutter 기반)이나 multi-tenant ‘SaaS 기부 플랫폼’ 구조에서, 프론트엔드가 모바일 앱이든 독립된 웹이든 관계없이 이 Authorization Bearer 표준 헤더 통신망만 뚫어놓으면 단 하나의 PHP 백엔드 API 서버를 공유해 모든 기기에서 안전하게 로그인 상태를 유지할 수 있습니다.
2. 로컬 인프라 자원의 해방: 쿠키와 세션 방식은 도메인이 다르면 통신 처리가 매우 까다롭고 서버 자원을 계속 감시해야 하지만, LocalStorage와 HTTP 헤더 전송 조합은 오직 클라이언트가 주도하여 신분증을 나르고 우분투 서버는 가벼운 해시 연산(hash_hmac)만 처리하므로 ASUS Ascent GX10 로컬 하드웨어 워크스테이션의 성능 효율을 극대화하여 트래픽 폭탄을 거뜬히 방어할 수 있습니다.
5. 아이들과 함께하는 ‘비밀 가방 네임택과 무전 패스’ 놀이
아이와 함께 예쁜 배낭(브라우저)을 준비하고 가방 앞주머니(LocalStorage)에 아빠가 서명해 준 ‘특급 요원 비밀 네임택(토큰)’을 쏙 넣어두게 하세요. 그리고 거실에 ‘비밀 기지국 성문(PHP 서버)’을 선으로 그어놓고, 아이가 성문을 지나갈 때 가방 앞주머니에서 네임택을 슥 꺼내 아빠 눈앞에 착 보여주며(HTTP Authorization 헤더 전송) 통과하는 놀이를 해보는 겁니다. 아빠는 성문 출입 명부를 일일이 검사하지 않고, 눈앞에 내밀어진 카드 서명만 보고 “인증 완료! 통과!”를 외쳐주는 거죠. “네가 가방 앞주머니에 네임택을 안전하게 보관하고 성문에 올 때마다 꺼내 보여준 일련의 과정이 코딩의 LocalStorage 저장과 Authorization 헤더 전송이란다!”라고 설명해 주세요. 클라이언트 저장소와 헤더 기반 인증의 흐름을 아주 경이롭고 직관적으로 이해하게 됩니다.
마치며: 무선으로 증명하는 완벽한 통신 라인
오늘 우리는 브라우저의 똑똑한 비밀 주머니 LocalStorage에 토큰 신분증을 세팅하고, fetch API의 편지봉투 헤더 영역에 장착해 PHP 백엔드 금고 요정에게 완벽한 검증을 받아내는 풀스택 인증 라인을 완성했습니다. 이제 여러분은 세션의 성벽을 완전히 뛰어넘어 전 세계 어떤 플랫폼 기기와도 소통할 수 있는 모던 아키텍트의 무기를 쥔 셈입니다!
다음 시간에는 이 마법 토큰 신분증을 빼앗으려는 해커 마법사들의 나쁜 손길을 차단하고 주머니를 철통 보안으로 감싸는 ‘보안 업그레이드 마법: 토큰 탈취 방지와 만료 시간 세팅하기’를 함께 정복해 보겠습니다. 다음 강의에서 만나요! 내일 아침에 만나요! ✨
