12월 28일에 최종 발표를 하고, 29일에 마지막 회의를 함으로써 1차 팀프로젝트 Web IDE 구현하기가 끝이 났다. 미루고 미루다가 어제 허리를 다치고 어제 오늘 계속 누워있었더니 허리가 좀 나아져서 이제야 쓰려고 한다.

팀 프로젝트의 목표는 로그인(소셜로그인) 웹으로 사용하는 IDE, 실시간 채팅기능, 파일 생성/삭제, 모바일에서 뷰 다르게 보이기 였는데 우리 팀은 기본적인 요구사항 만족을 목표로 삼았고 목표 달성을 했다.
나는 홈페이지 기능, 실시간 채팅기능, 관리자 페이지 기능을 맡았다.

배운 것

1. API 테스트
   홈페이지 기능과 관리자 페이지 기능을 구현하면서 일단 axios로 원하는 데이터를 요구하는 방법을 다시 상기할 수 있었다. 그리고 프론트가 먼저 완성되어서 기다리는 동안 Express로 서버를 만들어서 백엔드 담당자가 미리 만들어놓은 API 문서를 참고해서 axios 요청문을 만들고 요청에 맞게 응답을 받았을 때 어떻게 데이터를 분배할 지 코드를 작성하는 연습을 할 수 있었다. 다음 프로젝트도 있는데 유용하게 사용할 방법 인 것 같다.

2. useEffect
   페이지가 마운트 됐을 때 작동되어야하는 코드와 데이터 변화에 따라 다르게 렌더링 되어야하는 컴포넌트가 있었는데 처음에는 막막했다가 useEffect를 사용하면서 해결할 수 있었다. 강의 들을 때는 그냥 따라치기만 했던 useEffect였는데 언제 어떻게 사용해야할 지 알게 되었다. 다만 eslint를 사용했을 때 useEffect에서 dependency 관련해서 useEffect 내부에 있는 모든 데이터에 대해서 dependency를 적어라라고 경고를 했는데 나는 필요한 데이터에 대해서만 dependency를 부여했다.
   그럴 때 어떻게 해줘야하는지에 대해서 연구가 조금 필요할 것 같다.

3. Router, useNavigate
   프로젝트 초기에 메인페이지를 만들면서 네비게이션바도 맡게 됐는데 그거 하면서 기본적인 라우터 구성도 같이 했다. 그거 하면서 레이아웃을 부여하는 방법을 연습했고 나중에 각 문제에 대한 에디터 페이지를 들어갈 때 구분할 id를 주소에 부여하는 방법에 대해서도 알게됐다. 그거 관련해서 useNavigate에 대해서 글을 쓰다 만것이 있는데 빨리 마무리 해야하는데 빨리 해야하는데......

4. STOMP, SockJS
   이번에 채팅을 구현하면서 백엔드 쪽에서 Spring Stomp와 SockJS를 통해서 채팅을 구현했다. 프론트 멘토님이 첫 멘토링때 1기에서 백에서 SockJS를 쓴다고 굳이굳이 프론트에서 SockJS쓰던 팀이 있었는데 소켓은 라이브러리를 서로 통일 안 해도 되기에 그냥 Socket.IO를 쓰면 된다고 했는데 STOMP가 나오길래 찾아봤더니 다들 STOMP JS와 SockJS를 사용했길래 그냥 나도 STOMP JS와 SockJS를 사용했다. 처음에는 백엔드 코드를 받아서 스프링에서 static으로 만든 페이지에서 돌아가는 것만 되길래 서버에 직접 들어가야만 되는거 아닌가 싶었는데 STOMP 자료를 찾아보면서 코드를 개선해서 겨우 내가 만든 웹페이지에서 소켓을 연결할 수 있게 됐다.
   

아쉬운 점

1. 팀원간 소통
   팀 디스코드를 만들어서 거기서 회의하고 채팅으로 소통도 하고 했고, Jira를 통해서 회의록 관리와 프로젝트 진행 현황 관리를 했다. 그래서 공식적인 회의 기록과 프론트/백 각자 회의 기록은 잘 유지가 됐는데 기능별 프론트/백 담당자끼리 이야기해서 바뀐 내용에 대한 공유가 잘 안 됐던 것 같다. 담당자들끼리 음성이나 텍스트로 채팅으로 회의를 진행하고나서 페이지 구성이나 기능, 혹은 DB 스키마가 변경되기도 했는데 회의 결과를 따로 정리를 하지 않아서 변경내용을 알려면 채팅 기록을 다 읽어보거나 물어봐야해서 세세한 변경 내용에 대한 공유가 잘 안 됐던 것 같다. 아니면 내가 잘 안 읽어봤거나. 다음 프로젝트 때는 일일 보고페이지에 세세한 변경 내용이 있으면 올려주거나 공지를 해달라고 이야기해야겠다.
   

2. 프로젝트 관리
   

프로젝트 초기에는 이슈를 잘 생성하고 세부 사항도 잘 만들고 그랬는데 2주차 스프린트부터 이슈관리는 하나도 안 했다. 다른 팀원들은 잘 했는지 모르겠는데 나는 이슈관리를 나중에는 하는 것을 까먹었다. 매일 아침 회의 때 그날 무엇을 할지 이야기를 했고, 그 이야기한 것을 기반으로 작업을하고 깃허브에 코드 올리고 했지 지라를 활용해서 하지는 않았다. 다음 프로젝트 때는 이슈관리에 신경을 조금 더 써야겠다.
그리고 지라 프로젝트 관리자와 깃허브 레포 주인이 달라서 그런지 이슈별 브랜치 연결이 안 됐는데 다음 프로젝트 때는 이부분을 언급해서 지라의 기능을 완전히 다 쓰도록 해야겠다. 그러면 이슈관리 조금 더 열심히 하겠지.

3. 기록남기기
   스프린트 2주차까지는 거의 매일 프로젝트 진행에 대해서 기록을 남겼는데 3주차 때 허리를 다치면서 쓰는게 귀찮아진 것 같다. 사실 2주차 동안도 쓰기 귀찮아서 겨우 겨우 작성했다. 사실 일기를 쓰는 성격이 아니다보니까 쓰는게 겁나 귀찮은데 그게 다 포트폴리오니까 억지로라도 남겨야지......
   쨌든 다음 프로젝트 때는 다시 매일 기록을 남겨볼 생각이다. 아마 1월 첫주는 아이디어 회의하는 주간이라서 따로 기록 남길 것 없을 듯 한데 일단 플러터 강의들으면서 동시에 지난 프젝때 정리못한 프론트 용어들 공부를 하면서 기록도 남겨봐야겠다.

결론

팀프로젝트를 하면서 핵심적인 기능을 맡아본 것은 이번이 처음이다. 예전에는 덜 중요한 하드웨어쪽을 맡거나 머신러닝 학습용 데이터 만들기 정도만 했는데 이제야 제대로된 프로젝트를 해본 것 같다.
프로젝트가 어떻게 진행되는지를 이제 좀 알 수 있게 된 것 같고 진행과정도 선명하게 남은 것 같다. 강의를 들으면서 막연하게 알고 있던 것들을 직접 사용하고 부딪혀 보면서 핵심원리까지는 이해못했지만 어떻게 사용해야하는지 감을 좀 잡았고 궁금한 점에 대해서는 공부하면서 기록을 남겨봐야겠다.

나중에 할 것

1. useEffect Dependency eslint한테 잔소리 안 듣게 어떻게 적어줘야하는지
2. 지라 이슈관리
3. 멘토님이 말씀해주신 것들 중 생소한 용어 공부하기