강유진 · Frontend Developer

🎓 Education & Experience

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 렌더링 특성을 점검한 사례