--- type: digest title: "소화 노트: Topic_Programming/Pattern_Catalog" generated_at: 2026-06-18T18:01:08.478Z sources: ["React_State_Pattern", "Repository_Pattern", "Infinite_Scroll_Pattern", "JWT_Authentication_Pattern", "Push_Notification_Pattern"] --- # 소화 노트: Topic_Programming/Pattern_Catalog > ⚙️ 자동 생성 (sleep-time 사전 소화) — **원문이 항상 우선**입니다. 소스가 바뀌면 자동 재생성되며, 이 파일은 삭제해도 안전합니다. ## 예상 질문과 답 - **Q: React에서 상태를 관리할 때 가장 권장되는 위치와 방법은 무엇인가요?** — A: 상태를 필요한 가장 낮은 곳에 두되, 공유가 필요하면 부모로 끌어올리고(lifting state up), 서버 데이터는 UI 상태와 분리하여 캐시 라이브러리(react-query 등)를 사용하는 것이 핵심입니다. [React State Pattern] - **Q: Repository 패턴을 사용할 때 얻을 수 있는 이점과 주의할 점은 무엇인가요?** — A: 도메인 로직을 저장 기술(DB, API 등)로부터 분리하여 테스트와 구현 교체가 용이하다는 장점이 있지만, ORM이 이미 유사한 추상을 제공하는 경우 중복 설계가 될 수 있으므로 주의해야 합니다. [Repository Pattern] - **Q: 무한 스크롤 구현 시 성능 저하를 막기 위해 반드시 포함해야 할 요소는 무엇인가요?** — A: 커서 기반 페이징, DOM 가상화(virtualization), 그리고 중복/경쟁 요청 방지 로직이 필수적입니다. [Infinite Scroll Pattern] - **Q: JWT 인증 방식의 구조적 약점과 이를 보완할 방법은 무엇인가요?** — A: 토큰을 즉시 무효화하기 어렵다는 것이 약점이며, 이를 위해 Access/Refresh Token의 수명을 분리하거나 블랙리스트/토큰 회전(Rotation) 방식을 사용하여 보완할 수 있습니다. [JWT Authentication Pattern] - **Q: React 상태 관리 시 '파생 상태'를 처리하는 올바른 방법은 무엇인가요?** — A: 파생된 값은 별도로 저장하지 않고 `useMemo`를 통해 계산하여 사용합니다. [React State Pattern] ## 핵심 사실 - **React State Pattern:** 상태는 최소 단위에 두되, 공유 시 끌어올리고 서버 데이터는 분리함. 파생 상태는 저장하지 않고 계산함. [React State Pattern] - **Repository Pattern:** 도메인 코드와 데이터 저장 방식 사이에 인터페이스를 두어 결합도를 낮춤. [Repository Pattern] (참고: ConnectAI의 `eventSourcedStore`는 Repository 패턴을 적용한 사례임) - **Infinite Scroll Pattern:** 커서 기반 페이징과 DOM 가상화가 성능 유지의 핵심임. [Infinite Scroll Pattern] - **JWT Authentication Pattern:** 서버 세션 없이 상태를 유지(stateless)하는 방식이며, 확장성이 좋으나 즉시 무효화가 어렵다는 특징이 있음. [JWT Authentication Pattern] ## 문서 간 연결 - **상태 관리와 데이터 접근의 관계:** `React State Pattern`은 프런트엔드 UI 상태 관리에 집중하며, `Repository Pattern`은 백엔드/데이터 계층의 추상화에 집중합니다. 두 패턴 모두 '관심사의 분리'를 지향합니다. - **공통 주제 (Pattern Catalog):** 모든 문서는 웹 및 소프트웨어 공학의 설계 패턴을 다루고 있으며, 특정 기술(React, SQL, JWT)에 종속되지 않는 추상화된 구조를 제안합니다. - **기술적 상호보완:** `Infinite Scroll Pattern`은 대량의 데이터를 처리할 때 `React State Pattern`에서 관리하는 상태(로컬/서버)와 결합되어 동작하며, `JWT Authentication Pattern`은 API 호출 시 보안을 위한 인증 수단으로 사용됩니다.