Socket.IO 이벤트를 TanStack Query query key와 연결해 댓글, 버전, 리액션 변경 사항을 새로고침 없이 반영

Video, YouTube, PDF, Image처럼 미디어 타입이 다른 화면에서도 댓글과 드로잉 피드백 위치가 유지되도록 좌표 처리 흐름 개선

Konva.js 기반 드로잉 도구에서 미디어 크기 변경 후에도 피드백 위치가 어긋나지 않도록 정규화된 좌표 기준으로 표시

현재 재생 시간 상태가 입력 UI 렌더링까지 영향을 주는 문제를 분석하고 selector 기반 훅으로 상태 구독 범위 정리

소수점 초 단위 시간을 유지하고 0.1초 허용 오차 기반 비교 방식으로 비디오 타임스탬프 정밀도 개선

iOS Safari 키보드, react-pdf CMap, YouTube IFrame API, IME 입력처럼 브라우저와 외부 API 제약을 재현 기준으로 확인하고 우회

AI 응답이 늦게 도착하는 동안 다음 사용자가 새 세션을 시작하면 이전 결과가 현재 화면을 덮어쓸 수 있는 문제 확인

요청 시점의 sessionId와 응답 시점의 현재 sessionId를 비교해 오래된 응답을 상태에 반영하지 않도록 처리

Canvas API로 촬영 이미지 미러 반전, 4컷 합성, QR 오버레이를 구현

MediaRecorder로 촬영별 짧은 영상을 수집하고 선택된 사진에 대응하는 비디오 Blob을 File로 변환해 QR 업로드 요청에 포함

Chrome DevTools, CloudWatch 로그, 서버 응답 상태를 함께 확인하며 현장 장애 원인 범위를 프론트엔드·네트워크·서버 단계로 좁힘

RSS 기반 개발 블로그 수집 서비스에서 RSS 등록 모달, form hook, 블로그 URL을 RSS URL로 변환하는 유틸 구현

OAuth/API 연동과 인증 상태 관리를 위해 useSignIn, useSignUp 훅과 Zustand auth store 사용

무한 스크롤, Lazy Loading, Mock API 기반 개발 흐름을 통해 콘텐츠 탐색 경험 개선

코드리뷰와 데일리 스크럼을 통해 작업 진행 상황, 이슈, 완료 예정 범위를 공유하고 학습 내용을 세미나와 문서로 정리

React 내부 동작 이해를 위해 Virtual DOM을 TypeScript로 직접 구현

createElement 함수로 JSX 형태의 입력을 Virtual DOM 객체로 변환

단순 diff 알고리즘을 구현해 이전/현재 Virtual DOM tree의 props와 자식 노드 변경 사항을 DOM에 반영

useState 훅을 직접 구현하며 컴포넌트별 상태 저장 문제를 확인하고 WeakMap 기반 상태 저장 구조를 실험

Next.js 정적 생성 구조로 게시글 페이지를 만들고, 게시글 본문에서 description을 생성해 페이지별 SEO 메타데이터에 반영

canonical URL, Open Graph, Twitter Card, article published time/tag 메타 정보를 공통 SEO 컴포넌트로 관리

next-sitemap 기반 sitemap/robots 생성과 RSS/Atom feed 생성 스크립트를 구성해 검색 엔진과 구독 피드가 접근할 수 있는 콘텐츠 배포 흐름 마련

Notion S3 이미지 URL의 서명 만료로 시간이 지나면 이미지가 깨지는 문제 확인

동기화 과정에서 이미지를 수집하고 sharp로 WebP 변환 후 Vercel Blob에 저장하는 방식으로 이미지 URL 안정화

경북대학교 축제 안내 웹 서비스에서 지도 기반 부스 안내와 축제 정보 탐색 흐름을 웹으로 옮기는 작업에 참여

Naver Map API를 사용해 부스 마커와 zone polygon을 렌더링하는 지도 컴포넌트 구현

부스명, 설명, zone 검색 결과에 맞춰 지도 표시 범위를 조정하고 검색 결과에 따라 zone polygon을 동적으로 렌더링

EPSG:3857 좌표 변환과 회전 행렬 보정을 적용해 실제 축제 구역과 지도 표시의 어긋남을 줄임

GA4 이벤트 유틸을 추가해 부스 상세 열람과 지도 마커 클릭 등 사용자 행동을 추적할 수 있는 기반 마련

커머스 서비스 구축 Winter Sprint 기획과 운영, FE/BE 주차별 체크리스트 구성

AI Native Session 커리큘럼 및 스프린트와 고도화 운영 구조 기획

30명 규모 부원 대상 JavaScript 기초부터 React 심화까지 단계별 커리큘럼 설계 및 운영

매주 실습 중심 강의 진행 및 개별 코드리뷰, 부진 부원 대상 1:1 멘토링으로 학습 격차 해소

선발 과정에서 기술 역량 평가 기준 수립

FSD 아키텍처, React Native 웹뷰 하이브리드 앱 세미나 발표

React 기반 웹 개발 학습과 중앙·대경권 해커톤 참여를 통한 실전 프로젝트 경험

수기 면회신청 전산화