코드스테이츠 Pre-Project 회고 (1) | 첫 협업! 프로젝트 계획은 어떻게 하나요?

코드스테이츠 프리 프로젝트를 마쳤다!

백엔드와 함께한 첫 협업이었는데 나름 성공적이었다 ㅎㅎ

역시 나는 프로젝트 체질...? 이라는 생각이 들 정도로 즐거웠다.

다양한 에러를 마주할 때마다 너무 힘들고

혹시 다 못 끝낼까봐 불안하기도 했지만😣

 

오늘은 나처럼 프로젝트 초보자들을 위한 글을 써보려고 한다!

백엔드와 (혹은 프론트엔드와) 첫 협업인데 어떻게 시작해야 할까요?

우선 가장 중요한 건 계획이다

사공이 많으면 뭐다? 

팀 프로젝트는 사람이 많기 때문에 더욱 계획을 잘 짜둬야 한다.

이렇게 계획을 같이 짜도 "어...? 그게 그런 뜻이었어요?" 하는 일이 무조건 생기기 때문에

서로 소통이 중요하다

 

 

STEP1. 사용자 요구사항 정의서

: 시스템이 요구하는 사항을 나열 후 업무 단위로서 기술한 것

◾ 기능 항목 나열

사용자 요구사항 정의서라고 하면 어려워 보이는 데, 그냥 만들 프로그램의 기능을 상세하게 적어둔 것이다.

우리는 스택오버플로우 클론 코딩을 할 것이므로 스택오버플로우를 훑으면서 어떻게 동작하는지 확인하고 쭉 나열했다.

 

생각보다 기능이 정말 많았다...

재미는 없지만... 쭉 써내려간다...

기능

• 회원관리 기능
  • 조회
    • 로그인한 사용자는 자신의 정보를 확인할 수 있어야한다.
  • 수정
    • 로그인 상태를 수정할 수 있어야 한다. (로그인, 로그아웃 버튼)
  • 삭제
    • 로그인 한 사용자는 회원탈퇴를 할 수 있어야한다.
  • 등록
    • 로그인하지 않은 사용자는 회원가입을 할 수 있어야한다.
  • 비로그인 사용자가 로그인이 필요한 기능을 요청 시 로그인 화면이 출력되어야한다.
• 질문 관리 기능
  • 조회
    • 질문 목록을 조회할 수 있다.
      • 질문 목록은 정렬이 가능하다.
        • 추천수 순, 등록 순, 조회수 순
    • 질문 조회는 로그인 하지 않은 사용자도 가능
  • 수정
    • 수정은 로그인한 작성자만 가능
  • 삭제
    • 삭제는 로그인한 작성자만 가능
  • 등록
    • 질문 등록은 로그인 한 사용자만 가능
  • 로그인한 사용자는 북마크에 질문을 추가할 수 있다.
  • 질문에 대한 로그를 따로 모아 볼 수 있어야한다. : 후순위
  • 답변 채택 기능 : 질문에 대한 답글을 질문 작성자가 채택할 수 있어야 한다.
• 답글 관리 기능
  • 조회
    • 질문 조회시 답글목록도 함께 조회 되어야한다.
    • 질문 조회는 로그인 하지 않은 사용자도 가능
  • 수정
    • 수정은 로그인한 작성자만 가능
  • 삭제
    • 삭제는 로그인한 작성자만 가능
  • 등록
    • 질문 등록은 로그인한 사용자만 가능
  • 로그인한 사용자는 북마크에 답글을 추가할 수 있다.
• 댓글 관리 기능
  • 조회
    • 로그인하지 않은 사용자도 조회는 가능하다.
    • 질문 상세 조회, 답글 조회 시 질문 또는 답글에 등록된 댓글 목록도 조회 되어야한다.
  • 수정
    • 수정은 작성자만 가능
  • 삭제
    • 삭제는 작성자만 가능
  • 등록
    • 댓글 등록은 로그인 한 사용자만 가능
    • 로그인 한 사용자는 질문 또는 답글에 댓글을 등록할 수 있다.
• 추천 관리 기능
  • 로그인한 사용자는 질문 또는 답글에 추천 또는 비추천을 할 수 있어야한다.
  • 추천 또는 비추천 시 최신의 상태를 화면에 반영해야한다.
• 태그 관리 기능
  • 태그를 통해 해당 태그가 등록된 질문목록을 조회할 수 있어야한다.
  • 질문 등록 시 태그를 등록할 수 있다.
    • 태그 등록 시 사전에 등록된 태그를 선택할 수 있다.
    • 태그 등록시 사전에 등록되지 않은 태그는 태그를 신규로 등록할 수 있다.
