충족 요구사항

CSS 라이브러리

tailwind vs emotion vs styled-componenets

빠른 속도를 고려하여 tailwind를 선택했습니다.

기술 유형 장점 단점
Tailwind CSS 유틸리티 CSS 프레임워크 직관적이고 신속한 스타일링 클래스 이름이 길어질 수 있음
Emotion CSS-in-JS 라이브러리 JavaScript 내에서 CSS 작성 가능 (동적 스타일링) 초기 설정 필요, 번들 크기 증가 가능
Styled-components CSS-in-JS 라이브러리 CSS 문법 사용, 컴포넌트 스타일 관리 용이 서버 사이드 렌더링 시 설정 필요

서버 상태 관리 라이브러리 : react-query

react-query vs tanstack vs SWR

비동기 데이터 관리가 필요하며, 추가로 상태 관리 기능이 필요하기에 swr은 고려대상에서 제외했습니다.

현재 React만을 사용하고 있고, 빠른 개발을 원하기에 React Query를 선택했습니다.

기술 유형 장점 단점
React Query 데이터 fetching 라이브러리 자동 데이터 업데이트 및 동기화, 쿼리 캐싱 지원, REST 및 GraphQL 모두 지원 클라이언트 상태 관리는 별도 도구 필요 가능, 초보자가 설정할 때 다소 복잡할 수 있음
TanStack Query 데이터 fetching 라이브러리 서버 상태 관리 최적화, React 외에도 Vue, Svelte 지원 다양한 프레임워크 지원에 따라 추가적인 학습 필요
SWR 데이터 fetching 라이브러리 경량 API, 간편한 사용법, 자동 리패치 및 캐싱 비동기 데이터 관리에 있어 제한적일 수 있음, 상태 관리 기능은 내장되어 있지 않음