미리보기

사이드 프로젝트 인원 모집 서비스

인원 : 프론트엔드 4명, 백엔드 2명 --> 최종 프론트엔드 2명, 백엔드 1명

스택 : TypeScript / React / Styled-Component / React-Query

역할 : 공고 생성/수정/상세, SSE를 통한 실시간 알림, 평가하기, 신고하기, 프로젝트 배포, UI 디자인(figma)

링크 : 깃허브, 피그마

역할 상세

• Context API를 통한 공통 컴포넌트 등을 제작하여 코드 재사용성과 유지보수성을 높여 팀의 효율성 향상.

• 캐시 무효화(invalidateQueries)를 통해 최신 데이터를 실시간으로 반영하여 협업 과정에서의 효율성 향상.

• Zod와 React-Hook-Form을 사용하여 실시간 유효성 검사와 비제어 컴포넌트를 통해 사용자의 접근성을 향상.

• 실시간 알림 기능(SSE, ToastContext)을 구현하여 사용자의 서비스 접근성을 높이고, 즉각적인 피드백을 제공.

• vite-plugin-compression으로 파일 압축을, AWS S3와 CloudFront를 활용한 압축된 파일 배포 자동화(CI/CD)를 구축하여 lighthouse 기준 로딩 속도 30% 최적화.

경험

• 피그마를 통한 서비스 기획을 경험하며 사용자 중심의 서비스 위해선 다양한 협업과 소통이 이루어져야 한다는 걸 경험.

• 팀원들과의 코드 리뷰가 코드의 재사용성과 유지보수성을 높인다는 것을 경험.

• SSE, RHF/Zod, chartJS, contextAPI의 활용 등 새로운 기술의 적합성을 고려하고, 이를 학습 및 적용함으로써 높은 유지보수성 확보.

• 파일 압축과 S3, CloudFront를 통한 서비스 CI/CD 구축을 통해 로딩 속도 개선과 AWS로 배포 되는 흐름을 공부할 수 있는 기회.