프론트엔드 기술 스택

안녕하세요 chaeso-zip 프론트엔드 정동환입니다. 오늘은 가볍게 저희 프론트엔드에서 사용하고 있는 기술 스택을 소개해드리려고 해요.

Next.js vs React

먼저 저희는 Next.js를 사용합니다. 초기에는 B2C의 성격이 가능한 서비스이고 추후 광고 추천의 품질을 높이려면 사용자를 많이 유치해야 한다고 생각했습니다. 그래서 검색엔진 최적화를 위해 Next.js를 선택했습니다.

UI 개발

UI 개발은 tailwindcss 4와 Base ui를 사용하고 있습니다.

사이드 프로젝트 특성상 빠르게 개발하기 위해 접근성 등의 기능이 구현되어 있는 headless ui에 Tailwindcss로 스타일을 입히는 방식을 선택했습니다.

Headless ui 라이브러리는 Radix primitive와 Base ui 두 개의 후보를 두고 고민했습니다.

그러나 Radix UI의 유지보수가 느린 반면 Base UI의 업데이트는 상당히 빠릅니다.

또한 최근 Shadcn ui에서 Base UI와 Radix primitive 선택 사용자의 비율이 2 대 1로 사용되고 Base UI의 주간 다운로드가 600만회를 넘겼다는 근거로 기본값을 Radix UI에서 Base UI으로 변경했다는 공지를 보았습니다.

저희 팀은 이를 참고해 Base UI의 안정성이 충분히 올라왔다고 판단해서 Radix primitive에서 Base ui로 기술 스택을 변경하기로 했습니다.

이렇게 만든 UI 컴포넌트는 Storybook을 이용해서 문서화해 디자이너와 소통합니다.

테스트 코드

테스트 코드는 vitest, testing-library, playwright를 사용하기로 했습니다. codecov도 연동해서 지속적으로 커버리지를 관리할 생각입니다.

상태관리

상태관리는 TanStack Query와 Zustand를 사용하기로 했습니다.

코드 포맷팅

기존 eslint, prettier의 느린 성능을 보완한 Oxlint와 Oxfmt를 사용해 코드 품질을 관리합니다.

모니터링 및 환경변수 관리

Sentry를 이용해 모니터링을 진행하고 Doppler를 이용해 환경변수를 관리합니다. 프로덕션 빌드 시 환경변수 주입을 확인하기 위해 @t3-oss/env-next 나 @t3-oss/env-core 도입도 고려중입니다.

배포

배포는 github actions으로 도커라이징을 진행한 후 AWS를 이용해서 진행하고 있습니다. 배포 관련된 자세한 설명은 다음 게시글에서 설명드리겠습니다.