미리보기

GitHub 링크 : https://github.com/Programmers-Coach-Coach/Coach-Coach-client

기술 스택 : React, TypeScript, styled-components, Zustand, Tanstack Query, EsLint, Prettier, MSW

역할 : Frontend

[MSW 활용해 개발 생산성 향상]

• 백엔드 API 작업 지연으로 인한 UI 개발 병목을 해결하기 위해 MSW 환경을 구축

• Faker.js로 응답값에 필요한 각종 데이터 함수화, 팀 내 재사용 가능하도록 모듈화

• 연동 과정에서 백엔드 API 스펙에 누락된 에러 케이스를 정리하고, 보완한 스펙을 백엔드에 전달하여 개선에 기여

[이미지 CDN과 압축을 통한 이미지 최적화]

• 코치 목록을 무한 스크롤 방식으로 보여줄 때, 이미지 로딩 지연으로 인해 비어있는 썸네일이 표시되는 문제가 발생

• 이를 개선하기 위해, Imgix CDN으로 브라우저 해상도에 따라 최대 2배 사이즈로 자동 최적화 및 WebP 포맷 적용

• 사진 업로드 시 browser-image-compression 라이브러리로 클라이언트 측 이미지 사전 압축 진행

• 그 결과 이미지 평균 다운로드 크기 96% 감소(173KiB -> .KiB) 및 FCP 1.2초 단축

[디자인 토큰 추상화를 통한 유지보수성 향상]

• MVP 구현 완료 이후 2차 개발에서 디자이너가 합류하면서, 전체 UI 디자인이 크게 변경되었고, 기존 색상 체계와 맞지 않는 상황이 발생

• 기존에는 styled-components의 테마 파일에서 purple-100처럼 구체적인 색상명 기반의 토큰을 사용하고 있어, 컬러 팔레트 변경 시 대부분의 컴포넌트에서 직접 수정이 필요했음

• 이를 해결하기 위해, MUI의 디자인 토큰 구조를 참고해 색상 토큰을 primary, secondary, error 등 추상화된 네이밍으로 리팩토링

• 그 결과, 컬러가 변경되더라도 토큰 키는 그대로 유지되고 값만 수정하면 되어 CSS 코드의 유지보수성 향상

[지도, 달력, 차트 시각화]

• 코치의 fitness 탐색을 돕기 위해 카카오 지도를 도입하고, 모바일 환경에서도 곧바로 길찾기를 이용할 수 있도록 카카오맵 길찾기 링크와 연동

• 운동을 완료한 날짜를 도장 스탬프로 표시하기 위해 MUI의 Date Calendar 컴포넌트를 활용해 달력을 구현하고, 날짜 클릭 시 상세 페이지로 이동할 수 있도록 구현

• 몸무게, 체지방량 등 4개의 신체 데이터 추이를 확인할 수 있도록, react-charjs-2의 선형 차트를 사용하고, 각 영역 당 최대 100개의 데이터를 시각적으로 한눈에 볼 수 있도록 함

Github 링크 : https://github.com/Pogakco/FE

기술 스택 : React, TypeScript, styled-components, Zustand, Tanstack Query, Socket.IO, Storybook

역할 : Frontend & Design

[타이머 동기화에 발생한 서버 부하 문제 해결 (Socket.IO)]

• 초기 타이머 동기화 방식에서는 매초마다 시각을 서버에서 프론트엔드로 전달했는데, 이 방식은 사용자 수가 많아질수록 요청이 폭증하면서 서버 부하 문제를 일으킴

• 매초 보내던 방식에서 타이머가 시작할 때 그 시각을 요청받고, 이를 바탕으로 프론트엔드에서 자체적으로 타이머 시간을 계산하여 보여주도록 해서, 타이머 동기화를 안정화시킴

[전역 에러 처리 (React Error Bounadary)]

• 예상치 못한 에러로 인해 서비스가 중단되는 상황을 방지하기 위해, 전역 에러 처리 로직을 도입

• 특히 Axios 에서 발생할 수 있는 네트워크 오류, 타임아웃 등 다양한 예외 상황을 정리해 별도의 헬퍼 함수로 구현하고, 각 페이지에서 가져다 사용할 수 있도록 구성해 에러 핸들링의 일관성과 재사용성을 확보

• 에러 종류에 따라 사용자에게 전달되는 메시지와 CTA 버튼 동작을 다르게 설정함으로써, UX 품질 향상 시킴

[디자인 시스템 도입]

• 디자이너 없이 직접 UI 디자인 진행 (관련 링크)

• 디자인 토큰 및 컴포넌트 variant를 styled-components의 ThemeProvider를 활용해 관리

• 스토리북을 활용하여 개발 생산성 향상 (관련 링크)

[소셜 로그인]

• 일반 회원가입 방식외에도 카카오와 구글 Oauth를 연동한 소셜 로그인을 도입해 사용자 접근성 향상시킴

• 마지막 로그인 수단을 로컬 스토리지에 저장함으로써, 이후 재로그인 시 선택 과정을 줄여 UX 향상 시킴

Github 링크 : https://github.com/hazzuu123/library-project

기간 : 2024.04 ~ 2024.06

기술 스택 : Node.js, Express.js, MariaDB, JWT

역할 : Backend

[ERD 설계 및 CRUD 기능 구현]

• JWT 기반 로그인/회원가입, 프로필 조회 및 수정 등 사용자 인증/관리 기능 구현

• 도서 목록/상세 조회, 검색·필터링·페이지네이션 적용으로 사용자 UX 강화

• 도서 좋아요 기능 구현 및 N:M 관계 해결을 통한 유저-도서 간 매핑 테이블 설계

• 장바구니, 주문 생성/내역 조회 등 주문 시스템 구축

[문서화 및 기록]

• 📄 Postman API 명세서 관리

• 📝 Notion에 트러블슈팅 및 학습 기록

성과

• 총 15개의 API 구현 및 ERD 스키마 설계

• 백엔드 구조에 대한 이해를 통해, 이후 팀 프로젝트 협업에서도 직접 API 명세를 작성하고 프론트-백엔드 연동을 주도할 수 있는 역량을 키움

• 6개월간 React, Node.js, AWS 등 웹 전반에 대한 풀스택 실무 교육 수료

연합 데모데이에서 웹 팀 프로젝트 개발