Skip to main content
Version: 2.0

Introduction

img

이번에 Docusaurus 다음 프로젝트로 React Scaffold Project를 진행하려고 합니다.

기존에는 유료 템플릿 쫒아 만들기에만 급급했는데, 이번에는 제대로 기초부터 공부해서 차근 차근 프로젝트를 생성, 추가하려고 합니다.

프론트엔드 기술 스택 선정 배경 및 이유

  1. 프론트엔드 라이브러리/프레임워크

선택: React

// 여기에 react 특징 추가// 여기에 React, Vue, Angular의 특징, 장점, 단점, 근래 평가를 테이블로 추가// npm trend에서 세 기술의 트렌드 그래프 추가 

  1. 프로젝트 설정 및 빌드 도구

선택: Next.js

기존에 많이 사용되던 CRA(Create React App)는 공식적으로 더 이상 권장되지 않는(deprecated) 상태입니다. 대신, 프로젝트의 특성에 맞게 빌드 도구를 선택해야 하는데, SSR(Server-Side Rendering)과 SEO 최적화를 고려하여 Next.js를 선택했습니다. 또한, Next.js는 정적 사이트 생성(SSG) 및 API 라우팅 기능을 제공하여 개발 생산성을 높일 수 있습니다.

  1. 클라이언트 상태 관리 라이브러리

선택: Zustand + Redux Toolkit

React의 기본 상태 관리(useState, useContext)만으로는 대규모 프로젝트에서 한계가 있습니다. 전역 상태 관리가 필요하며, 직관적인 API와 성능 최적화를 위해 Zustand + Redux Toolkit 조합을 선택했습니다. Redux Toolkit은 Redux의 보일러플레이트 코드를 줄여주고, Zustand는 가벼우면서도 직관적인 상태 관리 기능을 제공합니다.

  1. 서버 상태 관리 라이브러리 (API 비동기 통신)

선택: React Query

서버 상태는 클라이언트 상태와 다르게 캐싱, 동기화, 자동 리페칭 기능이 중요합니다. 이에 최적화된 React Query를 선택했습니다. React Query는 REST API뿐만 아니라 GraphQL도 지원하며, 데이터 관리가 간편하여 유지보수성이 높습니다.

  1. UI 라이브러리 & CSS 프레임워크

CSS 프레임워크 선택: Tailwind CSS

UI 컴포넌트 라이브러리 선택: ShadCN-UI

Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 스타일링을 제공하여 반복적인 CSS 작성을 줄이고, 컴포넌트 스타일 재사용성을 높일 수 있습니다. UI 컴포넌트 라이브러리로는 ShadCN-UI를 선택했는데, 이는 Tailwind 기반으로 만들어져 있어 확장성이 뛰어나며, 커스터마이징이 쉽습니다.

  1. 라우팅

선택: Next.js

Next.js는 자체적으로 라우팅 시스템을 포함하고 있어 별도의 React Router를 사용할 필요가 없습니다. SSR, SSG 등을 활용한 동적 라우팅이 가능하여 유지보수성을 높일 수 있습니다.

  1. 서버 사이드 렌더링(SSR) & 클라이언트 사이드 렌더링(CSR)

선택: Next.js

SEO 최적화와 빠른 페이지 로드를 위해 Next.js의 SSR 및 SSG 기능을 활용합니다. 클라이언트 사이드에서만 렌더링하는 CSR 방식보다 성능적으로 유리합니다.

  1. 다국어 지원

선택: react-i18next

다국어 지원을 위해 react-i18next를 선택했습니다. 이는 널리 사용되는 라이브러리로, 동적 번역 기능과 JSON 파일을 활용한 다국어 관리가 용이합니다.

  1. React 애니메이션 라이브러리

선택: Framer Motion

React에서 애니메이션을 구현할 때, 성능과 개발 편의성을 고려하여 Framer Motion을 선택했습니다. 직관적인 API와 다양한 애니메이션 기능을 제공하여, UI 인터랙션을 개선할 수 있습니다.

  1. Form 관리

선택: React Hook Form + zod

폼 데이터를 관리하고 검증하는 데 최적화된 React Hook Form을 선택했습니다. 추가적으로, 스키마 기반 검증을 위해 zod를 함께 사용하여 안전성을 높였습니다.

  1. 테스팅

선택: React Testing Library

테스트 코드 작성을 쉽게 하기 위해 React Testing Library를 선택했습니다. 이는 사용자의 실제 동작을 기반으로 테스트를 작성할 수 있어 유지보수성과 신뢰성이 높습니다.

  1. 아이콘 & SVG

선택: Lucide React

Lucide React는 가벼우면서도 다양한 아이콘을 제공하는 라이브러리로, Tailwind와도 잘 어울리는 디자인을 제공합니다.

  1. 모노레포 (Monorepo)

선택: Turborepo

대규모 프로젝트를 효율적으로 관리하기 위해 Turborepo를 선택했습니다. 이는 빌드 속도를 개선하고, 패키지 간 의존성을 체계적으로 관리할 수 있도록 도와줍니다.

  1. 디자인 시스템

선택: Storybook + Chromatic

디자인 시스템을 구축하고 유지보수하기 위해 Storybook을 선택했으며, UI 테스트 자동화를 위해 Chromatic을 함께 사용합니다.

  1. 기타 도구 (모두 사용)

Biome: ESLint, Prettier를 대체하는 코드 포맷팅 및 린팅 도구

Cookieconsent: GDPR 준수를 위한 쿠키 관리

proposal-temporal: JavaScript의 날짜 및 시간 처리를 개선하는 최신 제안

결론

이번 프로젝트의 기술 스택을 선정하는 과정에서, 최신 트렌드와 유지보수성을 고려하였습니다. Next.js를 중심으로 Vite보다 확장성이 높은 SSR 환경을 구축하고, 상태 관리를 위한 React Query 및 Zustand를 채택하였습니다. 또한, UI 개발을 위해 Tailwind CSS 및 ShadCN-UI를 선택하여 일관된 디자인 시스템을 유지할 계획입니다.

이와 같은 기술 스택을 기반으로 개발 생산성을 극대화하고, 유지보수성을 높이는 것이 목표입니다. 팀원들이 더욱 효율적으로 협업할 수 있도록 최적의 환경을 제공하겠습니다!

프론트엔드 기술 스택 선정 배경 및 이유