[URECA] Day79 LabbitLog 블로그 만들기 #3

📆 2025년 5월 26일 작업물 요약

• axios.defaults.withCredentials = true 전역 설정
• .env에서 VITE_BACK_URL 사용
• 로그인/로그아웃/회원가입 요청 함수 작성
• 인증 상태 확인용 getUserProfile() 함수 작성
• 요청 전 console.log로 디버깅 로깅 추가
• 쿠키 기반 인증 처리를 고려한 백엔드 통신 설계

1. axios.defaults.withCredentials = true의 중요성

• 설정 위치: axios.js 또는 API 모듈 초기화 파일에서 설정
• 의미: 모든 HTTP 요청에 대해 자동으로 쿠키 포함
• 실전 효과:
  • JWT 토큰을 쿠키에 저장한 백엔드와 세션 유지 가능
  • 로그인 이후 새로고침에도 사용자 상태가 유지됨

axios.defaults.withCredentials = true;

 

📌 핵심 포인트

“withCredentials 설정을 통해 클라이언트는 백엔드로부터 쿠키를 받아 세션을 유지할 수 있다. 이는 로그인이 유지되는 사용자 경험을 만드는 핵심 기술이다.”

---

2. .env의 클라이언트 사용 방식: VITE_ prefix

const API_URL = import.meta.env.VITE_BACK_URL || 'http://localhost:3000';

• Vite 환경에서는 반드시 VITE_ 접두사를 붙여야 클라이언트에서 접근 가능!
• 실수로 접두사 없이 BACK_URL이라 쓰면 undefined로 인식됨

📌 핵심 포인트

“Vite에서 환경 변수를 사용하려면 반드시 VITE_ 접두사를 붙여야 한다. 그렇지 않으면 브라우저에서 undefined가 뜬다.”

 

---

3. API 요청 모듈화 전략 (request 폴더 패턴)

export const loginUser = async credentials => { const response = await axios.post(`${API_URL}/auth/login`, credentials); return response.data; };

• API 요청 함수들을 따로 파일로 모듈화 (request/auth.js 등)
• 실무에서 컴포넌트 로직과 API 호출을 분리하면 유지보수 용이

📌 핵심 포인트

“컴포넌트 내부에서 axios 요청을 직접 넣는 방식은 반복되고 가독성이 떨어진다. 별도의 요청 모듈로 분리하면 재사용성과 유지보수가 좋아진다.”

---

4. 요청 전 console.log로 디버깅 습관

console.log('📤 로그인 요청 데이터:', credentials);

• 로그인, 회원가입, 프로필 요청 등 중요 API 호출 직전 로깅
• 요청 실패 시 디버깅 포인트 제공

📌 핵심 포인트

“API 요청 시점에 로그를 남기면 어떤 값이 전송되는지 명확히 확인할 수 있어 디버깅이 훨씬 쉬워진다.”

---

5. 프로필 자동 요청을 통한 인증 유지 확인

export const getUserProfile = async () => { const res = await axios.get(`${API_URL}/auth/profile`); return res.data; };

• 로그인 상태 확인용 API
• 프론트에선 App.jsx에서 앱 진입 시 호출해 초기 사용자 정보 확인에 활용

📌 핵심 포인트

“앱 로딩 시 프로필 요청을 통해 인증 상태를 자동으로 확인하면, 로그인 여부에 따라 유저 정보를 바로 불러올 수 있다.”