프로젝트 소개
TaskyTasky는 일상의 업무를 효율적으로 계획할 수 있는 플랫폼입니다. 날짜와 시간에 따라 할 일을 간편하게 정리하고 일정을 효과적으로 관리할 수 있습니다. 칼럼을 이용해 할 일을 구분하고 카테고리로 정리할 수 있으며, 마감일, 태그, 사진 등을 이용해 다양하게 할 일을 기록할 수 있습니다.
담당한 기능
공통 컴포넌트 개발, 로그인/회원가입 페이지 구현, proxy 기능 이용하여 API 연결 함수 제공, 사이드 메뉴 무한스크롤
기술 스택
StyledComponents
TypeScript
React
NextJs
ReactQuery주요 작업
React Infinite Scroller 기반 무한 스크롤 기능 구현
페이지 전환 없이 대량의 데이터를 동적으로 로드해야 하는 요구사항과 촉박한 구현 시간 문제를 해결하기 위해 라이브러리를 활용하여 무한 스크롤을 구현했습니다.
React Infinite Scroller라이브러리를 활용하여 무한 스크롤 기능을 빠르고 효율적으로 구현- 불필요한 네트워크 요청 감소로 성능을 최적화하고, 사용자가 자연스럽게 콘텐츠를 탐색할 수 있도록 UX를 개선
애자일 방법론 적용 및 효과적인 팀워크 관리
매일 데일리 스크럼을 진행하여 팀원 간 작업 상황을 공유하고 실시간 피드백을 제공했습니다.
- 프로젝트 종료 후 KPT(
Keep,Problem,Try) 회고를 실시하여 지속적인 개선을 도모 - 팀원 간 원활한 커뮤니케이션을 유지하고, 프로젝트 진행 속도를 효율적으로 관리하여 성공적인 프로젝트 완수에 기여
Zustand 도입을 통한 전역 상태 관리 및 성능 최적화
기존 Context API 방식에서 발생하던 상태 변경 시 불필요한 전체 컴포넌트 리렌더링 문제로 인한 성능 저하를 해결했습니다.
- 가볍고 효율적인 전역 상태 관리 라이브러리인
Zustand를 도입하여 전역 상태를 관리 - 불필요한 렌더링을 약 40% 감소시키고, 전역 상태 관련 코드량을 약 25% 감소시킴
- 불필요한
prop drilling을 제거하여 컴포넌트 간 데이터 흐름을 최적화하고 유지보수성을 크게 개선
React Query를 활용한 API 통신 및 성능 향상
비효율적인 API 통신 및 데이터 로딩 문제를 React Query를 통해 성능을 향상시켰습니다..
React Query를 도입하여 API 요청 캐싱, 데이터 패칭, 상태 동기화 프로세스를 효율적으로 관리- 데이터 캐싱을 활용하여 불필요한 API 요청을 감소시켰고, 백그라운드에서 자동으로 최신 정보를 동기화하여 사용자에게 항상 최신 데이터를 제공
- 스켈레톤 UI를 적용하여 데이터 로딩 중 사용자 경험을 향상
공통 컴포넌트 개발 및 인증 시스템 개선
로그인/회원가입 페이지의 중복되는 에러 메시지 관리 문제를 해결했습니다.
- 모든 에러 메시지와
Input에러 처리 규칙을 상수화하여 재사용성을 높이고, 공통 컴포넌트 (입력 필드, 버튼, 모달, 알림 등)를 설계 - 중복 코드량을 약 30% 감소시켜 유지보수성을 향상시키고, 에러 관리의 일관성을 확보
- 일관된 UI/UX를 제공하며 코드 재사용성을 극대화
- 로그인/회원가입, 마이페이지, 계정 정보 페이지 등의 UI를 구현
반응형 디자인 적용으로 최적화된 사용자 경험 제공
모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 일관되고 최적화된 사용자 경험을 제공하기 위해 반응형 디자인을 적용했습니다.
- 다양한 화면 크기에 맞춰 레이아웃과 콘텐츠가 자동으로 조정되도록 구현하여, 어떤 디바이스에서도 일관되고 최적화된 UI/UX를 제공함으로써 사용자 편의성과 접근성을 개선
트러블슈팅
무한 스크롤 기능 구현 시간 제약 문제 해결
📌 문제 배경
원래 팀원 중 한 분이 무한 스크롤을 커스텀 훅으로 구현하기로 했지만, 발표 전날까지 완료하지 못해 각자가 맡은 페이지에서 직접 무한 스크롤을 구현해야 하는 상황이 되었습니다. 그러나 무한 스크롤을 처음 시도하는 상황에서 시간도 촉박해 빠르게 적용할 방법이 필요했습니다.
🔍 원인 분석
- 직접 구현 시
Intersection Observer API또는scroll이벤트 활용 및 디바운싱, 최적화 작업 필요 - 추가적인 커스텀 훅을 만들어야 하고, 테스트 및 디버깅에 시간이 소요될 가능성이 높음
- 프로젝트 일정 문제와 구현 난이도를 고려해야 함
🛠 해결 과정
- 직접 구현 vs 라이브러리 사용 비교
- 직접 구현 시에는 로직 작성, 디바운싱, 옵저버 등록/해제, 최적화 작업 등 추가적인 개발 리소스가 필요함
- 라이브러리 사용 시
InfiniteScroll컴포넌트를 통해 간단하게 무한 스크롤 적용 가능 react-infinite-scroller는 내부적으로Intersection Observer를 사용하여 성능 최적화 제공- API 요청과 로딩 상태 관리가 내장되어 있어, 빠른 구현 및 안정적인 동작 가능
- react-infinite-scroller 적용
InfiniteScroll컴포넌트를 각 페이지에 적용하고,loadMore,hasMore,loader등의 props를 통해 데이터 로드 제어- 공통 로딩 UI 및 에러 핸들링 로직도 포함하여 사용자 경험 향상
✅ 결과
- 프로젝트 일정과 안정성을 고려하여
react-infinite-scroller라이브러리를 성공적으로 활용했습니다. - 불필요한 네트워크 요청 감소로 성능을 최적화하고, 사용자가 자연스럽게 콘텐츠를 탐색할 수 있도록 UX를 개선했습니다.
🧠 배운 점
시간 제약이 있는 상황에서는 적절한 라이브러리를 선택해 빠르게 해결하는 것이 중요하다는 점을 배웠습니다. 처음 접하는 기능도 적절한 도구를 활용하면 효율적으로 구현할 수 있으며, 불필요한 작업을 줄여 개발 속도를 높일 수 있었습니다. 팀원 간 작업 분배와 일정 관리의 중요성을 다시 한 번 실감했으며, 일정이 지연될 경우 대체할 수 있는 대안을 빠르게 마련하는 것이 필요하다는 점을 배웠습니다.