[25.03.08 / TASK-116,TASK-103] 릴리즈 #22
Conversation
* modify: 캐시 충돌 관련 이슈 해결 * modify: 로그아웃 시에도 캐시 잔존 오류 해결 * modify: 사소한 휴먼에러 해결 * refactor: 필요없는 주석 제거
* modify: 캐시 충돌 관련 이슈 해결 * modify: 로그아웃 시에도 캐시 잔존 오류 해결 * modify: 사소한 휴먼에러 해결 * refactor: 필요없는 주석 제거 * feature: 서버 에러 핸들링 페이지 퍼블리싱 * feature: 순수 HTML 형태의 오류 페이지 제작 * modify: 빌드 오류 수정 * modify: 리뷰 반영 * refactor: 파일명 변경
Walkthrough이번 PR은 Velog Dashboard의 오류 처리 및 사용자 인터페이스를 개선하는 변경 사항을 포함합니다. 새로운 HTML 에러 페이지(500.html)가 추가되어 오류 상황에서 사용자에게 적절한 안내를 제공하며, Sentry 의존성이 도입되어 오류 추적 기능이 강화되었습니다. 또한, HTTP 상태 코드 조건 수정, 캐시 클리어 로직 제거, 재검증(revalidate) 호출 추가 등 여러 컴포넌트에서 상태 및 캐시 관리 로직이 변경되었습니다. GC_TIME 상수 값 조정과 함께, 사용자 프로필 관련 코드 단순화도 이루어졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자
participant 헤더컴포넌트
participant revalidate()
participant 캐시 as next/cache
participant 라우터 as next/navigation
사용자->>헤더컴포넌트: 로그아웃 요청
헤더컴포넌트->>revalidate(): revalidate() 호출
revalidate()->>캐시: revalidatePath("/") 호출
캐시-->>revalidate(): 경로 재검증 완료
revalidate()->>라우터: redirect("/") 호출
라우터-->>revalidate(): 리다이렉션 완료
헤더컴포넌트->>헤더컴포넌트: 캐시 클리어 및 UI 업데이트
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/utils/revalidateUtil.ts (1)
6-9: 재검증과 리다이렉트 로직의 분리를 고려해보세요현재
revalidate함수는 재검증과 리다이렉트를 동시에 수행합니다. 이 두 가지 기능을 하나의 함수에 결합하면 유연성이 제한될 수 있습니다. 재검증만 필요하거나 다른 경로로 리다이렉트해야 하는 상황에서는 현재 함수를 재사용하기 어렵습니다.다음과 같이 분리하는 것을 고려해보세요:
'use server'; import { revalidatePath } from 'next/cache'; import { redirect } from 'next/navigation'; -export async function revalidate() { - revalidatePath('/', 'layout'); - redirect('/'); -} +export async function revalidateSite() { + revalidatePath('/', 'layout'); +} + +export async function revalidateAndRedirect(path = '/') { + revalidatePath('/', 'layout'); + redirect(path); +}src/components/auth-required/header/index.tsx (1)
42-46: 로그아웃 로직 개선 및 client.clear() 사용 검토 필요로그아웃 시
revalidate()를 호출하여 캐시를 재검증하는 방식으로 변경한 것은 적절합니다. 하지만client.clear()는 모든 쿼리 캐시를 지우는 강력한 방법으로, 필요한 다른 데이터까지 삭제될 수 있습니다.더 선택적인 접근 방식을 고려해보세요:
onSuccess: async () => { await revalidate(); - client.clear(); + client.removeQueries({ queryKey: [PATHS.ME] }); + // 필요한 경우 다른 인증 관련 쿼리도 제거 router.replace('/'); },500.html (2)
141-153: 전역 스타일 개선 제안전역 스타일 설정에서 개선이 가능한 부분이 있습니다:
* { transition: all; transition-duration: 300ms; + margin: 0; + padding: 0; + box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; background: #121212; display: flex; align-items: center; justify-content: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }폰트 패밀리를 지정하고 margin, padding 초기화를 추가하면 더 일관된 디자인이 될 것입니다.
164-164: 오류 메시지 개선 제안현재 오류 메시지는 "알 수 없는 오류가 발생했습니다."로 설정되어 있습니다. 사용자에게 더 명확한 정보와 행동 지침을 제공하는 것이 좋습니다.
- <span class="text">알 수 없는 오류가 발생했습니다.</span> + <span class="text">알 수 없는 오류가 발생했습니다.</span> + <span class="text" style="font-size: smaller; margin-top: 10px;">잠시 후 다시 시도하거나, 문제가 지속되면 관리자에게 문의해주세요.</span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
500.html(1 hunks)package.json(1 hunks)src/apis/instance.request.ts(1 hunks)src/app/(with-tracker)/(login)/Content.tsx(1 hunks)src/components/auth-required/header/index.tsx(2 hunks)src/components/auth-required/main/Section/index.tsx(1 hunks)src/utils/queryUtil.ts(1 hunks)src/utils/revalidateUtil.ts(1 hunks)
🔇 Additional comments (9)
src/utils/queryUtil.ts (1)
6-6: GC_TIME 값 증가 변경 - 적절한 최적화입니다GC_TIME을 1초에서 20분(1000 * 60 * 20)으로 변경한 것은 적절한 최적화입니다. 기존 1초는 매우 짧은 시간으로, 쿼리 데이터가 비활성화되자마자 거의 즉시 가비지 컬렉션 대상이 되어 성능 저하를 일으킬 수 있었습니다.
20분으로 늘림으로써 사용자가 다른 페이지에 갔다가 돌아오더라도 이미 가져온 데이터를 재사용할 수 있어 불필요한 API 호출을 줄이고 애플리케이션 성능을 향상시킬 수 있습니다.
src/components/auth-required/header/index.tsx (2)
12-12: revalidate 유틸리티 함수 추가 - 적절합니다
revalidate함수를 가져와서 사용하는 것은 로그아웃 시 캐시 무효화를 위한 좋은 접근법입니다.
52-54: enabled 조건 추가 - 적절한 최적화입니다쿼리에
enabled: !!client.getQueryData([PATHS.ME])조건을 추가한 것은 매우 적절합니다. 이 변경으로 로그아웃 후 불필요한 API 호출을 방지하여 성능을 개선하고, 로그아웃 후 재로그인 전까지 불필요한 오류를 방지할 수 있습니다.주석에서 설명한 대로 prefetch를 통해 이미 데이터가 로드된 상태이므로 캐시 여부만 확인하는 접근은 합리적입니다.
src/apis/instance.request.ts (1)
78-78: 인증 상태 코드 처리 변경이 적절합니다.인증되지 않은 요청에 대한 처리가 HTTP 상태 코드 403에서 401로 변경되었습니다. 이는 HTTP 표준에 더 적합한 변경으로, 401은 인증 부재(미로그인)를, 403은 권한 부족(로그인했으나 권한 없음)을 의미합니다.
src/app/(with-tracker)/(login)/Content.tsx (2)
24-27: 로그인 성공 후 캐시 관리 로직이 간소화되었습니다.이전에는 로그인 성공 시 쿼리 캐시를 초기화했지만, 지금은 해당 로직이 제거되었습니다. 이로 인해 이전 세션의 캐시된 데이터가 새 세션에 영향을 미칠 가능성이 있습니다.
이 변경이 의도적인 것인지, 그리고 프로젝트에서 다른 방식으로 쿼리 캐시를 관리하고 있는지 확인하세요.
6-6:❓ Verification inconclusive
캐시 클리어 로직이 제거되었습니다.
useQueryClient 및 client.clear() 호출이 제거되었습니다. 이 변경으로 로그인 후 쿼리 캐시가 더 이상 초기화되지 않습니다.
이 변경이 의도적인 것인지, 그리고 애플리케이션의 다른 부분에서 캐시를 관리하는 대체 메커니즘이 있는지 확인해 주세요. 로그인 시 캐시를 초기화하지 않으면 이전 세션의 데이터가 남아있을 수 있습니다.
🏁 Script executed:
#!/bin/bash # Description: 캐시 관리 패턴 확인하기 # revalidateUtil.ts 파일이 있는지 확인 echo "=== revalidateUtil.ts 파일 찾기 ===" fd revalidateUtil.ts # revalidate 함수가 있는 위치 확인 echo "=== revalidate 함수 찾기 ===" rg "export const revalidate" -A 5 # 쿼리 클라이언트 초기화/관리 패턴 찾기 echo "=== 쿼리 클라이언트 초기화 패턴 확인 ===" rg "getQueryClient\(\)\.clear\(\)" -A 2 -B 2Length of output: 328
로그인 캐시 초기화 로직 변경 확인 요청
현재 PR에서
src/app/(with-tracker)/(login)/Content.tsx파일에서 기존의useQueryClient및client.clear()호출이 제거된 것을 확인했습니다.
또한,src/utils/revalidateUtil.ts파일이 존재하는 점으로 미루어 보아, 캐시 관리가 다른 방식으로 대체되었을 가능성이 있습니다. 다만,
export const revalidate관련 코드를 검색했을 때 명시적으로 캐시 초기화를 수행하는 로직이 나타나지 않았습니다.getQueryClient().clear()호출도 전체 코드베이스에서 찾을 수 없었습니다.이에 따라, 해당 변경이 의도된 것인지, 그리고 다른 부분에서 캐시 초기화를 위한 대체 메커니즘(예:
revalidateUtil.ts내에서 수행하는 로직 등)이 충분히 구현되어 있는지 수동으로 재검증해 주시기 바랍니다. 만약 다른 캐시 관리 체계가 존재한다면, 관련 설명이나 문서 업데이트도 함께 제공해 주시면 좋겠습니다.src/components/auth-required/main/Section/index.tsx (2)
9-9: 쿼리 클라이언트 접근 방식 변경useQueryClient 훅 대신 getQueryClient 유틸리티 함수를 사용하도록 변경되었습니다. 이는 전체 애플리케이션에서 쿼리 클라이언트 접근 방식을 표준화하기 위한 변경으로 보입니다.
19-19: URL 생성 로직 간소화URL 생성 로직이 간소화되었습니다. 이전에는 별도의 URL 변수를 사용했지만, 지금은 env.VELOG_URL을 직접 사용합니다.
500.html (1)
1-180: 적절한 서버 오류 페이지 추가서버 오류 발생 시 표시될 500 에러 페이지가 추가되었습니다. 페이지는 다양한 화면 크기에 대응하는 반응형 디자인으로 구현되었으며, 사용자에게 오류 발생을 명확히 알리고 있습니다.
분석 추적을 위한 Google 태그 관리자 스크립트도 포함되어 있어 오류 발생 빈도를 모니터링할 수 있습니다.
릴리즈 브랜치를 생성하였습니다.
dev에서 PR들을 받아오고, 이 브랜치에서 main 브랜치로 머지합니다
Summary by CodeRabbit