미리보기

다양한 프로젝트의 프론트엔드 개발을 주도하며 화면 설계, 상태 관리, UI 구현, 성능 최적화까지 폭넓게 담당했습니다. 렌더링 최적화, 데이터 캐싱, 반응형 디자인 등 다양한 방식으로 고민하며 사용자 경험을 개선하며 개발했습니다. 또한, 단위 테스트를 적용하고, 관심사 분리를 위해 고민하는 등 코드의 유지보수성과 가독성을 높이기 위해서도 꾸준히 노력하고 있습니다.

프로젝트 설명: 웹 페이지에서 사용자가 지정한 테이블을 동적으로 크롤링한 후, 데이터를 엑셀 파일로 다운로드할 수 있는 크롬 확장 프로그램

기술 스택: TypeScript, React, Jotai, Tailwind CSS, Jest

주요 개발 내용:

• 클라이언트-서버 암호화 구현

  • 개인정보 필드를 AES로 암호화하고, AES 키를 RSA 암호화하여 개인정보 전송 보안 강화

  • Axios Interceptor에 암·복호화 로직을 적용하여 모든 요청과 응답에 자동 암·복호화 처리 적용

    (보일러플레이트 코드 최소화)

• 초기 화면 렌더링 최적화

  • RSA 키 생성 로직이 메인 스레드를 블로킹해, 초기 화면 렌더링이 지연됨

  • Web Worker를 활용해 RSA 키 생성을 비동기화하여 초기 화면 FCP를 평균 3.29s → 0.16s로 개선

• 웹 크롤링 기능 구현

  • 여러 웹사이트의 다양한 테이블 패턴을 분석하여 최대한 많은 페이지에서 크롤링이 가능하도록 구현

  • 복잡한 DOM 구조에서도 데이터를 정확히 추출할 수 있도록 DFS 기반 탐색 로직 구현

• 핵심 로직의 모듈화 및 단위 테스트 수행

  • 암·복호화 로직과 필터링 로직을 독립 모듈로 분리하여 재사용성과 테스트 가능성 향상

  • 다양한 데이터 구조에 대해 단위 테스트 작성 → 데이터 무결성과 엣지 케이스에 대한 안정성 검증

프로젝트 설명: 여러 웹사이트와 앱의 링크를 모아서 저장/관리할 수 있고, 인공지능이 저장된 링크를 분석하여 관련 상품을 추천해주는 모바일 앱

기술 스택: TypeScript, React Native, Recoil, TanStack Query

주요 개발 내용:

• 기존에 만들어진 어플리케이션의 퍼포먼스 개선, 기능 추가, 전반적인 UI를 변경하는 고도화 작업 진행

• 사용자 인터렉션 최적화

  • 좋아요 버튼 클릭 시, 좋아요 수를 업데이트 하기 위해 무한 스크롤의 모든 링크를 다시 불러오며 딜레이 발생

  • 실시간 데이터 반영보다는 빠른 피드백이 중요하다고 판단하여 Tanstack Query의 Optimistic Updates를

    적용해 좋아요가 눌린 링크의 숫자만 변경

  • 사용자 액션 반응 시간을 기존 1070ms에서 36ms로 단축

• 무한스크롤 렌더링 최적화

  • TanStack Query의 useInfiniteQuery로 데이터를 캐싱하고, 페이지 단위 데이터 병합을 통해 기존 데이터

    참조 유지

  • FlatList의 keyExtractor로 고유 키를 설정하여 변화가 있는 항목만 렌더링

  • renderItem을 useCallback으로 감싸 함수 참조를 유지하고, 리스트 아이템 컴포넌트는 React.memo로

    감싸 불필요한 리렌더링 방지

  • 기존에는 스크롤 시 리스트의 모든 아이템을 재렌더링하였으나, 추가된 아이템만 렌더링하도록 개선

프로젝트 설명: 외국인들에게 한국 현지 가이드의 여행상품을 판매하고, 여행 정보를 공유할 수 있는 커뮤니티를 제공해주는 플랫폼

기술 스택: TypeScript, React, Recoil, Styled-Components

주요 개발 내용:

• 프론트엔드 개발 전반을 주도하며 작업을 수행

  • 커뮤니티 게시판, 여행상품 판매 페이지, 관리자 페이지 등 20개 이상의 화면을 설계 및 구현

  • 클라이언트와 직접 소통하며 요구 사항을 반영하고, UI/UX 개선을 제안하여 사용자 경험 최적화

• 관심사 분리 원칙을 고려한 구조적 설계

  • MVVM 패턴을 적용하여 뷰 로직과 비즈니스 로직을 명확히 분리하고, 구조적이고 유지보수하기 쉬운

    코드베이스를 유지

• ViewModel과 Model 레이어의 단위 테스트 수행

• i18next 라이브러리를 사용하여 다국어 지원 기능 제공

  • 각 언어에 대응하는 키-언어 쌍을 가진 JSON 파일을 기반으로 콘텐츠를 동적 렌더링할 수 있는 시스템 구축

  • 언어 전환 시에도 일관된 UI/UX를 제공하여 글로벌 사용자 경험 최적화

• 개발자가 아닌 클라이언트와의 원활한 소통을 위한 시각적 자료 제작

  • UI 수정 제안 시, Figma로 수정된 화면을 디자인하여 직관적인 시각 자료를 제공함으로써 이해도를 높임

  • 복잡한 코드의 흐름을 플로우 차트로 시각화하여 기술적 배경이 없어도 쉽게 흐름을 이해할 수 있도록 도움

• 효율적인 협업을 위한 작업 우선순위 문서화 제안 및 적용

  • 클라이언트, 프론트엔드, 백엔드 간 우선순위 불일치 문제 해결을 위해 문서화 프로세스 제안

  • Google Docs를 활용하여 작업 우선순위를 공유하고, 주간 미팅에서 이를 기반으로 진행 상황 점검

  • 개발 진행 속도를 향상시키고 마일스톤 목표를 안정적으로 달성