-
Notifications
You must be signed in to change notification settings - Fork 5
FE 기술 문서
-
낮은 러닝 커브
프론트 팀원 모두가 스타일링 도구로Styled-Components를 사용해왔습니다. 현재 2주 주기의 빠른 스프린트가 연속되는 상황이므로 구현 속도가 높은 우선순위라고 판단했습니다. 따라서 팀원들이 능숙하게 다룰 수 있는 기술 스택인Styled-Components로 선정했습니다. 또한, 점유율이 높은 기술이기 때문에 방대한 커뮤니티를 바탕으로 트러블슈팅 관련 정보를 얻기 용이한 점에서도 쉽게 학습할 수 있을 것이라 판단했습니다. -
간편한 동적 스타일링
Styled-Components에서는props를 통해 손쉽게 스타일을 동적으로 변경할 수 있어, 다양한 조건에 따라 스타일을 조정하기 용이합니다. -
컴포넌트 기반 스타일링
스타일링을 개별의 컴포넌트에 각각 적용하여, 스타일의 격리성과 독립성을 보장할 수 있습니다.
tanstack-query는 대표적으로 리액트에서 서버상태를 다룰때 사용하는 라이브러리입니다.
서버상태를 관리할 수 있는 대표적인 라이브러리들은 RTK Query나 SWR 등이 있습니다.
저희 팀은 그 중에서 tanstack-query를 채택했는데요.
왜 tanstack-query여야만 했을까요?
이에 대해서 설명 드리기 전에 먼저 서버상태에 대해서 설명드리려합니다.
상태란 소프트웨어 개발에서 어떠한 의미를 지닌 값들의 집합이라고 할수 있습니다.
또 상태는 클라이언트 측에서 관리되는 "클라이언트 상태"와 서버와의 상호작용에서 비롯된 "서버 상태"로 나뉩니다.
클라이언트 상태는 사용자 인터페이스(UI)와 관련된 데이터로, 사용자 입력, UI 컴포넌트의 현재 상태, 애플리케이션 내에서의 세션 정보 등을 포함합니다.
예를 들면 우리가 입력하고 있는 인풋 값, 혹은 사용자가 보고 있는 현재 페이지 상태 등을 예로 들 수 있을 것같아요.
이 상태는 주로 메모리 내에서 관리되며, 애플리케이션이 실행되는 동안만 유지됩니다.
서버 상태는 서버에서 관리되는 데이터로, 데이터베이스나 외부 API로부터 받아오는 정보를 포함합니다.
이 상태는 비동기적으로 가져오며, 네트워크 상태나 서버의 응답 시간에 따라 변동될 수 있습니다.
서버 상태는 서버와의 통신을 통해 업데이트되며, 최신 상태를 유지하기 위해 주기적인 데이터 동기화가 필요합니다.
이는 동시에 최신 상태를 사용자들에게 보여주기 위해선 주기적인 API 요청을 해야만 한다는 뜻인데요.
만약 업데이트가 필요하지 않은 상태인데도 불구하고 매번 API 요청을 하게 된다면 비효율적이겠죠?
tanstack-query를 사용한다면 이러한 문제점을 해결할 수 있습니다.
- 더 많은 유연성과 구성 옵션
- tanstack-query는 매우 유연한 API를 제공하며, 다양한 상황에 맞게 세밀하게 구성할 수 있습니다. 예를 들어, 쿼리의 재시도 로직, 캐싱 전략, 쿼리 무효화 및 갱신 주기를 세밀하게 조정할 수 있습니다.
SWR에서도 위의 기능들은 가능하지만 tanstack-query가 더 많은 유연성과 확실한 로직의 분리를 보장해준다고 판단했습니다. 쿼리 무효화를 예로 들어보겠습니다.
-SWR로 쿼리 무효화
function MyComponent() {
const { data } = useSWR("/api/data", fetcher);
const handleMutate = async () => {
// 데이터 업데이트
await axios.post("/api/update", { newData: "new value" });
// 쿼리 무효화 및 재페칭
mutate("/api/data");
};
return (
//...
);
}-tanstack-query로 쿼리 무효화
function MyComponent() {
const { data, error } = useQuery(QUERY_KEY, fetchData);
const mutation = useMutation(updateData, {
onSuccess: () => {
// 쿼리 무효화 및 재페칭
queryClient.invalidateQueries(QUERY_KEY);
},
});
const handleUpdate = () => {
mutation.mutate("new value");
};
return (
//...
);
}SWR에서는 데이터 페칭 후 해당 블록에서 다시 mutate 함수를 선언해야하지만, tanstack-query에선 분리 된 onSuccess 부분에서 invalidateQueries를 통해 리페칭을 보장할 수 있습니다.
- 개발 편의성
- tanstack-query는 리액트 훅과 쉽게 통합되어, 개발자가 익숙한 방식으로 상태 관리를 할 수 있도록 지원합니다. 또한, 다양한 옵션과 설정을 통해 세부적인 동작을 제어할 수 있습니다. RTK Query에 비해서 가벼운 보일러플레이트를 가지고 있습니다.
-
풍부한 데이터 관리 기능: tanstack-query는 다양한 데이터 관리 기능을 제공합니다. 데이터 페칭, 상태 관리, 캐싱, 동기화 등의 기능이 통합되어 있어 별도의 라이브러리나 추가 설정 없이 사용할 수 있습니다. 예를 들어,
쿼리 키를 사용한 데이터 그룹화와 캐싱이 매우 직관적이며 강력합니다. -
동시성 제어 및 데이터 일관성 유지:
-
tanstack-query는 동시성 제어와 데이터 일관성을 유지하기 위한 다양한 옵션을 제공합니다. 여러 요청이 동시에 발생하거나, 빠르게 변경되는 데이터 환경에서도 일관성을 유지할 수 있습니다. 낙관적 업데이트, 쿼리 무효화 등의 기능이 이를 지원합니다. 데벨업의 최종적인 목표는 개발자 취준생을 위한 플랫폼입니다. 이는 현재 구현하고 있는 코드리뷰 뿐만 아니라 다양한 기능이 추가될 수 있음을 의미합니다. 이를 위해tanstack-query를 사용하여 서버 상태 관리의 기반을 다져놓고자 합니다.
-
-
서버 상태와 클라이언트 상태의 명확한 분리:
- tanstack-query는 서버 상태와 클라이언트 상태를 명확히 분리하여 관리할 수 있는 구조를 제공합니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다. 클라이언트 상태 관리 라이브러리와 결합하여 사용하는 경우에도 자연스럽게 통합됩니다.
- 다양한 정보를 제공합니다.
- 에러 발생 시점의 디바이스, 브라우저, 유저가 사용하는 OS, 접근 경로 등 다양한 정보를 제공받을 수 있습니다.
- 사용자의 화면을 녹화하여 어떤 상황에서 에러가 발생했는지 직관적으로 파악할 수 있습니다.
- 빠른 도입이 가능합니다.
- 적은 코드로도 도입할 수 있으며, Sentry 화면에서 에러를 직관적으로 파악할 수 있어 러닝 커브가 높지 않습니다.
- 에러 레벨에 따라 알림 기능을 제공합니다.
- 에러 레벨을 종류에 따라 커스터마이징할 수 있으며, 레벨에 따라 슬랙이나 이메일 등 다양한 채널을 통해 알림을 받을 수 있습니다.
- 많은 기업들로부터 인정받았습니다.
- 카카오페이, 라인 등 다양한 대규모 서비스 기업에서 사용 중입니다. 이는 Sentry가 대규모의 서비스에서도 유용하고 안정적으로 사용된다는 것을 의미합니다.
- 실시간 오류 추적 및 분석
- 실시간으로 오류를 추적하고 분석할 수 있어 문제를 빠르게 식별하고 해결할 수 있습니다.
- 에러 발생 시점부터 해결까지의 시간을 단축시켜 사용자 경험을 개선할 수 있습니다.
- 웹에 적합한 도구입니다.
- 웹 환경을 우선적으로 타겟팅하는 서비스 특성상, GA4를 통해 웹 사용자 행동 데이터를 효과적으로 수집하고 분석할 수 있습니다.
- 마케팅 분석에 유리합니다.
- GA4는 다양한 마케팅 캠페인 데이터를 추적하고, 캠페인의 효과를 분석할 수 있는 기능을 제공합니다.
- 예측 분석, 인사이트 제공 기능을 통해 마케팅 전략 수립에 필요한 인사이트를 도출할 수 있습니다.
- 사용자 중심의 분석이 가능합니다.
- GA4는 개별 사용자의 전체 여정을 추적하고 분석할 수 있습니다. 이를 통해 사용자의 행동 패턴을 파악하고, 사용자 경험을 개선할 수 있습니다.