미리보기

전문직 수험생분들을 위한 멘토링 및 커뮤니티 플랫폼과 디지털 종합 학습 플랫폼을 제공하고 있습니다.

CTO로써 플랫폼의 전반적인 기획부터 개발, 테스트, 유지보수 모든 부분을 주도적으로 개발하였습니다.

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

기술 스택 : HTML, Emotion, JavaScript, React, React-query(TanStack-query), Zustand, Jest, React-Testing-Library, Cypress, node.js, express, AWS

• CORS 문제 해결: Node.js와 Express로 프록시 서버를 구축하여 Open API CORS 에러 해결

• WGS84 좌표계를 사용한 지도 구현: 카카오맵과 서울특별시_버스위치정보, 도착 조회 API로 버스의 실시간 위치 및 정류장 위치 렌더링하는 지도 구현

• 실시간 버스 위치 데이터 업데이트: 실시간 데이터 업데이트를 위해서 캐시 제거 및 AbortController로 fetch 최적화, Promise.all로 병렬처리해서 응답속도 단축

• Emotion을 활용한 DX 개선: JS 코드와 CSS Props를 활용하여 개발 경험을 개선

• 컴포넌트 리렌더링 문제 해결: 하위 컴포넌트가 리렌더링이 되지 않는 문제 해결을 위해 React의 Diffing과 Reconciliation 원리를 파악하여 효율적인 리렌더링을 구현하고 key 속성의 적절한 사용법을 이해하고 적용

• Ant Design Carousel 버그 해결 기여: GitHub 이슈를 통해 Carousel 컴포넌트의 버그를 보고하고, 해결 과정에 기여

• UI, UX 최적화:

  • 카카오맵이 완전히 렌더링된 후 로딩 컴포넌트를 표시하는 방식으로 로딩 UI 성능을 최적화

  • 반응형, 애니메이션을 구현하여 UI, UX 향상

• 버스 경로 최적화: Google Maps Directions API를 활용하여 버스 경로와 정류장 좌표를 최적화.

• 성능 최적화 :

  • react-query로 데이터 캐싱, 로딩 상태 관리, 자동 갱신 등 서버 상태 관리, AbortSignal로 fetch 최적화

  • 이미지 최적화

• 비동기 처리 문제 해결: forEach() 함수의 비동기 동작 특성을 이해하고, console.log()의 객체 출력 특성 이해를 통해 디버깅 능력 향상

• 컴포넌트 설계 및 리팩토링 : SOLID 원칙 적용

미술대학교 졸업생분들을 위한 졸업작품 전시 및 판매 서비스 - Link

기술 스택 : HTML, Emotion, JavaScript, React, React-query, Django, Supabase

프로젝트의 프론트엔드 리드로써 전반적인 기획과 프론트엔드 개발에 주도적으로 참여하였습니다.

• 성능 최적화 : react-query로 로딩 및 fetch 최적화, 서버 상태 관리

• 이미지 최적화 :

  • webp 사용

  • preloading 및 image place holder

  • picture 태그 적극 사용

• UI, UX 향상 : 반응형, 애니메이션 구현

• 유연한 상태관리 : 네비게이션(useNavigate, Link) 시 props를 사용하여 컴포넌트 간 유연한 상태 관리

전문직 수험생분들을 위한 디지털 종합 학습 플랫폼

CTO로써 전반적인 기획과 개발을 진행했습니다.

기술스택 : HTML, css module, TypeScript, React, React native, React-query(TanStack-query), redux, Jest, React-Testing-Library, Cypress, MSW, storybook, node.js, nestJS, AWS

• 디자인 패턴 및 아키텍처 :

  • presentational & container 디자인 패턴으로 UI와 비지니스 로직 분리

  • 라우팅 기반 폴더 구조로 컴포넌트 설계

• StoryBook : 분리된 UI 컴포넌트를 체계적이고 효율적으로 구축

• 반응형 : react-responsive 및 css 반응형 단위 활용으로 유연한 반응형 구현