프론트엔드 개발자

유호준

생산성을 높여 함께 성장하는 개발자

책임감

효율적

문제 해결사

고객 중심

열정적

기술블로그

깃허브

서울대학교 학우들을 위한 교내/외 버스 위치 및 정류장 정보 실시간 제공 서비스<a target="_blank" rel="noopener noreferrer nofollow" href="https://snubus.vercel.app">프로덕트 링크</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hoooooojjjj/SNUBUS">깃허브 링크</a><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223509824501">AbortController</a>와 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223510529624">Promise.all</a>을 활용하여 불필요한 네트워크 요청 제거 및 응답속도 200% 개선.</li><li>‘kakao is not defined’ 오류를 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223440534340">네트워크 분석 및 window 객체 검증</a>을 통해 React 환경에 맞게 지도 렌더링, 사용자 이탈률 감소에 기여.</li></ul><ul><li>Express로 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223511697593">프록시 서버</a>를 구축하여 공공데이터 API에서 발생한 CORS 이슈 해결.</li><li>버스 정류장 간 직선 거리와 이동 비율을 산출하여, 각 구간별 버스 이동 비율을 시각화하는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223508295420">정류장 라인 UI</a>를 구현.</li><li>버스 경로선 UI 부정확성을 해결하기 위해 Google Directions API로 세분화된 경로 좌표를 도출. 실제 도로에 맞는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223466838652">경로선을 최적화</a>하여 버스 노선 정보 제공.</li></ul>

SNUBUS

서울대학교 미술대학 학우분들을 위한 작품 전시 및 판매 서비스 <a target="_blank" rel="noopener noreferrer nofollow" href="https://graduart.gallery">프로덕트 링크</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hoooooojjjj/New_GraduART">깃허브 링크</a><ul><li>코드 · 커밋 · PR <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223507064379">컨벤션과 Git 브랜치 전략(Github Flow)</a>을 도입하여, 코드 충돌 및 병합 이슈를 5% 미만으로 낮추고 협업 효율성 개선.</li><li>Emotion의 props 기반 동적 스타일링과 Media Queries를 통해 애니메이션과 반응형 디자인을 구현함으로써 일관된 UI 인터랙션을 제공하고 UI 개발 생산성 향상.</li><li>고화질 미술 작품 이미지를 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223727990060">WebP 변환</a> 및 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223728095929">preloading</a> 기법을 도입하여 이미지 로딩 속도 300% 개선.</li><li>picture 태그와 반응형 source 태그, place holder를 활용해 디바이스별 최적화 및 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223728167592">이미지 렌더링 지연 문제 해결</a>.</li></ul>

GraduART

전문직 수험생분들을 위한 디지털 종합 학습 웹, 앱 서비스 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://passdream.app/">패스드림</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://studytapa.com/">스터디타파</a>CTO.&nbsp;<ul><li>플랫폼의 전반적인 기획부터 웹 프론트, 앱 및 웹앱, 백 개발 및 유지보수와 체계적인 문서화 및 공유 문화 도입.</li><li>풀스택 개발 환경에서 반복적인 API 작업을 줄이기 위해 부분적으로 tRPC 도입, API 구현 및 연결 자동화로 생산성 50% 향상.</li><li>GitHub Actions와 AWS CodeDeploy를 활용한 CI/CD 파이프라인을 구축하여 서버 배포 자동화. </li></ul>Front-End.&nbsp;<ul><li>빠른 배포 주기를 극복하기 위해 React 컴포넌트 계층 구조 시각화 백오피스를 개발하여 복잡한 컴포넌트의 이해도를 높이고, 신규 기능 개발 시 협업 효율 향상.</li><li>Custom Hook 및 P&amp;C Pattern 도입으로 짧은 배포 주기 속에서 코드 가독성과 개발 속도 향상.</li><li>Axios Interceptor와 React Query Error Boundary를 활용해 네트워크 에러 처리 로직 중앙집중화.</li><li>URL 파라미터 변경 시 key props 활용으로 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223730782564">UI state 잔존 문제 해결</a>, 불필요한 상태 초기화 코드를 줄여 사용자 경험 및 유지보수 효율성 개선.</li></ul>Back-End.&nbsp;<ul><li>서버 배포 시 Docker 디스크 공간 부족 문제를 해결하기 위해 GitHub Actions work flow에 <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/so_no7/223740415086">Docker 리소스 정리를 자동화</a>하는 스크립트를 추가하여 배포 안정화.</li><li>NestJS와 TypeORM을 활용하여 결제, 구독, 환불 프로세스를 트랜잭션 내에서 안정적으로 처리하는 결제 로직 설계 · 구현.</li><li>멘토 피드백을 적극 반영하여 관리형 멘토링 종료 프로세스를 재설계, 멘토링 종료 버튼 도입 및 채팅 기능 유지로 사용자 경험 개선.</li></ul>