- 책 모이 로고 안녕하세요 저는 발표를 맡은 팀 북스의 버즈입니다. 온라인 독서 기반 스터디 플랫폼, 책을 모이 삼아, 함께 모이는 책 모이, 발표 시작하겠습니다.
- 목차 발표 순서는 다음과 같습니다. 간단하게 프로젝트 개요 및 팀과 프로젝트에 대해 설명을 드리고 그 후 프로젝트 결과물을 시연하도록 하겟습니다.
- 1 프로젝트 개요 우선 프로젝트 개요로 기획 배경, 기대 효과 및 유저 스토리에 대해 말씀드리겠습니다.
- 기획 배경 책모이는 책을 이용한 스터디를 지원하고자 합니다. 현재 온라인에서 스터디를 진행하는 사례가 늘고 있습니다. 특히 개발자 집단에서 책 중심으로 스터디를 하는 상황이 늘어나고 있는 추세입니다. 스터디를 원활하게 기확하고, 출범시키고, 진행하기 위해선 다음과 같은 과정들이 필요합니다. - 스터디를 진행하기 위해 책을 선정하고 - 해당 책으로 스터디를 함께할 인원을 모집하고 - 스터디를 진행하며 오간 다양한 공지 및 담론을 정리하고 - 스터디 진행 중 스터디 인원의 참여도를 관리합니다. 책모이는 이러한 스터디를 위한 기능을 통합적으로 제공하는 온라인 독서 스터디 모집 서비스를 기획하였습니다.
- 기대 효과 그러므로 책모이의 서비스는 책을 기반으로 하여 온라인으로 스터디를 하고 싶은 모든 사용자를 타겟으로 합니다. 사용자들이 스터디를 진행할 수 있도록 스터디를 모집 및 운영 기능을 제공합니다. 또한 더 인터랙티브한 경험을 위해 사용자 온도나 퀴즈와 같은 스터디 관리 기능또한 제공하고자 합니다.
- 유저 스토리 책모이의 유저 스토리는 다음과 같습니다. 다른 사람들과 함께 책을 읽고 싶은 사용자는 해당 책에 대한 스터디에 스터디 참여를 신청합니다. 왼쪽 아래로 내려가겠습니다. 스터디를 개설한 스터디장은, 신청을 승인 및 거절할 수 있습니다. 오른쪽 위로 올라가겠습니다. 스터디에선 스터디원들끼리 책을 읽고 자신의 생각을 글로 쓰고 서로 댓글을 달아 의견을 공유할 수 있습니다. 오른쪽 아래와 같이 서로 퀴즈를 내고 풀어가며 스터디를 진행하는 것을 기대합니다.
- 2 프로젝트 팀 구성 역할 이로써 책모이의 기획에 대한 설명을 마치고 간단하게 개발팀 및 개발과정에 대한 소개를 하겠습니다.
- FE 팀 소개
- BE 팀 소개 (2분 30초)
- 3 프로젝트 수행 절차 및 방법 다음으로 프로젝트 수행 정차 및 방법?
- 프로젝트 개발 일정 - 캘린더 북스팀은 3회차로 나눠서 스프린트를 진행하였습니다.
- 프로젝트 개발 일정FE - 상세 프론트는 1회차에는 환경을 구축하고 주로 사용도리 컴포넌트를 개발하고 2회차에 페이지 작업, 3회차에 마무리 및 배포하였습니다.
- 프로젝트 개발 일정BE - 상세 백은 1회차에 erd 및 인프라 구축하고, 2차에서 로직을 구현하고 3차에선 스케줄러 및 무중단 배포를 가능하도록 하였습니다.
- 협업 git 보시는 바와 같이 깃 이슈와 프로젝트의 칸반보드를 활용하여 서로의 진행 상태를 공유하고 협업하였슴니다.
- 코드리뷰 코드리뷰는 다음과 같이 체크리스트를 만들어 반드시 꼼꼼하게 리뷰하도록 유도하였습니다.
- 노션 마지막으로 회의록 및 개발하면서 필요한 기술문서는 노션을 통해 공유하였습니다. (3분 15초?)
- 다음은 프로젝트 결과에 대해 발표하겠습니다.
- 프론트는 컴포넌트 구현을 위해 다음과 같이 작업하였습니다. 각 컴포넌트의 폴더안에 컴포넌트의 이름으로 스토리와 컴포넌트 파일을 만들고, 여기에 사용될 이모션 스타일드 컴포넌트는 style파일에 넣었습니다. 최종적으로 컴포넌트 폴더마다 index를 통해 재export합니다. 이렇게 export하는 것을 상위 폴더인 components폴더단에서 다시 export하여 외부에서 활용하기 편하도록 조직하였습니다.
- 개발에 사용된 기술스택은 다음과 같습니다. mui를 활용하여 컴포넌트 개발의 중심을 잡았고 ,nextjs로 서버사이드렌더링을 도입하였고, 책검색에 naver api를 사용하였습니다. 다음으로 백엔드 기술관련해선 백의 김요님이 발표하도록 하겠습니다. (4분?)
- 백 기술스택
이어서 백엔드 기술에 대해서 설명드리겠습니다.
백엔드는 책모이를 구현하기 위해, 다음과 같은 기술 스택을 사용하여 구현하였습니다. 뒤에서 자세한 인프라 구조도와 함께 설명드리겠습니다.
- 백 인프라 구조도
백엔드의 인프라구조는 다음과 같습니다. 1
CI/CD 파이프라인 구축을 통해 성공적으로 빌드 된 파일로 만든 컨테이너 이미지를 도커허브에 업로드하였습니다. 1
CI가 성공적으로 완료된 시점에 젠킨스에게 요청을 보내 배포를 진행하였습니다.
이를 통해 배포의 성공 여부와 실행한 기록에 대한 로그를 쉽게 확인할 수 있었습니다. 신뢰성 있는 통신을 보장하기 위해 nginx를 사용하여 https를/ 적용하였습니다.
12 블루그린 배포를 이용한 무중단 배포를 구축하여 중간에 API 사용에 문제가 없도록 구성하였습니다.
- 백 협업
프론트와의 협업을 위해 초기 노션을 통해 빠르게 API 초안을 작성했습니다. 변경되는 api 문서를 자동 제공하기 위해 오픈소스를 사용하여 restdocs를 Swagger 로 자동변환하였습니다. 결과적으로 테스트 코드와, API 문서를 통합해서 최신상태로 관리할 수 있었습니다.
- 마지막으로 시연영상과 에러핸들링을 통해 저희 서비스에 대해 소개드리겠습니다.
- 시연 영상 7분 시연 영상
- 끝 - 마무리