[삼성청년SW아카데미] 아맞다!
프로젝트 개요
공유 캘린더 프로젝트입니다. 기본 캘린더 기능에 더해, 누군가가 내 캘린더에 일정을 추가할 수 있습니다.
친구 기능과 알림 기능도 있습니다. 누군가 나를 할당하거나 일정이 변경되면 알림을 받을 수 있습니다.
팀 구성 및 프로젝트 목표
프론트엔드 2명, 백엔드 3명, 인프라 1명으로 구성된 팀이었습니다.
팀장 및 프론트엔드 포지션을 맡았습니다.
지속 가능한 개발환경을 구축하고, 개발자의 협업을 체험하고 싶었습니다.
자세한 이유에 대해서는 https://dev.seungyoon-yu.com/2023/목-말라-continuous-줘 에서 읽어보실 수 있습니다.
프로젝트 기간 (~11월 30일) 동안에는 코드 리뷰를 하려고 노력했습니다.
Pn Rule(Link)를 도입해 프로젝트 전반적으로 적용했습니다.P1-P3은request change,P4와P5는Approve를 하면서 리뷰를 했습니다.
기술에 숙련되어 있지 않아서 사실상 휴먼 에러를 방지하는 정도에 그쳤지만 다른 사람의 코드를 읽고 의도에 대해 토론하는 연습을 할 수 있었습니다.
프로젝트 기여 및 러닝 포인트
1-1. 프로젝트 아키텍처 구성
프론트엔드는 아래 4개의 Next.js app으로 구성되어 있습니다.
페이지를 라우팅하고 로그인 처리(OAuth)를 하는
Shell,일정을 서비스하는
Schedule,친구 및 회원 관리를 서비스하는
User,알림 서비스를 담당하는
Notice
4개의 Next.js app은 turborepo를 통해 관리되고 병렬적으로 빌드되어, 독립된 환경에서 작동합니다.
사용자가 사이트로 접속하면
Shell을 보게 되는데요, React 컴포넌트들이Shell을 포함한 각기 다른 4개의 Next AppSchedule,User,Notice에서 날아와 조립됩니다.이렇게 날아온 컴포넌트들은 각자의 도메인 서버(Next.js 서버)로 요청을 보내고 응답을 받아옵니다. Next.js 서버는 Spring 서버와 통신해서 받은 응답을 클라이언트에 그대로 전달합니다.
1-2. 서로 다른 4개의 프론트엔드 앱에서의 회원 인증 처리
회원 기능을 만들면서 인증 상태 공유가 필요했고, 쿠키를 사용해 인증 처리를 구현했습니다.
더 자세한 해결 과정은 https://dev.seungyoon-yu.com/2023/인증은힘들다 에서 보실 수 있습니다.
2. 개발자 경험 개선을 위한 노력
동료 개발자의 사용성을 고민하면서 공통 컴포넌트와 메서드를 구현했습니다.
작성한 컴포넌트를 storybook으로 문서화하려고 노력했습니다.
컴포넌트의 경우 원래의
html마크업 사용 방식을 최대한 따르도록 했습니다.react hook과 메서드의 경우 최대한 주석이 필요하지 않도록 직관적인 api와 범용적인 변수명, 파라미터 이름을 사용하려고 노력했습니다.
인프라 담당자와 협업해 4개의 Next App이 Docker 환경에서 빌드될 때
turbo prune을 적용해 이전 빌드의 캐시를 활용할 수 있도록 했습니다.한 개 모듈의 프로덕션 코드만 변경된 경우 기존에는 무조건 모든 모듈을 빌드했지만, 이후에는 변화된 모듈만 빌드하도록 적용했습니다.
SSAFY의 배포 환경에서는 빌드 시간을 6분 30초에서 1분 30초까지 줄일 수 있었고, 현재의 AWS 환경에서는 7분 30초에서 3분 30초까지 줄일 수 있었습니다.
모노레포 구조를 최대한 활용하려고 했습니다. 네 개의 Next APP에서 공통으로 언제든 사용할 수 있도록 공통 코드들을 패키지로 분리했습니다.