데브코스 마지막 최종 프로젝트 😀
데브코스의 마지막 최종 프로젝트는 백엔드분들과 협업하여 진행했고
개발기간은 7월 21일 ~ 8월 15일 약 3주였다.
0. 프로젝트를 시작하기 전에
프론트엔드 5명 백엔드 3명으로 처음으로 많은 인원이서 프로젝트를 진행하게되었다. 그러다보니 초반에 의견조율하는 것이 힘들었고 기획에 많은 시간이 들었다.
아이디어 회의는 각자 아이디어를 생각해오고 노션에 적어 공유하는 방식으로 진행했다. 그리고 투표를 진행하여 가장 많은 표를 받은 아이디어를 선정하였다.
우리는 책을 통한 스터디를 많이하지만 스터디원을 모집하고 그 책에 대한 퀴즈를 내거나 의견을 나눌 공간이 부족하다고 생각하여 책 스터디 플랫폼인 책모이를 만들게 되었다.
1. 기획과 코드 컨벤션
선정한 아이디어를 토대로 기획서를 작성하였다.
기획서에는 프로젝트의 개요, 기대효과, 유저스토리, 유저 시나리오를 적어 우리의 프로젝트 의도와 필요성을 보여주기 위해 노력했다.
👉 책모이 기획서
그리고 프론트끼리 기술 스택과 컨벤션을 맞췄다.
eslint는 모두가 익숙한 airbnb 룰을 기반으로 했고 prettier를 적용하여 뺄 규칙을 논의하였다. 그 외에 네이밍 규칙이나 컴포넌트 폴더 구조, git 규칙 등을 정했다.
프론트가 5명이기 때문에 새로운 기술에 도전을 많이 했으면 좋겠다고 생각했다. 그래서 우리는 그 전에 써보지않은 TypeScript, Storybook, Next.js와 같은 기술에 도전해보기로 하였다.
2. 역할 분담
처음에 코드 컨벤션을 맞출겸 페어 프로그래밍을 진행했다. 공통 컴포넌트를 만드는데 이틀간 페어를 바꾸며 진행했고 코드 컨벤션을 맞추는데 큰 도움이 되었다.
공통 컴포넌트 작업이 끝나고 페이지 별로 역할을 분배하였다.
개발해야할 페이지는 총 12페이지였다.
홈 관련
- 메인페이지
- 검색페이지
- 책 정보 페이지
스터디 관련
- 스터디 상세 페이지
- 스터디 모집 페이지
- 스터디 개설 페이지
- 스터디 수정 페이지
포스트 관련
- 포스트 상세 페이지
- 포스트 생성 페이지
- 포스트 수정 페이지
유저 정보 관련
- 유저 프로필 페이지
- 유저 프로필 수정 페이지
나는 여기서 유저 정보 페이지와 포스트 페이지를 맡아서 진행하였다.
3. 개발
내가 구현한 기능은 다음과 같다.
- 유저프로필
userProfile/:userId 페이지로 접근하여 유저 프로필을 볼 수 있다.
유저 프로필에는 유저 이미지, 이름, 이메일, 스터디 목록이 있다.
스터디 목록은 내가 개설한 스터디, 참여하고 있는 스터디, 완료한 스터디를 탭으로 분리하여 볼 수 있으며 한 유저당 최대 10개에 스터디를 가입할 수 있다.
- 유저프로필 수정
유저는 프로필 이미지와 이름을 변경할 수 있다.
프로필 이미지는 이미지 영역을 클릭하여 이미지 파일을 업로드할 수 있다.
이미지 파일을 업로드하면 내가 업데이트한 이미지로 프로필 이미지를 보여준 후 그 데이터를 서버로 보내 url을 가져온다. 그 url을 유저 프로필 수정 서버에 넘겨 프로필을 수정한다.
또한 전역으로 가지고 있는 유저 정보도 업데이트를 해줘서 다른 곳에서도 업데이트 된 유저 정보를 바로 받아올 수 있도록 해줬다.
- 포스트 생성, 읽기, 수정, 삭제, 권한
-
생성
포스트를 올릴 수 있는 게시판은 공지와 자유 두 개가 있다.
스터디장은 모든 게시판에 글을 작성할 수 있지만 스터디원은 자유게시판에만 글을 쓸 수 있다. 그래서 스터디원이면 공지게시판 작성을 비활성화했다.
-
읽기
공지와 자유 탭을 눌러 게시판 목록으로 이동할 수 있다.
이때는 쿼리를 날려서 현재 공지로 가야하는지 자유로 가야하는지를 판별하였다.
또한 본인이 쓴 글이 아닐 시 우측 상단에 수정 삭제 메뉴 아이콘을 안보이도록 처리하였다. -
수정
카테고리(공지, 자유)는 수정할 수 없어서 disable 상태로 만들었다. -
삭제
삭제를 확인하는 Modal을 띄워 삭제를 눌러야 게시물이 삭제가 된다. -
권한
스터디원들만 페이지에 접근이 가능하고 비로그인 사용자는 접근할 수 없다.
구현 결과
👉 책모이 보러가기
👉 책모이 프론트엔드 깃허브
👉 책모이 백엔드 깃허브
느낀점
초반에 백엔드가 API 작업을 할 때 페어 프로그래밍으로 컨벤션을 맞추고 에러를 공유하여 빨리 해결한 점이 좋았고 백엔드와 프론트 모두 같이 우선순위를 정하고 개발을 시작하여 합칠 때 수월했다는 점이 좋았다.
조금 아쉬운 점은 사람이 많고 잡아주는 사람이 없다보니 회의 시간이 정말 오래걸렸던 것, 후반에도 API 작업이 완성되지않아 마지막까지 주요 기능 작업을 하고 반응형이나 에디터 같은 새로운 것에 도전하지 못해 아쉬운 점이 있다.
배운점
- Live Share를 통한 페어 프로그래밍
- Next.js와 Mui 사용법
- eslint로 협업 컨벤션 설정하기
- 깃 이슈, 칸반보드 사용법
- 백엔드와의 협업(Swagger, API 명세서)
부족한 점
- 백엔드에게 요청하고자 하는 바를 말로만 전달하는 것이 아닌 문서로 잘 정리해서 전달하는 과정이 필요했다고 생각한다.
- 백엔드 3명과 프론트엔드 5명이라 기획 단계에서 프론트의 반응형, 다크모드 등 프론트의 도전 과제가 많았으면 좋았겠다고 생각한다.
