Frontend Engineer

강은비

자기주도적이며 신뢰할 수 있는 동료로, 좋은 제품을 만들기 위해 적극적인 팀 소통과 고객 중심의 개발을 지향합니다.

협업 지향

커뮤니케이션

자기 주도적

고객 중심

포트폴리오

Github

Codadang은 성균관대학교 학우들을 위한 Online Judge 서비스로, 학교 수업에서 과제나 시험을 볼 때 활용하고 있습니다.<h4>활동 이력</h4><ul><li>2022.09 ~ 2023.02: FE 신입부원</li><li>2023.03 ~ 2023.06: FE 멘토</li><li>2024.09 ~ 2025.02: FE Best Contributor 선정</li><li>2024년 12월 기준 24개 Commit과 34,288 Lines 기여</li></ul><h4>2024년 주요 기여 및 성과</h4>"기능 개발을 넘어, 유지보수성 높은 코드베이스 구축과 개발 문화 정착"을 목표로 활동했습니다.<h5>기술 부채 해결 및 코드 품질 개선 주도</h5><ul><li>컨벤션 부재로 인한 코드 품질 저하 및 기술 부채 누적 문제를 최우선 해결 과제로 선정</li><li>여러 리팩토링 작업을 제안하고, 스프린트 계획에 포함하여 우선순위 조정 후 진행</li><li>리팩토링 과정에서 도출된 Bad/Best Practice 및 개선 내용을 문서화하고 팀 내 공유 장려</li><li>팀원들에게 리팩토링의 필요성을 알리기 위해 직접 개선 작업을 수행하며 선례를 마련<ul><li>단일 책임 원칙에 따라 컴포넌트를 기능별로 세분화</li><li>합성 컴포넌트 패턴을 도입해 다양한 요구 사항과 확장에 유연하게 대응할 수 있도록 설계</li><li>&nbsp;그 결과, 코드의 가독성과 유지보수성이 향상됨</li></ul></li></ul><h5>팀 컨벤션 정립 및 코드 스타일 통일</h5><ul><li>반복적으로 발생하는 문제를 수집해 팀 컨벤션 체계화</li><li>ESLint 규칙을 적용해 팀 내 코드 스타일 통일</li><li>ESLint로 다룰 수 없는 React &amp; TypeScript 컨벤션 문서화하여 팀 내 공유</li><li>코드 리뷰 체크리스트에 "컨벤션 준수 여부" 항목을 추가해 코드 품질 유지 강화</li></ul><h5>TanStack Query 도입</h5><ul><li>비동기 상태 관리를 단순화하여 유지보수성 향상</li><li>SWR 전략을 활용해 네트워크 지연이 발생하거나 불안정한 환경에서도 사용자에게 원활한 경험 제공</li><li>TanStack Query 도입 이유 및 적용 사례를 문서화하여 팀 내 공유 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://sunny-wish-861.notion.site/Client-side-data-fetching-w-Tanstack-Query-1a60942b5020813182c3d997c05d308c?pvs=73">문서 링크</a>)</li></ul><h5>번들 크기 최적화</h5><ul><li>Zod의 Tree Shaking 지원 부족 문제를 해결하기 위해 ESModule 기반의 Valibot으로 전환 (관련 페이지 JS 번들 크기 약 10KB 감소)</li><li>Tree Shaking 최적화를 통해 페이지별 JS 번들 크기 최소 20%~최대 60% 감소 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@eunnbi/About-Tree-Shaking">관련 블로그 링크)</a></li></ul>

Codedang

사이버 보안 스타트업에서 약 1년 동안 B2B SaaS(Xint)를 개발했습니다. Xint는 보안 운영을 간소화, 자동화하는 통합 보안 관리 플랫폼입니다. 공격자 관점에서 보안 환경의 가시성을 제공해 보안 위협을 효과적으로 식별하고 대응할 수 있도록 지원합니다. 팀의 초기 멤버로 합류해 기획부터 프론트엔드 개발 및 배포에 참여했습니다.<h5>사용자 중심 기능 기획 및 구현까지 주도</h5><ul><li>보안 운영 시스템에서 중요 보안 경고를 놓치는 문제를 해결하기 위해 맞춤형 알림 설정 기능 추가해 불필요한 알림으로 인한 피로도를 줄이고, 사용자에게 필요한 보안 경고만 제공</li><li>대규모 데이터 필터 UI에서 단순한 드롭다운 방식이 원하는 데이터를 찾기 어렵다는 피드백을 반영해 피드백을 반영하여 다양한 조건 검색이 가능한 Notion-style 3-depth 필터를 구현해 검색 경험 및 사용성 개선</li></ul><h5>애자일 환경에서 성공적인 알파버전 출시</h5><ul><li>1주 단위 스프린트로 개발 및 배포를 진행하며, 백엔드 및 디자이너와 긴밀한 협업 유지</li><li>백엔드 API 스펙을 사전 합의하고, 모킹 서버를 활용해 API 통합 작업을 선제적으로 완료하여 일정 준수</li><li>디자인 시스템을 구축해 UI 개발 생산성을 높이고, 스토리북을 활용해 디자이너와의 빠른 QA 피드백 루프 구축</li><li>빠듯한 일정 속에서도 코드리뷰를 철저히 수행하여 코드 품질을 유지하고, 알파 버전을 성공적으로 출시</li></ul><h5>지식 공유 및 개발 문화 활성화</h5><ul><li>"Dev Playbook"을 도입하여 다양한 문제 해결 방법 문서화하고 공유</li><li>Notion-style 필터 구현 과정에서 복잡한 데이터 필터 요구 사항을 효율적으로 처리하기 위한 설계 내용 공유</li><li>랜딩 페이지 로딩 속도를 최적화하기 위한 성능 개선 과정 및 적용 기술 공유</li><li>테스트 모킹 트러블슈팅 및 Vitest browser mode 도입 내용 공유</li></ul>