짧았던 리액트 주특기 주차가 지나고.. 백엔드와 첫 협업프로젝트가 시작되었다!
아직도 리액트 실력이 많이 부족하고 협업에 감이 안오지만... 이번 기회를 통해 알아가는 거니까..!
일단 우리조의 협업 방식에 대해 기록해보기로 했다
1. 기획하기
먼저 어떤 사이트를 만들 것인가? 에 대해 의논을 했다. 공통적인 의견은 지난 주차까지 배웠던 기능을 활용해서 좀 더 완성도 있는 결과물을 내는 것이었고 아이템 차별성에 대한 문제는 타겟을 좁혀 해결을 했다.
우리팀은 로그인 기능 + 게시물 작성 + 댓글 좋아요 + 좋아요 갯수로 게시물 랭킹을 메인에 뿌려주기 정도의 기능을 구현하기로 하였다.
2. node / react 별로 깃 허브 만들기
프론트, 백끼리 깃허브 프로젝트 하나씩 생성하고 기본적인 폴더와 파일 구조를 정했다.
프론트는 그전 과제에서 진행했던 것 같이 elements / page 로 폴더를 나누고 컴포넌트를 쪼갰다.
각자 프로젝트를 클론하고 브랜치까지 생성한 다음 push와 pull까지 잘 작동하는지 확인했다.
3. 와이어 프레임 만들기
백엔드 분들이 회의하는 동안 프론트 팀끼리 와이어 프레임을 그렸다.
그림판을 쓰다가 좀 더 깔끔한 화면을 위해 피그마로 슥삭했다
4. 코드 컨벤션 정하기 , API 설계
먼저 코드 작성은 카멜케이스로 통일하기로 정했고 API 설계에 꽤 많은 시간을 썼다.
요게 탄탄해야 앞으로 일주일 작업이 서로가 수월하기 때문에 꼼꼼하게 살펴보았고 사실 나는 아직 부족한 점이 많아 같은 팀원분이 거의 진행을 맡아주었는데 내가 필요한 api를 빨리 파악하고 요구 할 수 있어야 작업이 수월할 것 같았다...! 아직 데이터의 흐름과 어떤 데이터가 필요한지 바로바로 머리에 그리는 연습이 부족한 것 같아 많은 깨달음을 얻은 시간....
5. 어떻게 진행할건지 프론트 팀원들끼리 의논
점심까지만 해도 프론트3 백3명으로 이뤄진 조였는데... 프론트 팀원 중 한분이 사정상 하차하게 되었다 😢
2명이서 진행해야할 상황...! 그리하여 나는 user를 담당하고 나머지 팀원이 post부분을 담당하기로 하였다.
기능 구현 후 css를 만지는 방향으로 갈 것 같다...
6. 가짜 API 얹어보기
협업세션에서는 mock api를 사용해서 더미를 만들어 연동하란 방식을 추천해 주셨는데 백엔드 기술 매니저님이 swagger라는 것을 사용해 보면 좋다 말씀하셨다 하셔서 우리조는 swagger를 사용하기로 하였다.
하지만 첫 사용이고 요게 좀 까다롭다 보니 조금 난항... 결국 퇴근할때쯔음 사용법을 어느정도 숙지하였는데 API 설계를 할때 swagger도 같이 작성하는 것이었다...! (난 여전히 잘 모르겠숴...)
여튼 가짜 api를 만들어서 axios로 받아오는 것까지 테스트 해보려했는데 시간이 너무 늦어져서 요거는 내일 다시 힘내서 해보기로 하였다.
☕️...🧘♀️...
아직 개념이 알쏭달쏭하고.. 뭐가 뭔지 모르겠구... 어떻게 협업하는게 좋은 방식인지는 잘 모르겠다.
그리고 백과 프론트는 서로의 코드를 볼 일이 없다는 말이 정말 뭔지 알 거 같고..!
백엔드 분들의 회의내용을 들으니 나는 프론트가 정말 잘 맞는 거 같다,,ㅎㅎ
일단 게더에서 퇴근하고 나서 너무너무 피곤해져서 잠깐 기절했다.
나의 부족함 때문에... 걱정이... 태산이다 .... 가짜데이터 api 연동 정도는 오늘 공부하고 잠들도록 하겠다.....
