2025 LG Uplus Ureca Front-end Course

주요 활동:

• 웹 아키텍처 기본 및 웹 보안 기초 교육
• 코딩테스트 및 자바 기본역량
• 코드 리뷰와 페어 프로그래밍을 통한 코드 품질 향상

Mobile-View Stock Web Service

📘 GitHub Repository

🔗Video

프로젝트 소개: 앱처럼 동작하는 모바일뷰 기반 주식확인 증권 웹 서비스

담당 업무:

• Figma를 통해 컴포넌트 및 전체 유저시나리오 워크 플로우 디자인
• Nextjs- App router 를 통한 페이지 라우팅
• 앱 디자인 컴포저블 UI 형식으로 화면 설계
• 디바운싱 & 엘라스틱 서치를 통한 주식정보 조회 (국내, 미국 총 6000개 추가)
• Backend 연동하여 한국투자증권 실시간 주식(국내,미국) 정보 조회 기능 구현
• 시연 영상 제작 (Adobe Premiere Pro)

2024 Naver Boostcamp Web Development Course

주요 활동:

• 웹 프로그래밍 심화 학습 및 실무 프로젝트 수행
• 팀 프로젝트를 통한 협업 경험 강화
• 코드 리뷰와 페어 프로그래밍을 통한 코드 품질 향상

A real-time collaborative Markdown editor powered by CRDT

🔗 Live Demo | 📘 GitHub Repository

프로젝트 소개: 실시간으로 여러 사용자가 동시에 마크다운 문서를 편집할 수 있는 웹 애플리케이션입니다. CRDT 알고리즘을 활용하여 동시성 문제를 해결하고, 실시간 협업 기능을 구현했습니다.

담당 업무 및 성과:

• CRDT 라이브러리 설계 및 구현

  • RGA 기반 이중 링크드리스트로 CRDT 설계
  • EditorCRDT와 BlockCRDT 분리하여 확장성 부여
  • 기존 단일 CRDT에서 다중 분리 구조로 변경하여 텍스트 동기화 성능 개선

• 워크스페이스 실시간 상호작용 및 권한 관리 기능 개발

  • 사용자별 워크스페이스 접근 권한 시스템 설계 및 구현
  • WebSocket 기반 페이지별 실시간 다중 접속 관리 및 상태 동기화
  • Socket.io를 활용한 실시간 알림 시스템(Toast)으로 협업 경험 개선

• 개발위키 트러블슈팅 포함 40개 작성

• Nocta Icon 로티 애니메이션 제작

  

  • 디자인: 피그마
  • 애니메이션: Phase, Lotties

• 기술 시연 영상 제작

• AI 기능 추가

  • 유저가 원하는 페이지 문서의 초안을 작성하거나 정보를 얻게 도와줌

문제 해결 경험:

• 입력 순서 불일치로 인한 캐럿 동기화 문제

  • 여러 문서를 동시에 편집할 때 유저들의 캐럿이 의도치 않게 다른 위치로 이동하는 현상 발생
  • 해결 방법:
    • 글로벌 상태로 관리되는 캐럿 위치가 모든 문서에 영향을 미치는 것을 확인
    • 문서별로 독립적인 캐럿 상태 관리의 필요성 도출
    • 로컬상태에서 페이지별 독립 캐럿 상태 관리 시스템 구현(setCaretPosition)
  • 결과:
    • 실시간 다중 사용자 편집 시에도 일관된 사용자 경험 제공

• 불필요한 리렌더링 55% 개선

  • 페이지 리사이즈 및 이동시 동일한 DOM요소의 리렌더링 발생
  • 과도한 렌더링으로 인한 성능저하 발생
  • 해결 방법:
    • 텍스트 블럭요소 React.memo 및 useCallback 활용
  • 결과:
    • 전체 렌더링 시간 11.3ms -> 4.9ms 으로 55% 개선
    • 리스트 가상화를 통한 보이는 요소만 렌더링 처리