📖 TIL - API 관련 트러블 슈팅 & 학습 정리

1️⃣ URL 컨벤션 & API 기본 설정

라우터에 testPage나 testResultPage를 어떻게 줘야할까 찾아보게 되었다.
위처럼 카멜케이스로 작성해야하는건가? 아니면 케밥케이스? 아니면 소문자로 쭉?

URL 네이밍 규칙

• 소문자 + 하이픈(-) 사용 권장
• camelCase나 PascalCase는 피하기

// ❌ 피해야 할 URL
/userProfile
/UserDetails

// ✅ 권장하는 URL
/user-profile
/user-details

케밥케이스로 결정!

axios 기본 설정 최적화

axios를 사용하여 Auth와 json server관련 baseUrl을 설정하였다.

// 기본 URL 설정
const api = axios.create({
  baseURL: "https://api.example.com"
});

// 같은 경로일 때는 빈 문자열로 처리
export const getTestResults = async () => {
  const response = await api.get("");  // baseURL만 사용
  return response.data;
};

2️⃣ 로그인 로직 리팩토링

로그인 로직을 작성하다가 문제를 발견했다. 기능적인 문제라기 보단 보안적으로 password를 같이 던져주는 문제가 발생..

AS-IS: 문제가 있는 코드

const handleLogin = async (formData) => {
  try {
    if(formData){
      const data = await login(formData)
      setToken(data.accessToken);
      if(data.success){
        navigate('/')
        setUser(formData)  // 😱 비밀번호 포함된 formData 저장
      }
    }
  } catch (error) {
    console.error(error);
  }
};

TO-BE: 개선된 코드

const handleLogin = async (formData) => {
  try {
    if (formData) {
      const data = await login(formData);
      
      if (data.success) {
        setToken(data.accessToken);
        setUser({  // 필요한 정보만 선택적으로 저장
          userId: data.userId,
          nickname: data.nickname,
          avatar: data.avatar
        });
        navigate('/');
      }
    }
  } catch (error) {
    console.error(error);
    alert(`로그인 실패: ${error?.response?.data?.message || '알 수 없는 오류'}`);
  }
};

3️⃣ Zustand 상태관리 문제 해결

로컬 스토리지를 설정하다가.. token이 set으로 설정되지 못하는 문제가 발생하였다.
코드를 뜯어보니 내가 token을 함수로서 사용하고 있었었다.. localStorage를 getItem으로 받으면 바로 사용할 수 있지 않을까 생각했는데.. set을 사용하는것을 고려한다면 함수로서 사용하는것은 지양해야했다.

문제 상황

// ❌ 잘못된 방식
token: () => {
  try {
    const item = window.localStorage.getItem("token")
    return item ? JSON.parse(item) : null
  } catch (error) {
    console.error(error);
    return null;
  }
},

해결 방법

// ✅ 올바른 방식
const useAuthStore = create((set) => ({
  token: null,
  
  setToken: (token) => {
    try {
      window.localStorage.setItem("token", JSON.stringify(token));
      set({ token });
    } catch (error) {
      console.error(error);
    }
  }
}));

// 컴포넌트에서 초기화
useEffect(() => {
  const storedToken = window.localStorage.getItem("token");
  if(storedToken) {
    setToken(JSON.parse(storedToken));
  }
}, []);

💡 핵심 배운 점

1. URL 네이밍은 일관성 있게 유지하기
2. 민감한 정보(비밀번호 등)는 상태에 저장하지 않기
3. Zustand에서 상태는 함수가 아닌 값으로 저장하기
4. localStorage 동기화는 useEffect 활용하기