[🛠️ 트러블슈팅] 인증,인가 프로젝트 문제 해결 그 외 이슈

1. 응답 구조 이해의 어려움:
   updateProfile 함수에서 API 호출 후 response.data 형태로 데이터를 반환받았음.
   Network 탭을 통해 API 응답을 확인했더니 { accessToken, avatar, nickname, success, userId } 형태였음.
   이로 인해 response.nickname과 response.data.nickname 중 어느 쪽을 사용해야 할지 혼란스러웠음.

2. 상태 관리 이슈:
   상태를 업데이트하는 함수에서 이전 상태를 기반으로 새로운 상태를 설정하도록 로직을 수정했음.
   예를 들어, setUser((prevUser) => ({ ...prevUser, nickname: response.nickname }))와 같은 방식으로 이전 사용자 상태를 가져와서 업데이트하는 방식으로 해결했음.

3. 특정 페이지에서의 헤더, 라우팅 문제:
   헤더와 라우팅 설정을 진행할때 사용자만 접근할수 있는 헤더와 아닌 공통 헤더를 가지는 페이지에 논의가 필요했음.

4. 패키지 관리 문제:
   팀 프로젝트에서 npm과 yarn 같은 서로 다른 패키지 관리자를 사용하고 있어, 의존성 문제와 충돌이 발생했음.

5. 스타일 변경의 어려움:
   프로젝트에서 Tailwind CSS를 사용하고 있었지만, 팀원이 styled-components를 사용해 스타일링을 해서, 나중에 Tailwind 스타일을 styled-components로 변경해야 하는 어려움이 있었음.

---

느낀점

• 팀원 간의 패키지 관리 방식, CSS 스타일링 통일 필요성을 느꼈음.
• 다른 페이지에서도 사용되는 로직을 논의할 필요성을 느꼈음.

---

zustand 사용법

1. Zustand Store 만들기

Zustand를 사용할 때 상태 관리를 위한 store 생성

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useUserStore = create(
  persist(
    (set) => ({
      user: null,
      setUser: (userData) => set({ user: userData }),
      clearUser: () => set({ user: null })
    }),
    {
      name: 'user-storage', // localStorage에 저장될 키의 이름
      getStorage: () => localStorage // localStorage를 저장소로 사용
    }
  )
);

export default useUserStore;

2. Zustand Store 사용하기

store를 사용하기 위해 useUserStore 훅 넣기

import { create } from "zustand";
import { persist } from "zustand/middleware";

const useUserStore = create(
  persist(
    (set) => ({
      user: null, // 사용자 정보를 저장할 곳
      accessToken: null, // 로그인 정보를 확인할 수 있는 토큰
      setUser: (userData) => set({ user: userData }), // 사용자 정보를 저장하는 함수
      setAccessToken: (token) => set({ accessToken: token }), // 토큰을 저장하는 함수
      clearUser: () => set({ user: null, accessToken: null }) // 사용자 정보와 토큰을 지우는 함수
    }),
    {
      name: "user-storage", // 상태를 저장할 때 사용할 이름
      getStorage: () => localStorage // 상태를 저장할 저장소는 브라우저의 로컬 스토리지
    }
  )
);

export default useUserStore;

3. 상태 관리 및 데이터 저장

• 상태의 분류와 역할

1. user 상태:

   • 역할: 로그인된 사용자에 대한 정보를 저장합니다. 예를 들어, 사용자 ID, 닉네임, 프로필 사진 등의 정보를 담습니다.
   • 용도: 사용자의 개인적인 정보와 관련된 모든 데이터가 이 상태에 저장됩니다. 이 정보를 통해 UI에서 사용자에게 맞는 맞춤형 콘텐츠를 제공할 수 있습니다.
   • 예시: 로그인 후 user 상태에 사용자 정보를 저장하고, 이 정보를 이용해 화면에 사용자 이름을 표시합니다.

2. accessToken 상태:

   • 역할: 인증된 사용자를 식별하기 위해 사용하는 토큰을 저장합니다. 주로 API 요청 시 사용자의 인증을 확인하는 데 필요합니다.
   • 용도: API 요청에서 사용자의 인증을 검증하기 위해 accessToken을 사용합니다. 이 토큰이 유효하면 서버에서 사용자를 인증된 상태로 인정합니다.
   • 예시: 로그인 후 accessToken을 저장하고, 이 토큰을 API 요청의 헤더에 포함시켜 인증을 수행합니다.

