-
Notifications
You must be signed in to change notification settings - Fork 7
Home
FE가 다섯명이라고? 좌충우돌 서버 구현기 인스턴스 생성부터 시작해, Docker와 GitHub Actions를 활용한 CI/CD 파이프라인 구축까지. 서버 부담을 줄이고 실시간 통신을 지원하기 위해 WebSocket 기반의 소켓 서버를 구현하기 위한 고민과 도전 과정을 담았습니다.
서드파티 라이브러리 없이 Canvas API를 활용하여 색상 선택
, 스트로크 조절
, Undo/Redo
와 같은 드로잉 툴의 핵심 기능을 제공하고 있습니다. 이 과정에서 Canvas API의 기본 원리부터 보간법
적용, 커서 보정
까지 심도 있게 학습했으며, 페인트 툴
구현과 같은 고급 기능도 구현할 수 있었습니다.
소켓 통신
과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘
을 통해 실시간 동기화를 보장하며 모든 사용자가 동일한 캔버스 상태를 안정적으로 공유할 수 있도록 했습니다. 이를 위해 Playwright를 활용한 CRDT 테스트까지 체계적으로 접근했습니다.
저희 팀은 재사용성, 유연성, 일관된 디자인을 핵심 가치로, UI와 로직을 분리하는 Headless Pattern
과 Tailwind CSS의 최적화 도구들을 도입했습니다. 특히 조건부 스타일링을 위한 clsx
, 클래스 충돌 해결을 위한 tailwind-merge
, 타입 안전한 컴포넌트 변형 관리를 위한 class-variance-authority(cva)
를 활용하여 견고한 컴포넌트 아키텍처를 구축했습니다.
매주 금요일마다 일주일 동안 학습한 내용과 경험한 트러블 슈팅을 공유하는 시간을 가졌습니다. 이 컨퍼런스는 단순한 지식 공유를 넘어 프로젝트의 기술적 완성도를 높이는 핵심 동력이 되었습니다.
- CRDT의 이해와 구현 전략 (스트로크 단위 관리)
- WebRTC 실시간 통신 구현 (1:1 및 1:N Mesh 방식 분석)
- Canvas API 마스터클래스
- 헤드리스 패턴과 Tailwind CSS를 활용한 효율적인 UI 구현
- Playwright를 활용한 CRDT 테스트 자동화
- Storybook 도입을 통한 컴포넌트 문서화
- 반응형 레이아웃 전략 수립 및 구현
- 보간법 적용 및 커서 보정으로 드로잉 품질 개선
- 단계별 인프라 구축 및 Docker 기반 CI/CD 파이프라인 구현
- Redis를 활용한 실시간 데이터 처리
- 싱글레포에서 모노레포로의 전환
- 효율적인 웹소켓 연결 아키텍처
- 효율적 사운드 객체 & 새로고침 방지 및 리다이렉트 구현
- Canvas 커스터마이징 커서 & 패턴 제작
이러한 지속적인 기술 공유와 학습을 통해 프로젝트의 기술적 완성도를 높일 수 있었으며, 팀원 모두의 성장을 이끌어낼 수 있었습니다. 특히 각자의 전문 분야에서 얻은 인사이트를 공유함으로써 프로젝트 전반의 품질을 향상시킬 수 있었습니다.
5명의 못말리는 FE 개발자들이 모인 팀이에요!
곽수정 | 윤태연 | 유미라 | 정다솔 | 최선아 |
---|---|---|---|---|
👑 팀장 | 부팀장 | BE 팀장 | 시간 지킴이 | FE 팀장 |
- 1. 개발 환경 세팅 및 프로젝트 문서화
- 2. 실시간 통신
- 3. 인프라 및 CI/CD
- 4. 라이브러리 없이 Canvas 구현하기
- 5. 캔버스 동기화를 위한 수제 CRDT 구현기
- 6. 컴포넌트 패턴부터 웹소켓까지, 효율적인 FE 설계
- 7. 트러블 슈팅 및 성능/UX 개선
- WEEK 06 주간 계획
- WEEK 06 데일리 스크럼
- WEEK 06 주간 회고