• 검색 기능
  • 제목에 포함된 문자열을 검색을 통해 검색할 수 있어야한다.
  • 태그는 중괄호 ("[”, “]”) 를 통해 검색할 수 있다.
    • 복수의 태그를 포함하여 검색할 수 있다.
• 질문 등록 시 내공 기능 : 후순위

---

출력화면

• 메인페이지
  • 로그인
    • 스텍오버플로우 질문 목록 : 처음부터 질문 목록 (Top 질문 X)
  • 로그인 X
    • 스택 오버 플로 프로젝트 에 대한 소개 ? : 후순위

---

• 공통
  • 헤더
    • 로고, 검색창,
      • 로그인 시 : 로그인 유저 정보, 로그아웃
      • 로그아웃 시 : 로그인, 회원가입
  • 푸터
    • 로고, 팀원, 팀이름, 저작권 등등 프론트 재량
• 메인 페이지
  • GNB
    • 질문, 태그 항목
  • 컨텐츠
    • 제목 (현재상태)
    • 질문 등록 버튼
    • 질문 목록
      • 정렬 기준
      • 질문 총 갯수
      • 페이지
• 질문 상세 페이지
  • 질문 정보
    • 제목
    • 등록일자
    • 수정일자
    • 조회수
  • 질문내용
  • 질문에 대한 좋아요
    • 현재 상태
    • 추천 버튼, 비추천 버튼
  • 북마크
    • 북마크 버튼 (현재 북마크 상태 반영)
  • 질문에 등록된 태그들
  • 댓글 목록
    • 3개만 표시
      • 4개 이상일때 더보기 버튼 (남은 댓글 수 표기)
    • 댓글 상세
      • 댓글 내용
      • 사용자 이름
      • 날짜
  • 답글 목록
    • 답글 수
    • 정렬 기준 선택 버튼
      • 추천 순
      • 최신 순
    • 답글내용
    • 답글에 대한 좋아요
      • 현재 상태
      • 추천 버튼, 비추천 버튼
    • 북마크
      • 북마크 버튼 (현재 북마크 상태 반영)
    • 댓글 목록
      • 3개만 표시
        • 4개 이상일때 더보기 버튼 (남은 댓글 수 표기)
      • 댓글 상세
        • 댓글 내용
        • 사용자 이름
        • 날짜
• 태그 리스트
  • 태그 리스트
• 로그인 페이지
  • 로고
  • 이메일 입력 창
  • 비밀번호 찾기 버튼
  • 비밀번호 입력 창
  • 회원가입 버튼
  • 로그인 버튼
  • 성공 시 메인페이지
  • 실패 시 메세지
• 비밀번호 찾기 페이지
  • 이메일 입력 창
  • 회원가입시 등록한 질문 선택
  • 회원가입시 등록한 답변 입력 창
  • 비밀번호 찾기 버튼
  • 성공시 비밀번호 변경 페이지로 이동
• 비밀번호 찾기 후 변경 페이지
  • 새로운 비밀번호 입력창
  • 새로운 비밀번호 확인 창
  • 비밀번호 변경 버튼
  • 비밀번호 변경 후 : 로그인 페이지 이동
• 회원가입 페이지
  • 닉네임 입력 창
  • 이메일(로그인ID) 입력창
  • 이메일 중복확인 버튼
  • 비밀번호 입력창
  • 비밀번호 확인 입력 창
  • 비밀번호 찾기 질의 입력 창 : select
  • 비밀번호 찾기 답변 입력 창 : 문자열
  • 회원 약관 보기 버튼
  • 등록 버튼 : 로그인 페이지로 이동
  • 취소 버튼 : 메인 페이지로 이동
• 회원약관 페이지 : 스텍오버플로우 측 링크를 사용
• 회원정보 페이지
  • 회원 정보
    • 프로필 이미지
    • 닉네임
    • 소개글
  • 목록
    • 내 질문
    • 내 답변
    • 북마크
    • 내정보 수정하기
    • 비밀번호 변경
• 수정 페이지
  • 프로필 이미지
  • 닉네임 입력 창
  • 소개글 입력 창
• 비밀번호 입력 페이지
  • 비밀번호 입력 창
  • 확인 버튼
• 비밀번호 변경 페이지
  • 비밀번호 찾기 질의 입력 창 : select
  • 비밀번호 찾기 답변 입력 창 : 문자열
  • 비밀번호 입력 창
  • 비밀번호 확인 입력 창
  • 확인 버튼
• 내질문 목록 페이지
  • 전체 등록 수
  • 정렬 버튼
    • 최신순
    • 추천순
    • 조회순
  • 제목, 등록일, 조회수, 추천수, 태그
• 내답변 목록 페이지
  • 전체 등록 수
  • 정렬 버튼
    • 최신순
    • 추천순
  • 제목, 등록일, 추천수, 태그(질문태그랑 같게)
• 북마크 페이지
  • 전체 등록 수
  • 정렬 버튼
    • 최신순
    • 추천순
    • 조회순
  • 제목, 등록일, 조회수, 추천수, 태그, 작성자, 답글수
    • 메뉴
      • 북마크 삭제

---

로그인 방식은 JWT

---

• 화면정의서
• 테이블 설계
  • 회원
  • 질문
  • 답글
  • 댓글
  • 북마크

---

• 질문 수정 폼
• 댓글 수정 폼
• 회원 탈퇴 폼
• 회원가입 취소시 메인페이지 이동

◾ 양식에 맞게 요구사항 정의서 작성

구글에 검색하면 코드스테이츠 선배들 뿐만 아니라 다른 분들의 요구사항 정의서를 볼 수 있었다.

우리 팀의 상황에 맞게 양식을 수정하여 사용했다.

각자의 작업 속도를 알 수 없기 때문에 CRUD만 기본으로 하고 나머지는 중요도를 매겨주었다.

중요하지 않은 건 빼두고 나중에 하기로 했다.

또 누군가와 함께 의견을 맞추는 게 시간이 많이 걸리는 일이라는 걸 알게 됐다.

누구는 이게 중요하다 하고 누구는 별로 안 중요하다고 하고... 어려운 협업!

 

중요도 하 작업들은 결국 하지 못했다.

사실 시간이 많이 촉박한 건 아니었어서 하려고 했다면 할 수 있었다.

근데 이미 빠진 걸 하려니까 하기가 싫었다...😚

요구사항 정의서.pdf

0.11MB

---

STEP2. 화면 설계서

제출할 필요가 없어서 굳이 만들어야 하나 싶었지만, 백엔드 분들이 만들기를 원하셔서 간략하게 만들었다.

요구사항 정의서에서 인터페이스 부분만 빼와서 상세하게 나누었다고 보면 된다.

사실 자세히 들여다보진 않아서 간략하게 만드는 것을 추천한다.

그래도 만들어 둬야지 나중에 분량 정할 때 한눈에 보기 쉽다.

또 깃 이슈 만들 때나 마일스톤 만들 때도 편하다.

백엔드 분들은 테이블 설계서를 따로 만들어 데이터베이스를 미리 구상해 두셨다.

화면 설계서.pdf

0.14MB

---

STEP3. API 명세서

정말 힘들었던 API 명세서

다른 팀은 어떻게 하는지 모르겠지만 우리는 받을 내용을 백엔드와 프론트가 함께 정했다.

내 생각엔 이건 같이 정하지 않아도 될 것 같다.

백끼리 정해서 명세서 주고 프론트가 체크해서 더 필요한 부분을 말해주는 게 시간 절약에 좋을 듯!

 

우리는 다른 분들의 노션 API 명세서 형식을 참고해서 작성하였다.

다른 팀을 보니까 백엔드 분들이 엄청나게 예쁜 API 명세서를 만들어 오시기도 하시는 듯하다😍

---

STEP4. Github 사용 전략

이쯤 되면 코딩이 너무 하고 싶다...

계획 짜기 재미없어... 지겨워ㅜㅜㅜㅠㅠ

하지만 마지막 한 단계가 남았다.

commit 메세지 타입 정하기와 ISSUE, Milestone, Project 규칙 정하기!

📝 commit 타입 

• [FEAT] : 새로운 기능 추가
• [FIX] : 버그 수정
• [DOCS] : 문서 수정 및 추가
• [REFACTOR] : 코드 리펙토링
• [TEST] : 테스트 코드 추가
• [CHORE] : 빌드 task 수정, 패키지 매니저 수정 및 그 외 업무

 

커밋 메세지 앞에 사용하는 커밋 타입은 이렇게 정했고 브랜치는 main, dev로 나누기로 했다.

경우에 따라서는 프론트와 백엔드의 브랜치도 나눌 수 있다.

우리는 각자 기능에 따라 feat/기능명 으로 브랜치를 만들어서 dev에 합치기로 했다.

main에는 dev에서 정상 기능을 하면 올리기로!

하지만 main으로 잘 안 올리게 된다... 귀찮어

 

📝 branch

main <- dev <- feat/기능명

 

📝 ISSUE 템플릿

### 만들고자 하는 기능
- 

### 해당 기능을 구현하기 위해 할 일
1. [ ] 

### 예상 작업 시간
-

ISSUE 제목, Milestone 제목도 양식을 정해서 통일시켰다.

확실히 깔끔해져서 보기도 좋고...!

고통의 계획 시간이었지만 하고 나면 개운하다