2026.01 ~ 2026.02 · 현대자동차 소프티어 부트캠프 7기
GitHub · narratix.site

일반적인 CRUD 서비스가 아닌,
브라우저 입력 시스템(contentEditable), React 렌더링,
실시간 WebSocket 동기화가 동시에 충돌하는 문제를 다룬 프로젝트

역할 Frontend — 실시간 텍스트 에디터 및 협업 첨삭 기능 구현

기술 스택

주요 구현

• contentEditable 기반 커스텀 에디터 설계 및 구현
  → 한글 IME(composition), 일반 입력(input), 복사·붙여넣기, Enter·Delete, Undo·Redo를 브라우저 기본 DOM 조작과 분리하여 직접 제어
  → React state를 단일 진실 원천으로 유지하며, 리뷰(첨삭) 영역을 포함한 복잡한 DOM 구조에서도 커서 안정성·입력 동기화·실시간 소켓 이벤트 처리 보장
• Lighthouse 성능 개선 (Performance 56 → 98, 실서비스 기준)

기술 블로그 포스트

• Vite + Rollup 번들 최적화로 Lighthouse 성능 56 → 98 개선
  → 초기 번들 구조 분석, 불필요한 의존성 제거, 코드 스플리팅 전략을 통해 실제 Lighthouse 성능 지표를 개선한 과정 정리
• 실시간 협업 텍스트 에디터: 동작 흐름 완전 분석
  → WebSocket 기반 실시간 입력 처리 흐름, 이벤트 전파 구조, 동시 편집 시 상태 동기화 방식 분석
• React + contentEditable에서 Enter·Delete·Undo·Redo 구현과 트러블슈팅
  → 브라우저 기본 동작 제어, Selection/Range API를 활용한 커스텀 입력 처리 구현 경험

추가 기술 블로그 포스트

• 실시간 텍스트 에디터 버그 고치기
  → 커서 위치 불일치, 입력 누락 등 실제 사용자 환경에서 발생한 버그 원인 추적 및 수정 과정
• 실시간 협업 자소서 첨삭 서비스의 프론트엔드 데이터 구조 조사
  → 첨삭 코멘트, 문단 단위 상태 관리, 실시간 협업을 고려한 데이터 구조 설계 과정 정리
• WebSocket 이벤트 상태 반영 설계
  → 수신 이벤트를 UI 상태로 변환하는 흐름 설계와 컴포넌트 책임 분리 전략
• WebSocket 수신 후 컴포넌트 미업데이트 트러블슈팅
  → 상태 변경은 되었지만 UI가 갱신되지 않던 문제를 추적하며 React 렌더링 특성을 점검한 사례

Frontend

Tools

• React 렌더링과 상태 업데이트의 실제 동작 원리
• 복잡한 UI를 구조로 해결하는 설계
• 성능 저하의 원인을 추적하고 수치로 개선하는 과정
• “왜 이렇게 구현했는지” 설명 가능한 코드