미리보기

건강관리를 위해 운동을 시작하고싶지만 헬스/관리/운동 등에 무지한 사람들 위해 나에게 맞는 홈트 영상 추천/운동 종목 추천 해주는 서비스

[사용 기술 및 도구]
React, Javascript, Styled-components, Zustand, HTML

[팀 구성]

• 프론트엔드: 3명

• 백엔드: 2명

• 디자인: 1명

[역할]
팀장, 프론트엔드 팀 리더, 배포

• 소프트웨어 개발 생명주기의 각 단계를 조율하며 프로젝트를 이끔

• 프론트엔드 개발이 익숙하지 않은 팀원들을 위해, 매일 디스코드 회의를 통해 어려운 부분을 지원

• Github Issues를 사용해 프론트엔드 팀원들과 적극적으로 소통

• 각자의 의견을 공유하고 더 나은 코드를 위해 코드 리뷰 진행

[기여]

프론트엔드 개발 50% 기여

• YouTube Data API를 활용해 유튜브 영상 데이터 연동

• 접근성 제어 기능 개발

  • Protected Route를 사용해 비로그인 사용자의 권한 없는 페이지 접근 시 로그인 페이지로 리다이렉트

• 반 도넛 그래프로 출석률 시각화

  • Recharts 라이브러리를 활용해 반 도넛 그래프를 구현. 도넛 그래프의 반을 부모 요소 바깥에 표시하고, 부모 요소에 display: none 설정을 적용해 반 도넛 모양을 구현함.

• 커스텀 훅으로 반복되는 로직 분리

  • POST, GET 요청이 반복 사용되는 로직을 커스텀 훅으로 추출하여, 코드 한 줄로 데이터를 쉽게 요청하거나 전송할 수 있도록 구현. 이를 통해 코드의 가독성과 유지 보수성을 개선.

• GitHub Actions를 활용한 CI/CD 파이프라인 구축

• AWS EC2를 이용한 프론트엔드 서버 배포

• 홈 화면, 마이 페이지, 알림 페이지 개발

Github 보러 가기

문제 해결 과정 보러 가기

회사원들의 프로젝트 관리를 지원하고, 취준생과 회사원을 위한 SNS 기능을 제공하는 All-in-One 웹 서비스

[사용 기술 및 도구]
React, Javascript, SCSS, React-Query, Zustand, HTML

[팀 구성]

• 프론트엔드: 2명

• 백엔드: 2명

• 프로젝트 매니저: 1명

[역할]
디자인, 프론트엔드 개발, 배포

• 효율적인 피드백을 위해 매일 디스코드 회의를 통해 각자의 할 일과 직면한 문제를 공유

• 서비스를 사용하면서 발견한 불편 사항과 팀원들의 의견을 반영해 빠르게 수정, 개선

[기여]

프론트엔드 개발 70% 기여

• 멘션

  • 멘션 사용자 검색 모달의 동작 분석을 통해, 언제 나타나고 사라지는지를 정확히 파악

  • useEffect, 사용자 입력 값, 모달 창을 활용해 사용자 멘션 기능 직접 구현

• 검색 기능 최적화

  • 키보드 입력 시마다 API 요청을 보내는 방식에서 디바운스(debounce) 기술을 적용해, 입력이 완료된 후에 한 번만 API 요청을 보내도록 최적화

  • 입력 값에 따라 수없이 많은 API 요청 -> 1번의 API 요청

• 무한 스크롤

  • React Query의 useinfinitequery와 intersectionobserver를 이용해 무한스크롤 구현

• 스켈레톤 UI

  • 로딩 화면에서 사용자 경험을 향상시키기 위해 스켈레톤 UI를 적용

• 실시간 알림

  • Sever Sent Events(SSE)를 이용해 실시간 알림 구현

  • SSE 사용 이유 보러 가기

• 낙관적 업데이트

  • React Query의 useMutation 옵션인 onMutate를 사용

  • 기존 1~2초 걸리던 반응 -> 즉시 반응으로 개선

• AWS EC2를 이용한 프론트엔드 서버 배포

• 네비게이션, 홈 페이지, 프로젝트 관리 페이지, 마이 페이지 등 다양한 페이지 개발

서비스 이용하기

Github 보러 가기

문제 해결 과정 보러 가기

프론트엔드 개발자로서 역량을 높이기 위해 자바스크립트 도서 독서 및 발표 스터디를 참여하여 현재 진행중입니다.

[진행 방식]
해당 스터디는 모던 자바스크립트 딥 다이브 책을 기반으로, 각자가 정해진 목표 챕터를 1주일 동안 학습하고, 자신만의 언어로 정리한 후, 주마다 발표자를 정해 온라인으로 진행됩니다. 발표자는 자신이 맡은 주제에 대해 발표하고, 모르는 부분에 대해 질문과 토론을 진행합니다. 저는 자바스크립트 함수와 호이스팅에 대해 발표를 진행했습니다.

발표 자료 보러 가기

[느낀점]
이 스터디를 통해 저는 책임감의 중요성을 깊이 깨달았습니다.
진행 초기, 10명 중 3명이 이탈했고, 발표자가 발표를 맡은 주에 무단으로 참여하지 않는 경우도 발생했습니다. 이를 통해 책임감 없는 행동이 다른 사람에게 얼마나 큰 피해를 줄 수 있는지, 믿음을 저버리는 행동이 될 수 있음을 깨달았습니다. 이러한 경험을 바탕으로, 저는 항상 맡은 일에 최선을 다하고, 매일 자기 전 다음날 해야 할 일에 대해 시간대 별로 구체적인 계획을 세워 맡은 일에 책임감 있게 행동하려 노력하고 있습니다.

스터디 Github 보러 가기