프론트엔드 개발자

서정우

안녕하세요. 문제를 효율적으로 해결하는 것을 선호하며, 반복되는 코드를 리팩토링하는 데 즐거움을 느끼는 개발자입니다. 취미로 운영하는 블로그에서 반복 작업을 자동화하는 크롬 확장프로그램을 개발해 Google 우수 확장프로그램으로 선정된 경험이 있습니다. 이미지 로딩 속도 개선을 위해 변환 프로그램을 직접 개발하는 등, 실제 문제를 기술로 해결하는 것에 흥미를 가집니다.

정보처리기사

개인 블로그

Github

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ShipFriend0516/web27-Preview">Github</a>WebRTC 네이티브 웹 API를 사용해 실시간 mesh 토폴로지 화상통화 구현<ul><li>Socket.io를 사용한 시그널링 서버와의 통신 구현 및 <code>React-Query</code>를 활용한 데이터 페칭 관리, <code>Zustand</code>를 활용한 소켓 전역 상태 관리</li><li>WebRTC internals 도구를 통해 ice candidate 교환 실패 문제를 발견했고, 백엔드 코드를 읽어보며 ice candidate 소켓 이벤트 핸들러 코드가 잘못되어 있다는 것을 발견하고 페어프로그래밍으로 해결</li><li>처음엔 FE만의 문제인 줄 알고 시간을 크게 소모했던 문제가 있었지만, 백엔드 코드를 직접 리뷰하면서 소켓 이벤트 핸들러 코드가 잘못됨을 발견. 해당 경험을 통해 문제를 혼자 안고 있는 것보다 협업을 통한 해결이 훨씬 중요하다는 것을 깨닫게 됨</li></ul>WebRTC 네트워크 품질 모니터링 및 적응형 미디어 스트리밍 구현 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://shipfriend.vercel.app/posts/%ED%94%84%EB%A6%AC%EB%B7%B0-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EA%B8%B0%EB%B0%98-%EB%8F%99%EC%A0%81-%ED%92%88%EC%A7%88-%EC%A1%B0%EC%A0%88-%EA%B8%B0%EB%8A%A5-%EA%B0%9C%EB%B0%9C-3%ED%8E%B8">관련 글</a>)<ul><li>팀 테스트 중 네트워크 이슈로 세션 이탈 현상 발견, 해결하기 위한 네트워크 품질 기반 적응형 미디어 스트리밍 기능 구현</li><li>getStats API를 활용해 패킷 손실률, 지연시간, 대역폭 등의 네트워크 지표를 수집하여 분석</li><li>사용자의 네트워크 품질에 맞춰 미디어 해상도, 비트레이트 등을 동적으로 조절하는 적응형 스트리밍</li><li>네트워크 제한 시뮬레이션 도구 <code>Clumsy</code>를 사용하여 네트워크 환경 테스트 경험</li><li>해상도 자동 조절로 연결 끊김 현상 감소</li><li>해당 기능 구현을 위해 네트워크 지표 학습을 하고, 어떻게 구현할지 단계적으로 기획 후 실제로 테스트까지 해보면서 불안정한 환경에 대한 대응을 생각하고 배울 수 있었음</li></ul>UX 및 코드 최적화<ul><li>반복되는 401 에러 처리 로직을 <code>Axios interceptor</code>로 중앙화하여 토큰 갱신, 요청 재시도, 세션 만료 알림 등을 일관적으로 처리하는 인증 시스템 개선</li><li><code>600</code>줄 이상이던 RTC 코드를 기능별 커스텀 훅으로 분리하여 <code>75%</code> 까지 코드량 감소</li><li>컴포넌트 책임 분리로 협업 과정에서 새로운 기능을 선언형으로 추가할 수 있게 되어 기능 개발 시간 단축</li></ul>

실시간 화상 면접 스터디 PREVIEW

개인 블로그 및 포트폴리오 목적 웹사이트 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://shipfriend.vercel.app">Deploy</a>) (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ShipFriend0516/TechBlog">Github</a>)<ul><li>Next.js와 Server Route, MongoDB Atlas, Vercel Blobs를 사용한 풀스택 개발</li><li>블로그 세부 페이지 CLS, LCP 성능 개선 경험<ul><li>Lighthouse 도구로 페이지의 LCP와 CLS의 개선 필요성을 체감</li><li>next/image 라이브러리 사용, 로딩 방식 변경, 크기 사전 지정 등으로 최적화</li><li>CLS 수치를 <code>0.8</code>에서 <code>0.02</code>로 개선</li><li>LCP를 <code>1.9</code>초에서 <code>0.5</code>초로 개선</li></ul></li><li>블로그 검색엔진 최적화를 위한 slug 사용 및 메타데이터, robots.txt, sitemap.xml 생성 경험<ul><li>SEO를 위해 블로그 세부 페이지를 서버 컴포넌트로 전환</li><li>블로그의 글을 구글 검색 엔진에 색인 성공 경험</li><li>웹페이지를 색인하기까지 필요한 과정에 대해서 깊게 이해</li></ul></li><li>Github OAuth를 NextAuth를 통해 구현</li><li>다크모드가 활성화된 상태에서 새로고침 할 경우 <code>FOUC</code> 깜빡임 문제를 인라인 스크립트 삽입으로 페이지 로딩 전 배경 색 지정으로 해결하여 UX 향상</li></ul>

ShipFriend Tech Blog

교내 개발 동아리 홍보 및 프로젝트 공유 플랫폼 목적 개발 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://primitive.kr">Deploy</a>) (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ShipFriend0516/Primitive">Github</a>)<ul><li>JavaScript → TypeScript, Webpack → Vite 마이그레이션으로 빌드 시간 <code>50%</code> 이상 단축</li><li>TypeScript로 마이그레이션하면서 기존에 사용하던 객체들에 대한 Interface를 작성하면서 TypeScript에 대한 이해도를 올렸고, 마이그레이션 이후 타입 안정성과 관련된 오류 해결에 소모되는 시간 감소</li><li>Firebase를 사용한 인증 시스템 및 데이터 관리 구현</li><li>Firebase의 회원가입 메서드에 포함된 자동로그인 기능을 제외하기 위한 문제 해결 경험 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@shipfriend/Firebase%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%96%B4%EB%93%9C%EB%AF%BC-%EC%88%98%EB%9D%BD-%EA%B8%B0%EB%B0%98-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0">관련글</a>)</li><li>Intersection Observer API를 활용한 무한 스크롤 및 UI 애니메이션 구현</li></ul>