6. 효율적인 FE 설계

🪵 세부 기술 로그

좋은 컴포넌트란 무엇인가? Headless Pattern

Tailwind CSS로 디자인 시스템 및 UI 컴포넌트 세팅

효율적인 UI 컴포넌트 스타일링: Tailwind CSS cn.ts

웹소켓 클라이언트 구현기: React 환경에서 효율적인 웹소켓 아키텍처

웹소켓 클라이언트 코드 분석 및 공유

좋은 컴포넌트란?

저희 팀은 좋은 컴포넌트의 핵심 가치를 재사용성과 유연성, 일관된 디자인 시스템 으로 정의했습니다.

Important

좋은 컴포넌트란 무엇인가?

Headless Pattern과 TailwindCSS with cn.ts

이러한 가치를 실현하기 위해 UI와 로직을 분리하는 Headless Pattern을 도입했고, Tailwind CSS의 활용도를 높이기 위해 다음과 같은 도구들을 활용했습니다:

clsx: 조건부 클래스 작성을 깔끔하게 관리
tailwind-merge: 스타일 충돌 해결
class-variance-authority: 컴포넌트 변형(variants)을 타입 안전하게 관리

Important

Tailwind CSS로 디자인 시스템 및 UI 컴포넌트 세팅
효율적인 UI 컴포넌트 스타일링: Tailwind CSS cn.ts

웹소켓 관리의 어려움

저희 팀은 React에서 WebSocket을 관리할 때 발생하는 몇 가지 핵심적인 문제를 마주쳤습니다.

Component와 Socket의 생명주기 불일치: React 컴포넌트가 마운트/언마운트될 때마다 소켓 연결이 끊기고 재연결되는 문제가 있었습니다.
전역 상태 관리의 필요성: 여러 컴포넌트에서 소켓 이벤트를 구독하고 상태를 업데이트해야 했기에, 단순한 상태로는 관리가 힘들었습니다.

Socket Store로 깔끔하게, Custom Hooks로 간단하게

실시간 멀티플레이어 게임의 핵심인 소켓 연결은 Zustand로 중앙 관리했습니다. 게임, 드로잉, 채팅 - 세 개의 네임스페이스를 독립적으로 관리하면서도 일관된 방식으로 다룰 수 있었죠. 또한, useState, useEffect로 난잡하게 관리하던 소켓 로직을 깔끔하게 Store + Custom Hook + Handler으로 정리했습니다. 깔끔해졌어요!

Important

웹소켓 클라이언트 구현기: React 환경에서 효율적인 웹소켓 아키텍처
웹소켓 클라이언트 코드 분석 및 공유