• 상태 업데이트 함수

1. setUser 함수:

   • 역할: user 상태를 업데이트합니다.
   • 용도: 사용자가 로그인하거나 회원가입할 때, 또는 사용자 정보를 수정할 때 이 함수를 호출하여 user 상태를 업데이트합니다.
   • 예시: 로그인 후 서버로부터 받은 사용자 정보를 setUser(userData)를 통해 user 상태에 저장합니다.

2. setAccessToken 함수:

   • 역할: accessToken 상태를 업데이트합니다.
   • 용도: 사용자가 로그인할 때 서버로부터 받은 토큰을 setAccessToken(token)을 통해 저장합니다. 이후 API 요청 시 이 토큰을 사용합니다.
   • 예시: 로그인 후 서버로부터 받은 토큰을 setAccessToken(token)을 통해 상태에 저장합니다.

🔎 요약

• user: 사용자의 개인 정보를 저장합니다.
• accessToken: 사용자의 인증 상태를 확인하기 위한 토큰을 저장합니다.
• setUser: 사용자 정보를 업데이트합니다.
• setAccessToken: 인증 토큰을 업데이트합니다.

4. 사용자 정보와 상태 전달

컴포넌트에서 상태를 사용하려면, Zustand store에서 필요한 상태를 가져와서 컴포넌트의 props나 직접 상태를 사용하여 UI를 업데이트합니다.

예를 들어, 로그인 상태에 따라 헤더를 변경하는 경우:

const Layout = () => {
  const { user, setUser } = useUserStore();

  const handleLogout = () => {
    setUser(null);
    localStorage.removeItem("accessToken");
  };

  return (
    <header>
      {user ? (
        <div>
          <p>{`${user.nickname}님 안녕하세요!`}</p>
          <button onClick={handleLogout}>로그아웃</button>
        </div>
      ) : (
        <div>
          <Link to="/login">로그인</Link>
          <Link to="/signup">회원가입</Link>
        </div>
      )}
    </header>
  );
};

---

인증 인가에서 중요한 토큰 사용

1. 토큰을 저장하는 방법
2. 저장된 토큰을 사용하여 상태를 복원하는 방법

1. AccessToken 저장하기

로컬 스토리지 또는 세션 스토리지에 토큰 저장하기

• 로컬 스토리지: 브라우저를 종료하더라도 데이터가 유지됩니다.
• 세션 스토리지: 브라우저 세션이 종료될 때 데이터가 사라집니다.

보통, 로그인 상태를 유지하려면 로컬 스토리지를 사용합니다. 이렇게 하면 페이지를 새로 고침하거나 브라우저를 닫았다 다시 열어도 사용자의 로그인 상태를 유지할 수 있습니다.

const handleLogin = async (formData) => {
  try {
    const loginData = await login(formData);
    localStorage.setItem("accessToken", loginData.accessToken);

  } catch (error) {
    alert("로그인에 실패했습니다. 다시 시도해주세요.");
  }
};

위 코드에서는 login API 호출 후, 받은 accessToken을 로컬 스토리지에 저장합니다.

2. 저장된 AccessToken으로 상태 복원하기

페이지를 새로 고치거나 브라우저를 재시작하면, 클라이언트는 로컬 스토리지에서 저장된 accessToken을 가져와 사용자 인증 상태를 복원할 수 있습니다. 이를 위해 앱이 시작할 때 로컬 스토리지에서 토큰을 확인하고 상태를 복원하는 로직이 필요합니다.

Zustand를 사용하는 예시

1. Zustand Store 설정

   Zustand store를 설정할 때, accessToken을 로컬 스토리지에서 읽어와 상태를 초기화합니다.

   import { create } from "zustand";
   import { persist } from "zustand/middleware";
   
   const useUserStore = create(
     persist(
       (set) => ({
         user: null,
         accessToken: localStorage.getItem("accessToken") || null, // 로컬 스토리지에서 accessToken 읽기
         setUser: (userData) => set({ user: userData }),
         setAccessToken: (token) => {
           localStorage.setItem("accessToken", token); // 로컬 스토리지에 토큰 저장
           set({ accessToken: token });
         },
         clearUser: () => {
           localStorage.removeItem("accessToken"); // 로컬 스토리지에서 토큰 제거
           set({ user: null, accessToken: null });
         }
       }),
       {
         name: "user-storage",
         getStorage: () => localStorage
       }
     )
   );
   
   export default useUserStore;

