4주차 월요일 미팅

[KingNono1030]

팀 미팅 기록

체크박스 관련

• 기존 방식: 체크박스 토글 시 SVG 대체.
• 논의: CSS로 대체하는 방안 제안.
• 결론: @KingNono1030가 CSS로 대체한 코드 예시 작성 후 공유.

---

AuthState 타입 관리 위치

interface AuthState {
  isAuthenticated: boolean
  user: User | null
  login: (user: User) => void
  logout: () => void
}

• 논의 결과:
  • @yellowjang: 큰 의의 없이 분리할 필요는 없으며, 스토어 파일 내에서 함께 관리해도 무방.
  • @yongb2n: 파일 분리 관점에서, 여러 번 사용되면 분리하고, 한 번만 사용되면 스토어 파일에서 관리.

---

env 관련 이슈

• 내용: const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
• 현상: 기존에 경고(warning)가 떴었으나, 현재는 더 이상 경고 발생하지 않음.
• 논의: BASE_URL이 외부에 공개되어도 큰 문제는 없다는 결론.

---

api 관련 디렉토리 구조

• lib > api vs services > api
• 최종적으로는 쿼리문으로 수정할 예정이므로 디렉토리 구조는 큰 차이가 없다는 결론.

---

with credentails

• 상태: 백엔드 지원이 필요.
• 결론: 현재는 프록시로 처리. 여건이 되면 백엔드와 함께 논의 후 결정.

---

axios vs ky

• 현재 상황:
  • 로그인 처리에는 Axios 사용.
  • Ky는 가볍고 새로운 방식이지만, 러닝 커브 극복 필요.
• 결론: 역할을 나눠 두 라이브러리를 함께 사용. 당장은 익숙한 Axios를 활용.

---

api routes

• 공유

---

기능	Zustand + Persist	HttpOnly Cookie
XSS 공격 방어	취약	안전 (HttpOnly 속성)
데이터 위변조	클라이언트에서 가능	서버에서만 관리 가능
CSRF 방어	별도의 CSRF 토큰 필요	SameSite 옵션으로 방어 가능
구현 난이도	간단	상대적으로 복잡
사용자 경험	빠름 (서버 요청 없음)	약간 느림 (서버 요청 필요)
보안 표준 준수	낮음	높음

1. Zustand의 persist로 인증 상태 관리

작동 방식

• Zustand의 persist를 사용하여 로그인 상태(isAuthenticated)와 사용자 정보(user)를 localStorage나 sessionStorage에 저장.
• 상태를 클라이언트에서 관리하며, 새로 고침 시 상태를 복원.

장점

1. 구현이 간단:

• 클라이언트 상태 관리 라이브러리(Zustand)와 브라우저 스토리지만으로 쉽게 구현 가능.

2. 빠른 상태 접근:

• 클라이언트에서 직접 상태를 관리하므로, 요청마다 서버와 통신하지 않아도 됨.

3. 사용자 경험 개선:

• 새로 고침이나 페이지 이동에도 빠르게 상태를 복원할 수 있음.

단점 (보안 상 치명적)

1. XSS 공격에 취약:

• localStorage나 sessionStorage에 저장된 데이터는 브라우저 스크립트를 통해 접근 가능.
• 악성 스크립트가 삽입되면, 공격자가 민감한 데이터(예: 토큰)를 탈취할 수 있음.

2. 데이터 위변조 가능:

• 클라이언트에서 상태를 직접 관리하기 때문에, 사용자가 상태를 위변조하여 인증 상태를 조작할 수 있음.

3. 보안 정책 위반:

• 중요한 인증 데이터를 클라이언트에서 관리하면, 기업이나 프로젝트의 보안 정책에 어긋날 가능성이 있음.

---

2. HttpOnly 쿠키를 사용한 토큰 관리

작동 방식

• 서버에서 로그인 응답 시, HttpOnly, Secure 속성이 설정된 쿠키에 토큰 저장.
• 클라이언트는 이 쿠키에 직접 접근할 수 없으며, 요청 시 쿠키가 자동으로 서버로 전송됨.
• 서버 미들웨어에서 토큰의 유효성을 검사하여 인증 상태를 결정.

장점

1. XSS 공격 방어:

• HttpOnly 속성이 설정된 쿠키는 자바스크립트에서 접근할 수 없으므로, XSS 공격으로부터 안전.

2. 중앙 집중식 관리:

• 인증 상태를 서버에서 관리하므로, 클라이언트 위변조를 방지.
• 서버가 인증 상태를 신뢰할 수 있음.

3. 보안 표준 준수:

• 쿠키는 인증 및 세션 관리에서 권장되는 표준 방식으로, 다양한 보안 옵션(예: SameSite, Secure 등)을 설정 가능.

4. 리다이렉트 및 권한 제어:

• 서버 미들웨어에서 토큰 여부를 검증해 요청을 제어하거나, 인증이 필요한 페이지로 리다이렉트 처리.

단점

1. 구현 복잡도 증가:

• 서버에서 토큰 생성, 저장, 검증 로직을 처리해야 하므로 구현이 더 복잡.

2. 사용자 경험:

• 클라이언트에서 인증 상태를 즉시 확인하려면 서버 요청이 필요할 수 있어 약간의 지연 발생.

[yongb2n]

query 문 예시 코드

/**
 * 그룹 데이터를 가져오는 함수
 * @param groupId - 가져올 그룹의 ID
 * @returns 그룹 데이터
 */
export const getGroups = (groupId: string) => {
  return authAxiosInstance.get<GroupResponse>(`groups/${groupId}`);
};

/**
 * @useGroupsQuery
 * 주어진 그룹 ID로 서버에서 그룹 데이터를 가져오는 훅입니다.
 * @param id - 그룹 ID
 * @returns 그룹 데이터와 로딩/에러 상태
 */

/**
 * 상세 설명:
 *
 * 1. **queryKey**:
 *    - 캐시를 구분하기 위한 고유 키
 *    - `['groups', id]`로 설정하여 그룹 ID별로 데이터를 캐싱하고 분리
 *    - 동일한 `id`로 여러 번 호출 시, 동일한 데이터를 캐시에서 빠르게 가져올 수 있음
 *
 * 2. **queryFn**:
 *    - 데이터를 가져오는 비동기 함수. `fetchGroup` 함수를 호출하여 해당 `id`에 대한 그룹 정보를 서버에서 가져옴
 *    - 이 함수는 React Query가 내부적으로 데이터를 요청할 때 호출
 *
 * 3. **staleTime**:
 *    - 5분이 지나기 전에는 캐시된 데이터를 그대로 사용하며, 이후에는 자동으로 새로운 데이터를 서버에서 요청
 *
 * 4. **retry**:
 *    - 데이터 요청이 실패했을 경우 재시도 횟수를 의미
 */

export const useGroupsQuery = (id: string) => {
  return useQuery({
    queryKey: ['groups', id],
    queryFn: () => getGroups(id),
    staleTime: queryOptions.staleTime,
    gcTime: queryOptions.gcTime,
    retry: 1,
  });
};

[yellowjang]

딱 api 요청과 쿼리를 분리할 수 있어서 너무 좋네요