안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 외부 성에서 소식을 가져오는 배달부 Axios를 만났죠? 그런데 배달부가 수백 명이라면 어떨까요? 매번 똑같은 부탁을 하느라 입이 아플 거예요. 오늘은 배달부들에게 미리 공통 규칙을 정해주는 인터셉터(Interceptors) 마법을 배워볼게요!
1. 인터셉터: 출발 전 검문소와 도착 후 환영식
인터셉터는 배달부가 성문을 나갈 때와 돌아올 때 거쳐야 하는 특별한 검문소예요.
- 나갈 때(Request): 모든 배달부의 가슴에 ‘우리 집 마법사 증표’를 달아주거나, 주소를 예쁘게 다듬어줘요.
- 들어올 때(Response): 배달부가 가져온 보물 상자에 혹시 먼지가 묻지는 않았는지, 상자가 비어있지는 않은지 미리 확인해준답니다.
2. 왜 이 마법이 필요한가요?
웹사이트가 커지면 정보를 가져올 곳이 수십 군데가 돼요. 매번 “우리 집 비밀번호는 이거야!”라고 말할 필요 없이, 검문소에서 알아서 비밀번호 도장을 꽝! 찍어주면 훨씬 편하고 안전하겠죠? 또한, 서버가 아파서 정보를 못 줬을 때 “서버가 아파요!”라는 알림창을 한곳에서 관리할 수도 있어요.
3. 실전 마법: 똑똑한 배달부 설정하기
모든 배달부에게 공통 명령을 내리는 코드를 짜볼까요?
import axios from 'axios';
// 1. 우리 집 전용 우체국 만들기
const myPostOffice = axios.create({
baseURL: 'https://api.magic-school.com'
});
// 2. 출발 전 검문소 설치 (Request Interceptor)
myPostOffice.interceptors.request.use((config) => {
console.log('배달부가 출발합니다! 마법 도장을 찍어줄게요.');
config.headers['Magic-Token'] = 'SECRET_1234'; // 비밀 도장!
return config;
});
// 3. 도착 후 환영식 (Response Interceptor)
myPostOffice.interceptors.response.use((response) => {
console.log('배달부 도착! 보물을 확인합니다.');
return response.data; // 복잡한 상자 대신 알맹이(data)만 쏙 꺼내줘요
}, (error) => {
alert('앗! 배달 중에 문제가 생겼어요! 😥');
return Promise.reject(error);
});
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘심부름 규칙’을 예로 들어 설명해 주세요. “심부름 갈 때는 꼭 마스크를 쓰고(Request), 다녀와서는 꼭 손을 씻어야 해(Response)”라는 규칙이 정해져 있으면 매번 말하지 않아도 되는 것과 같다고요. 코딩에서의 ‘자동화’는 우리 생활의 ‘약속’과 같다는 것을 알려주시면 규칙을 지키는 재미를 느낄 수 있습니다.
마치며: 더 단단해진 우리 집 우체국
이제 우리 웹사이트의 통신 시스템은 아주 체계적으로 변했습니다! 어떤 외부 소식이 와도 당황하지 않고 처리할 수 있죠. 다음 시간에는 **’마법의 임시 보관함(Local Storage)’**이라는 주제로, 브라우저를 껐다 켜도 정보를 기억하게 만드는 법을 배워볼게요.
