📕 [ TIL ] : 12일차_2022.05.03.(화) - 4번째 프로젝트 시작

20220503 (TUE)_TODAY TIL

TODAY PROJECT

• 오늘은 두번째 팀 프로젝트를 시작한 날이다.
  구체적인 스케줄로는 오전에는 프로젝트 발제 후 깃 특강을 들었다.
  그리고 오후부터는 본격적으로 팀 프로젝트를 진행하기 시작했다.

✏️ REMIND : 팀 프로젝트 시 앞으로 우리가 해결해야 할 문제

• 팀 프로젝트를 본격적으로 시작하기에 앞서 우리 팀이 해결해야 할 문제를 적어보았다.

1. 깃 커밋메세지 / 커밋단위 룰 미리 정하기
2. 코드 변수 룰 작업 전 미리 지정하기
3. 다른사람이 코드 구조 설계한거 이해하기
4. Static/Template 속 파일명 일관되게 정하기
5. 팀이 활동하는 시간(오전9:00-오후9:00)에는 내 현재 개발 상황 자세하게 전달하기
   (진척도 타임테이블 % 알려주기)
6. 프로젝트 분업에 관한 소통

• 주어진 주제 어디까지 이해했는가? (발제후에 이해한부분 서로 얘기해보기)
• 걱정되는사항이나 다른얘기
• 구체적인 역할 정하기 (keep, --기능분담은 그때그때다름)

7. 도움될만한 정보(링크) 공유하기 (슬랙)

• 킹콩자료(링크, 자료만올리는 공간으로, 비고는 스레드에)

8. 발생한 에러중 해결하기 어려웠던 것 최소 한가지정도는 회의시간에 가져가서
   해결한 방법 발표하기 (참고 했던 문서 링크를 포함해도 좋음)

• 노션 이용해서 데이터베이스(표)로 정리하기"

9. 회의는 정리해서 슬랙채널에 기록남기기
10. 디버깅 슬랙채널을 개설하거나 빠른 디버깅을 위한 다른 방안 채택하기
11. 코드에 주석달기 - 간단한거만

✏️ REMIND : 우리팀은 무엇을 하였는가?

🌳 소통을 어떻게 할 것인지 정했다.

🌱슬랙채널 분리

자료방이 킹콩파워방과 혼합하여 사용했었는데 (잡담+자료방 처럼)
링크나 자료를 찾기 어려워져서 앞으로 자료방엔 자료만 중점적으로 올리기로 하였다.

• 킹콩자료 : 여러 자료 공유방 (전 프로젝트부터 꾸준히 사용중)
• 킹콩파워 : 잡담방 (전 프로젝트부터 꾸준히 사용중)
• 킹콩플로우 : 깃허브 사용시 활용할 채널 (아직 미정)
• 킹콩회의노트 : 회의 후 회의록 올리는 공간
  

🌱노션에 팀 데이터베이스 만들어 오류메세지 공유

프로젝트 진행 중 오류 발생시 팀원 모두가 오류를 실시간으로 빠르게 디버깅할 수 있도록 노션을 이용해 표를 제작해 보았다. 그리고 디버깅 뿐 아니라 똑같은 오류가 다시 발생하지 않도록 데이터베이스를 만드는 형식으로 이를 제작하였다.

오류 내용과 디버깅 해야할 부분을 다른 설명 없이 페이지 전달만으로도 알 수 있도록 튜터님의 말씀을 참고하여 서식을 만들어두었다.

🌱모든 일정이 끝난 후 (오후9:00 전 마지막 회의 시간에) 내일 해야할 목표를 정하기로 했다.

이를 킹콩팀 데이터베이스에 추후에도 확인하기 쉽게
노션 데이터베이스 기능을 이용해 매일의 기록을 찾아볼 수 있도록 표를 제작해보았다.

아래는 내일 개인이 진행해야할 목표를 회의하여 세워본 것이다.

🌱그 외 소통면에서 분업화한 사항

태인님이 트렐로를 개설하셨고 총괄을 맡았다.
명주님이 깃허브 리포지토리를 개설해주셨다. 앞으로의 회의록을 작성하기로 했다.
나는 노션 데이터베이스를 개설하고 총괄을 맡았다.
철현님은 아직 정해진 역할이 없어서 추후 정해볼 예정이다.

🌱트렐로 이용하여 현재 상태 공유

태인님께서 추천해주신 트렐로를 이용하여 현재 전체적인 프로젝트 진척도나 개인 진척도를 모든 팀원이 실시간으로 확인할 수 있도록 그때그때 자신이 무엇을 진행중인지 표시하기로 하였다. (커버 색과 글쓰기 기능 이용)
이는 팀원의 진척도를 한눈에 알 수 있을 뿐 아니라 팀원이 에러가 발생했을때 바로 알 수 있고, 노션의 에러 메세지 부분에서 팀원들이 빠르게 해결해줄수 있다.

