미리보기

전문직 수험생분들을 위한 디지털 종합 학습 웹, 앱 서비스 - 패스드림 | 스터디타파

CTO. 

• 플랫폼의 전반적인 기획부터 웹 프론트, 앱 및 웹앱, 백 개발 및 유지보수와 체계적인 문서화 및 공유 문화 도입.

• 풀스택 개발 환경에서 반복적인 API 작업을 줄이기 위해 부분적으로 tRPC 도입, API 구현 및 연결 자동화로 생산성 50% 향상.

• GitHub Actions와 AWS CodeDeploy를 활용한 CI/CD 파이프라인을 구축하여 서버 배포 자동화.

  
  

Front-End. 

• 빠른 배포 주기를 극복하기 위해 React 컴포넌트 계층 구조 시각화 백오피스를 개발하여 복잡한 컴포넌트의 이해도를 높이고, 신규 기능 개발 시 협업 효율 향상.

• Custom Hook 및 P&C Pattern 도입으로 짧은 배포 주기 속에서 코드 가독성과 개발 속도 향상.

• Axios Interceptor와 React Query Error Boundary를 활용해 네트워크 에러 처리 로직 중앙집중화.

• URL 파라미터 변경 시 key props 활용으로 UI state 잔존 문제 해결, 불필요한 상태 초기화 코드를 줄여 사용자 경험 및 유지보수 효율성 개선.

Back-End. 

• 서버 배포 시 Docker 디스크 공간 부족 문제를 해결하기 위해 GitHub Actions work flow에 Docker 리소스 정리를 자동화하는 스크립트를 추가하여 배포 안정화.

• NestJS와 TypeORM을 활용하여 결제, 구독, 환불 프로세스를 트랜잭션 내에서 안정적으로 처리하는 결제 로직 설계 · 구현.

• 멘토 피드백을 적극 반영하여 관리형 멘토링 종료 프로세스를 재설계, 멘토링 종료 버튼 도입 및 채팅 기능 유지로 사용자 경험 개선.

서울대학교 학우들을 위한 교내/외 버스 위치 및 정류장 정보 실시간 제공 서비스

프로덕트 링크 | 깃허브 링크

• AbortController와 Promise.all을 활용하여 불필요한 네트워크 요청 제거 및 응답속도 200% 개선.

• ‘kakao is not defined’ 오류를 네트워크 분석 및 window 객체 검증을 통해 React 환경에 맞게 지도 렌더링, 사용자 이탈률 감소에 기여.

• Express로 프록시 서버를 구축하여 공공데이터 API에서 발생한 CORS 이슈 해결.

• 버스 정류장 간 직선 거리와 이동 비율을 산출하여, 각 구간별 버스 이동 비율을 시각화하는 정류장 라인 UI를 구현.

• 버스 경로선 UI 부정확성을 해결하기 위해 Google Directions API로 세분화된 경로 좌표를 도출. 실제 도로에 맞는 경로선을 최적화하여 버스 노선 정보 제공.

서울대학교 미술대학 학우분들을 위한 작품 전시 및 판매 서비스

프로덕트 링크 | 깃허브 링크

• 코드 · 커밋 · PR 컨벤션과 Git 브랜치 전략(Github Flow)을 도입하여, 코드 충돌 및 병합 이슈를 5% 미만으로 낮추고 협업 효율성 개선.

• Emotion의 props 기반 동적 스타일링과 Media Queries를 통해 애니메이션과 반응형 디자인을 구현함으로써 일관된 UI 인터랙션을 제공하고 UI 개발 생산성 향상.

• 고화질 미술 작품 이미지를 WebP 변환 및 preloading 기법을 도입하여 이미지 로딩 속도 300% 개선.

• picture 태그와 반응형 source 태그, place holder를 활용해 디바이스별 최적화 및 이미지 렌더링 지연 문제 해결.