[TIL-024] 토이 프로젝트 협업 셋팅

Today목표 : 05/05일 토이프로젝트 협업 셋팅

---

백엔드와 프론트 협업 셋팅 ✅

1. SA문서 작성 - 팀 내 규칙, 참고사항, 피드백, API명세, Sprint 및 task 할당, 타임테이블, 작업 상황 등 확인 - 노션

2. API 명세 작성 - 노션

3. 깃헙 셋팅 - organization repo 만들기 / 팀장 권한 부여하기

 

협업 시 주의할 점 ✅

1. API 명세

- API 명세는 타입(자료형)까지 구체적으로 작성한다.

- 구체적 예시도 포함한다.

 

2. response

- Status Code별 상황을 함께 작성한다. => Status Code를 잘 활용하여 굳이 message가 없어도 한 눈에 에러를 파악할 수 있도록 한다.

- 백엔드에서는 성공, 실패 시 message도 함께 전달한다.

- 백엔드에게 전달받는 message는 개발자 간의 소통을 위한 message다. 프론트에서 직접적으로 사용하여 UI로 사용자에게 보여지게 하면 유지보수에 있어 의존성이 높아지기 때문에, 직접 사용하지 않고 가공하여 사용할 수 있도록 한다.

 

3. 유저 정보가 필요한 API => 게시글 작성, 수정, 삭제, 사용자 정보 요청 등

- 유저의 정보가 필요한 API에서는 요청의 Header에 항상 Token을 보내 요청한다.

- 전달시 { Authorization : String }과 같이 네이밍과 타입을 항상 명확히 전달하도록 한다.

 

4. 개발자 도구를 이용해 디버깅하기

백엔드의 경우, 가능하다면 테스트 코드 작성을 추천한다. => unit test

1) 개발자 도구 - Network

- 네트워크 요청 시 요청 내용을 header와 payload를 확인 가능하다.

 

2) Redux 디버깅 툴 

- Redux - logger : action이 일어나기 전, 후 즉 변경 전 후 상태를 확인 가능하다.

- React Devtool

 

3) React-query

- React-query Devtools

 

 

알게된 점 ✅

첫 백엔드-프론트 협업 프로젝트다. FE팀장으로 프로젝트를 진행하게 되었다. 하루 종일 회의만 12시간을 한 기분이었다...배우는 부분들이 많을테니 잘 정리하도록 하자.

1. 협업 시 소통이 가장 중요하다. 잘 모르더라도 모르는 부분까지도 확실히 전달하여야 오해가 없을 것 같다.

 

2. 협업 하기 위해서는 내가 어떤 기능이 가능한지, 어떤 기능까지 기한 내에 소화할 수 있을지를 명확하게 알고 있어야 프로젝트 설계 및 소통에 문제가 없다.

협업을 하며 소통하면서 이 부분을 가장 크게 느꼈다. 내가 어디까지 가능한지 내 스스로를 잘 알고 있지 못하면 프로젝트가.... 다 같이 힘들어진다. 항상 어디까지 구현 가능한지 자신에 대해 잘 인지하고 있어야 할 것 같다(메타인지).

백엔드 분들이 제시하시는 많은 기능들을 프론트가 전부 소화하기는 쉽지않다. 화면 구현을 위해서는 백엔드에 비해 굉장히 많은 코드를 작성해야 하기 때문이다. 이 부분을 고려하여 정확히 내가 어디까지 기능 및 구현이 가능한지를 항상 명확하게 말씀드리자. 

이 때 주의할 점은 무조건 할 수 있다. 라고 말하기 보다는 현실적으로 명확히 어느 기능까지 가능하고, 어느 기능 부터는 불가능한지 확실히 전달하고, 추가적으로 가능할 때 기능을 추가하도록 하자.

 

3. SA문서와 API문서를 잘 작성하자.

- 이 때 백엔드와 프론트 모두 작업상황을 잘 이해하고 파악할 수 있도록 상대 팀을 고려하여 문서를 작성하도록 한다.

 

4. Organization 

일단 프로젝트를 프론트, 백엔드 코드를 모두 확인 가능하게 하기 위해 organization에서 repo를 각각 생성하여 진행하도록 만들었다. 팀장 권한은 FE리더인 나와 BE리더 분께만 전달하여 권한 하에 Pull 가능하도록 셋팅하였다. 이런 구조가 아직은 어렵지만 오늘 한 단계 더 나아가고 배운 것 같다. 천천히 배워가도록 해야 겠다.