안녕하세요! 프론트엔드 발표를 맡은 김민재입니다. 먼저 저희 프론트엔드에서 사용한 기술스택에 대해 말씀드리겠습니다.
프론트에서는 React와 TypeScript를 기반으로 개발했고 UI 스타일링은 Emotion을 사용했습니다.
상태관리 라이브러리는 Zustand와 Tanstack-Query를 사용했고
일관성 있는 코드작성을 위해 Eslint와 Prettier를 사용했고 배포는 Vercel을 사용했습니다.
다음으로는 저희 팀의 협업 방식에 대해 말씀드리겠습니다.
이번 프로젝트에서는 ui/ux와 서비스에 필요한 기능들을
저희와 비슷한 서비스를 참고하여 래퍼런스를 기반으로 소통했습니다.
실사례를 근거로 하는 레퍼런스 기반의 소통으로 원활하게 프로젝트를 진행할 수 있었습니다.
백엔드와의 협업과정에서는 mock service worker를 사용해서
서버단의 구현과 병렬적으로 기능을 개발할 수 있게 하였고
env-cmd 라이브러리를 활용해서 프론트엔드 개발서버 실행 시 환경변수 파일을 선택해서
mock service worker 사용 여부를 선택할 수 있게 하여 개발자 경험을 높일 수 있었습니다.
다음으로는 GitHub 기반 인프라 관리에 대해 말씀드리겠습니다.
인프라에 관해서는 GitHub의 기능을 잘 활용하려고 노력했습니다.
GitHub Issues를 사용해서 태스크를 생성하고 Label과 Milestones을 사용해서
버그나 새로운 기능 등을 쉽게 추적할 수 있게 하였습니다.
그리고 GitHub Action과 Husky, lint-staged를 사용해서
안전하게 코드를 통합하고, 배포할 수 있는 환경을 만들고 자동화 하였습니다.
또한 GitHub Project에 칸반보드를 만들어서 활용했습니다.
이렇게 태스크의 현재 상태를 기준으로 구분해서
팀원들이 어떤 작업을 하고 있는지 작업진행 상황을 쉽게 추적할 수 있도록 하였습니다.
다음으로는 저희 팀에서 UI/UX 향상을 위해 노력한 부분에 대해 말씀드리겠습니다.
저희 팀은 프로젝트를 기획할 때부터
일반 사용자에게 실제로 서비스할 수 있는 앱을 만드는 것을 목표로 하였습니다.
이에 따라 사용자가 서비스를 사용하면서 어색함을 느끼지 않게 하기 위해
기존에 자주 사용되는 서비스들을 참고하면서 UI/UX를 구성하였습니다.
초기 로딩 시간을 단축하기 위해서 Code Splitting을 사용하였고
페이지가 로딩되기 전에 화면을 보여주기 위해서 *Skeleton UI와 Animation*을 사용해서
사용자가 체감상 대기하는 시간을 줄이기 위해 노력하였고
무한스크롤을 사용해서 페이지 로딩과 이동에 따른 시간 소모를 최소화하였습니다.
다음으로는 관심사 분리에 대해 말씀드리겠습니다.
저희 팀에서는 파일을 도메인별로 관심사에 따라 분리하고
도메인 로직과 UI 렌더링 로직을 분리하려고 노력했습니다.
도메인별 관심사 분리는 도메인의 특정 기능이나 로직을 해당 도메인의 폴더에서 처리하여 코드의 응집성을 높였고
비즈니스 로직과 사용자 인터페이스 렌더링을 분리하여 각각의 역할에 집중하도록 하였습니다.
이를 통해서 코드를 모듈화 하고 가독성을 높여서 유지보수를 용이하게 할 수 있도록 하였습니다.
다음으로는 백엔드 개발 포인트에 대해서 영주님께서 설명드리겠습니다.