2. 컴포넌트에서 상태 사용하기

   상태를 사용하는 컴포넌트에서, accessToken이 저장된 상태인지 확인하고, 필요한 경우 API 호출을 통해 사용자 정보를 가져옵니다.

   import React, { useEffect } from "react";
   import useUserStore from "./path/to/useUserStore";
   import { getUserProfile } from "./api/auth";
   
   const App = () => {
     const { user, accessToken, setUser } = useUserStore();
   
     useEffect(() => {
       if (accessToken) {
         // accessToken이 존재하면, API를 통해 사용자 정보를 가져옵니다.
         const fetchUserProfile = async () => {
           try {
             const userProfile = await getUserProfile(accessToken);
             setUser(userProfile);
           } catch (error) {
             console.error("사용자 정보를 가져오는 중 오류 발생:", error);
           }
         };
   
         fetchUserProfile();
       }
     }, [accessToken, setUser]);
   
     return (
       <div>
         {user ? <p>Welcome, {user.nickname}!</p> : <p>Please log in.</p>}
       </div>
     );
   };
   
   export default App;

이렇게 설정하면, 앱이 시작될 때 로컬 스토리지에서 accessToken을 읽어와 사용자의 로그인 상태를 유지할 수 있습니다.

---

변수명 헷갈리는 이슈

import axios from "axios";

const API_URL = "https://moneyfulpublicpolicy.co.kr";

export const register = async (userData) => {
  const response = await axios.post(`${API_URL}/register`, userData);
  return response.data;
};

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

const useUserStore = create(
  persist(
    (set) => ({
      user: null,
      accessToken: null,
      setUser: (userData) => set({ user: userData })
      // userData를 user 상태에 저장하려고
      // { user: userData }는 새로운 상태 객체로, user라는 속성을 userData 값으로 업데이트 하겠다는 뜻.
      // 상태가 업데이트되면 user에는 이제 사용자 정보가 들어갑니다
      ...

1. user vs. userData의 역할 차이

• user: 상태 관리에서 사용하는 상태 값을 의미합니다. 즉, Zustand에서 관리하는 user는 로그인한 후 사용자 정보가 저장되는 곳입니다.
• userData: 함수의 매개변수나 외부에서 받은 데이터를 나타냅니다. 예를 들어, 로그인 API에서 반환된 사용자 정보 객체를 받을 때 userData라는 이름을 주로 사용합니다. 이 값은 함수에서 일시적으로 사용되는 값입니다.

즉, user는 앱 내에서 전역 상태로 관리되는 사용자 정보이고, userData는 외부로부터 들어온 새로운 사용자 정보입니다.

2. 이름을 다르게 사용하는 이유

• user는 Zustand에서 관리하는 상태 (즉, 현재 사용자 상태)
• userData는 함수나 API에서 받아온 새로운 데이터(입력값)

예시로 상황을 나눠 보면:

상황 1: 로그인 API에서 userData를 받아와 상태를 업데이트

const login = async (credentials) => {
  const userData = await api.login(credentials); // 서버에서 받아온 사용자 정보
  setUser(userData); // 받아온 데이터를 상태로 저장
}

여기서 userData는 API로부터 받아온 새로운 사용자 정보이고, setUser를 통해 이 데이터를 Zustand에서 관리하는 user 상태에 저장합니다.

상황 2: 상태 업데이트 후 user 사용

const { user } = useUserStore(); // Zustand에서 상태 가져오기

console.log(user); // 이건 현재 저장된 사용자 상태입니다.

이처럼 userData는 외부에서 새로 들어오는 값이고, user는 이미 저장된 상태 값이기 때문에 이름을 다르게 해서 혼란을 줄인다!!

---

요약:

• user는 전역 상태로 앱 전체에서 사용되는 사용자 정보.
• userData는 외부에서 받아오는(api) 새로운 데이터.
• 이름을 다르게 설정함으로써 코드에서 값의 출처를 더 명확하게 구분할 수 있습니다.