Home

팀 노션   |   프로젝트   |   피그마   |   위키
배포 링크   |   TypeDoc   |   Storybook

📍 기존 프로젝트: 기술적 도전 및 컨퍼런스 내용 살펴보기

기술적 도전

📡 실시간 통신과 인프라 및 CI/CD 실습

• FE가 다섯명이라고? 좌충우돌 서버 구현기
  인스턴스 생성부터 시작해, Docker와 GitHub Actions를 활용한 CI/CD 파이프라인 구축까지.
  서버 부담을 줄이고 실시간 통신을 지원하기 위해 WebSocket 기반의 소켓 서버를 구현하기 위한 고민과 도전 과정을 담았습니다.
  • 🔗 실시간 통신
  • 🔗 인프라 및 CI/CD 실습

🎨 서드파티 라이브러리 없이 캔버스 구현

• 서드파티 라이브러리 없이 Canvas API를 활용하여 색상 선택, 스트로크 조절, Undo/Redo와 같은 드로잉 툴의 핵심 기능을 제공.
• Canvas API의 기본 원리 학습, 보간법 적용, 커서 보정까지 심도 있게 연구하며 페인트 툴과 같은 고급 기능도 구현.
  • 🔗 자세히 보기

✍️ 실시간 캔버스 동기화

• 소켓 통신과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘을 통해 실시간 동기화 보장.
• Playwright를 활용한 CRDT 테스트로 체계적 접근.
  • 🔗 자세히 보기

🏛️ 효율적인 FE 설계

• UI와 로직을 분리하는 Headless Pattern 도입.
• Tailwind CSS 최적화 도구를 활용한 견고한 컴포넌트 아키텍처 구축.
  • 조건부 스타일링을 위한 clsx
  • 클래스 충돌 해결을 위한 tailwind-merge
  • 타입 안전한 컴포넌트 변형 관리를 위한 class-variance-authority(cva)
• Zustand 기반 중앙화된 소켓 관리와 Custom Hook 도입으로 확장성 높은 설계.
  • 🔗 자세히 보기

웨베벱 컨퍼런스: 기술 공유와 성장의 장

매주 금요일마다 일주일 동안 학습한 내용과 경험한 트러블 슈팅을 공유하는 시간을 가졌습니다.

이 컨퍼런스는 단순한 지식 공유를 넘어 프로젝트의 기술적 완성도를 높이는 핵심 동력이 되었습니다.

1-2주차: 핵심 기술 기반 다지기

• CRDT의 이해와 구현 전략 (스트로크 단위 관리)
• WebRTC 실시간 통신 구현 (1:1 및 1:N Mesh 방식 분석)
• Canvas API 마스터클래스
• 헤드리스 패턴과 Tailwind CSS를 활용한 효율적인 UI 구현

3주차: 기술 고도화

• Playwright를 활용한 CRDT 테스트 자동화
• Storybook 도입을 통한 컴포넌트 문서화
• 반응형 레이아웃 전략 수립 및 구현
• 보간법 적용 및 커서 보정으로 드로잉 품질 개선

4주차: 인프라 및 아키텍처 적용

• 단계별 인프라 구축 및 Docker 기반 CI/CD 파이프라인 구현
• Redis를 활용한 실시간 데이터 처리
• 싱글레포에서 모노레포로의 전환
• 효율적인 웹소켓 연결 아키텍처

5주차: 프로젝트 완성도를 높이기 위한 기술

• 효율적 사운드 객체 & 새로고침 방지 및 리다이렉트 구현
• Canvas 커스터마이징 커서 & 패턴 제작

📍 웨베베베벱 팀 소개

5명의 못말리는 FE 개발자들이 모인 팀이에요!

곽수정	윤태연	유미라	정다솔	최선아
👑 팀장	부팀장	BE 팀장	시간 지킴이	FE 팀장