상태 관리 가이드

GitLab 프론트엔드 애플리케이션에서 Apollo와 Pinia를 활용한 클라이언트 상태 관리 방법과 선택 기준을 설명합니다.

GitLab은 클라이언트 상태 관리를 위해 Apollo 와 Pinia 두 가지 솔루션을 지원합니다. 이 중 하나를 기본 상태 관리자로 선택하는 것은 간단하지 않습니다. 이 페이지는 선택 방법에 대한 일반적인 가이드를 제공합니다. GitLab 코드베이스에서 Vuex를 볼 수도 있습니다. Vuex는 GitLab에서 더 이상 사용되지 않으며 새로운 Vuex 스토어는 생성하지 않아야 합니다 . 앱에 Vuex 스토어가 있다면 마이그레이션을 고려하세요 . 상태(state)와 데이터(data)의 차이 # **데이터(Data)**는 사용자가 상호작용하는 정보입니다. 일반적으로 외부 요청(GraphQL 또는 REST)이나 페이지 자체에서 가져옵니다. **상태(State)**는 사용자 또는 시스템 상호작용에 관한 정보를 저장합니다. 예를 들어 모든 플래그는 상태로 간주됩니다: isLoading , isFormVisible 등. 상태 관리는 상태와 데이터 모두를 다루는 데 사용할 수 있습니다. 상태 관리가 필요한가요? # 애플리케이션에서 먼저 표준 Vue 데이터 흐름을 사용하는 것이 좋습니다: 컴포넌트가 로컬 상태를 정의하고 props를 통해 전달하며, 이벤트를 통해 변경합니다. 그러나 이 방식은 상태를 정의한 컴포넌트의 직접 하위 컴포넌트가 아닌 여러 컴포넌트 간에 상태를 공유하는 복잡한 경우에는 충분하지 않을 수 있습니다. 해당 상태를 애플리케이션의 루트로 끌어올리는 것을 고려할 수 있지만, 루트 컴포넌트가 너무 많은 일을 한꺼번에 처리하기 시작하면 결국 비대해집니다. 이러한 복잡성을 해결하기 위해 상태 관리 솔루션을 사용할 수 있습니다. 아래 섹션이 선택에 도움이 될 것입니다. 아직 확실하지 않다면 Pinia보다 Apollo를 먼저 사용하세요. Apollo # Apollo 는 GraphQL API에 대한 기본 인터페이스이며, 클라이언트 측 상태 관리자로도 사용할 수 있습니다. GraphQL과 Apollo에 대해 자세히 알아보세요 . 강점 # GraphQL 요청에서 가져온 데이터를 다루는 데 탁월하며, 기본적으로 데이터 정규화 를 제공합니다. GraphQL을 사용할 수 없을 때 REST API의 데이터를 캐시할 수 있습니다. 쿼리가 GraphQL 스키마에 대해 정적으로 검증됩니다. 약점 # 클라이언트 상태 관리에서 Pinia보다 복잡하고 까다롭습니다 . Apollo DevTools: 상당수의 페이지에서 제대로 작동하지 않으며, Apollo Client 오류를 추적하기 어렵습니다. Apollo를 선택하는 경우 # GraphQL API를 사용하는 경우 다음과 같은 특정 Apollo 기능이 필요한 경우: 매개변수화된 캐시, 캐시 무효화 폴링 Stale While Revalidate 실시간 업데이트 기타 Pinia # Pinia 는 Vue가 권장하는 클라이언트 측 상태 관리 도구입니다. GitLab에서의 Pinia에 대해 자세히 알아보세요 . 강점 # 단순하지만 강력합니다 Pinia 사이트 기준으로 ≈1.5kb의 경량 크기 내부적으로 Vue 반응성을 사용하며,