[요약] Part 3. 빈틈없는 프론트엔드: 예외와 상태 처리

데이터의 영리한 관리: Fetching과 캐싱 메커니즘

쓸데없는 네트워크 낭비를 줄이고 속도를 끌어올리며 보안을 챙깁니다.

환상적인 성능의 열쇠, 캐싱(Caching)

• 개념: 가져온 데이터를 메모리에 임시 보관해 두고, 다음 요청 시 쾌속으로 돌려주는 마법.
• 정적 콘텐츠 캐싱: 업데이트가 드문 블로그 등에 강력하게 적용해 응답 속도 비약적 향상.
• 실시간 데이터 캐싱 무효화: 주식 대시보드처럼 최신화가 1순위인 경우, `cache: 'no-store'` 옵션으로 캐시를 명시적으로 파괴하여 치명적 버그 방지.

보안의 절대 성역, 환경 변수 (.env)

• 분리 필수 데이터: DB 비밀번호, 결제 API 키, 소셜 로그인 시크릿 키 등 초민감 정보.
• 관리 원칙: 절대 깃허브나 생눈으로 보이는 코드에 적지 않고 `.env` 파일에 암호문처럼 격리 보관.
• 접근 통제: 치명적 보안 정보는 철저히 백엔드(서버 측) 코드에서만 접근하도록 통제망 구축.

사용자 감정 배려의 기술: 로딩, Empty State, 그리고 권한 차단

데이터가 늦거나 에러가 났을 때 길을 잃게 만들지 않는 UX 디테일입니다.

텅 빈 화면 공포증 지우기, 로딩 UI와 Empty State

• 로딩 뼈대 (Skeleton/Spinner): 단 0.5초의 지연 시간에도 "데이터가 오는 중"이라는 안도감을 제공. (Next.js `loading.tsx`로 즉시 구현)
• 아름다운 빈 상태 (Empty State): 검색 결과나 데이터가 "0건"일 때 빈 화면을 방치하지 않고 친절한 일러스트와 대안 제시 액션 버튼 배치.

export default function ErrorBoundary({ error, reset }) {
  return (
    <div>
      <h2>무언가 잘못되었습니다!</h2>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

철벽 방어선 구축, 권한 차단과 Error Boundary

• 권한 방어: 비로그인 불청객의 접근 시 401(Unauthorized) / 403(Forbidden)으로 튕겨내는 단호한 통제.
• 우아한 에러 화면 (Error Boundary): 서버 다운 등 불가항력 에러 발생 시, 투박한 텍스트 대신 친절한 안내와 '새로고침 재시도 버튼'을 제공. (Next.js `error.tsx`로 구축)

한계를 뛰어넘는 최고 수준의 UX: 중복 방지와 낙관적 UI

조급한 유저와 느린 네트워크 지연을 극복해 내는 궁극의 기법들입니다.

이중 결제를 막아내는 자물쇠, 버튼 연타 방지

• 필요성: 화가 난 유저가 버튼을 1초에 3번 다다닥 누르면 결제가 3번 중복되는 대형 사고 발생.
• 조치법: 중요 액션 버튼 클릭 즉시 시각적 로딩 표시와 함께 버튼 속성을 Disabled(비활성화)로 잠금.

마법 같은 체감 속도, 낙관적 업데이트 (Optimistic UI)

• 개념: 통신이 무조건 100% 성공할 것이라 '낙관적'으로 예측하고, 화면 상태를 즉각 먼저 바꿔버리는 초고급 기법 (예: 인스타그램 좋아요 하트 채우기).
• 효과: 네트워크 딜레이(Latency)를 사용자 체감상 "0초"로 만들어 압도적으로 빠릿빠릿한 반응 속도 선사.
• 실패 시 롤백: 만약 0.01%의 확률로 서버 통신 실패 시, 살짝 알림을 띄우고 UI를 슬쩍 원래대로 복구하면 끝.