🌳 프로젝트를 어떻게 만들지 기본 구조를 설계했다.

🌱API 설계 표를 작성하였다.

아래는 철현님과 태인님께서 같이 만들어주신 API 설계 표이다.
앞으로 어떤 변수를 어떻게 써서 인스타그램의 백엔드 부분을 구현해나아갈지 정했다. 이 표 또한 킹콩팀 데이터베이스에 추가하여 한 페이지에서 여러가지 표를 볼 수 있게 구성하였다.

🌱인스타그램 클론 레이아웃을 만들었다.

개인프로젝트에서 작업했던 프론트앤드 결과물의 레이아웃을 더 자세히 정확하게 Figma 툴을 이용하여 그려보았다.

아래는 명주님께서 캡션으로 어떤 기능이 어디부분에 구현되어야 하는지 표시해 둔 사진이다.

전체 페이지를 축소해 보면 이렇게 캡션 표시가 되어있다.

✏️ 처음에 갈피를 잡지 못했던 점

발제 후 초반에 어떻게 레이아웃을 잡아야할지, 역할분담은 어떻게 해야 할지 감을 잡지 못하고 있었다.

이에 대해 다른팀은 어떻게 하고 있는지 다른팀과도 소통해보고 최종적으로 우리 팀 내에서는 어떻게 할지 정해보았다. 우리팀의 해결방법은 우선 간단하게 프론트앤드, 백엔드 부분으로 2명씩 역할을 나누자는 의견을 채택했었다. 그리고 팀 내 프론트앤드 담당으로는 나와 명주님, 백엔드 담당으로는 철현님과 태인님으로 구성되었었다.

그래서 나는 프론트앤드 팀에 속해있었기 때문에 백엔드 팀이 API 구조를 짜는 동안 지금까지 작업했던 개인 페이지를 바탕으로 피그마를 이용해 세부 레이아웃을 다 그려보았고 리드미까지 작성해보았다. 명주님은 피그마로 세부 레이아웃이 제작될 동안 API설계를 돕다가 세부 레이아웃이 제작된 뒤에는 그 위에 캡션을 올려 기능을 표시해두었다. 백엔드를 맡으신 철현님과 태인님은 API 설계를 담당하셨다.

레이아웃 작업과정1) 초반에는 팀원 모두가 함께 작업을 했었는데 이때까지만 해도 레이아웃을 어떻게 그려야할지 몰라 헤맸던 모습이다.

레이아웃 작업과정2) 역할 분담이후 피그마를 이용하여 레이아웃을 그려보았다.
이는 피그마를 이용하여 레이아웃을 그려보았던 과정이다. 실제 인스타그램 페이지와 개인프로젝트에서 만든 클론 페이지를 참조하였다.

레이아웃 작업과정3) 샘플 이미지를 지우고 필요한 부분만 따로 모아놓았다.

레이아웃 작업과정4) 명주님께서 캡션으로 어떤 기능이 어디부분에 구현되어야 하는지 표시해 두었다.

🌱깃허브 리드미 작성

피그마로 레이아웃을 그린 이후 시간이 되어서 깃허브 리드미까지 작성해보았다.

✏️ 느낀점

우선 첫 번째 팀 프로젝트에서는 역할분담을 잘 하지 못해서 누가 무엇을 담당하는지 명확하게 정해지지 않아 힘든 부분이 많았었다.

이번 프로젝트에서는 그 부분을 인지해 팀원이 서로 피드백해가면서 전보다 수월하게 해결해나갈 수 있었다.

프로젝트 발제 이후 초반에 빠른 진행을 위해 프론트앤드-백엔드 팀으로 나누어서 '피그마로 레이아웃그리기, 캡션 넣기/API설계' 를 따로 2명씩 진행했었다.

그렇지만 이를 진행하고 가장 크게 느낀점은 현재로서 프론트앤드는 개인프로젝트에서 이미 만들어놓은 것이 있기 때문에 코드를 리팩토링하여 하나의 메인 브랜치로 병합하는 부분만 거치면 금방 해결할 수 있는 부분이라고 생각되었다는 것이다.

따라서 이번 프로젝트의 주는 백엔드 기능을 구현해보는 것이기 때문에 프론트앤드를 구현하기로 한 사람도 마찬가지로 프론트앤드만을 구현할 뿐만 아니라 프론트앤드를 빠르게 리팩토링한 후 백엔드팀에 합류하여 백엔드 기능까지 구현해보는 것으로 목표하게 되었다.