코드스테이츠 프론트엔드 44기 pre-project회고

프리프로젝트 일지를 매일 작성하고 싶었지만 티스토리 400 에러 이슈 때문에 무려 2주일 만에 블로그에 접속을 했습니다. 아무래도 쿠키가 많이 쌓인 탓에 일어난 에러인 것 같아 크롬 설정에 들어가 티스토리 쿠키를 싹 삭제 해준 후 정상 접속이 되었습니다. 불과 몇 주전에도 이런 일이 있었는데 또 일어나다니 내 탓? 니탓? 모르겠네요.

 

아무튼 다사다난했던 프리프로젝트가 이번주 화요일에 끝이 났습니다. 결과부터 말하면 서버와의 연결은 실패했습니다. 자세한 이야기들을 앞으로 써내려가 보겠습니다. 

 

팀장이 되었다.

팀 프로젝트라곤 토이플젝이 전부인 제가 팀장이 되었습니다. 3초의 정적을 못참고 마이크를 킨 결과로요. 랜덤으로 배정된 프론트엔드 두 분 백엔드 세 분도 모두 팀 프로젝트 경험이 없었기에 있는 경험 없는 경험을 짜내어 프로젝트를 이끌어 보았습니다. 다행히도 팀원들 모두 적극적으로 프로젝트에 임해주어서 얼마나 감사했는지 모릅니다. 아무것도 모르는 팀장인 저의 말을 너무나 잘 들어주셔서 팀장으로서 힘든 점이 하나도 없었습니다. 오히려 팀원분들의 역량을 이끌어 내기에 제 능력이 부족했던 것 같아 아쉬운 마음은 큽니다. 특히 프론트엔드 분들께요.

 

소통은 많이 해도 지나치지 않다.

백엔드 분들과는 도대체 어떤 사항을 가지고 소통을 해야하는건지 감이 안 잡혔습니다. api가 나오기 전 json-server로 테스트를 해보고 있었기 때문에 이대로 백엔드 분들이 만들어주신 api를 연결하기만 하면 되는 줄 알았습니다. 하지만 데이터 구조는 제가 생각했던 형태와 달랐고 그것을 알기 위한 문서인 api명세서를 하루빨리 받아야 한다는 사실을 뒤늦게 깨달았습니다. 다행히 프로젝트 초반에 깨닫고 백엔드 분들과 소통을 많이 했지만 애초에 기획을 할 때부터 데이터를 어떻게 주고받을지 논의를 해보는 것이 더 좋을 것이라고 생각이 들었습니다. 

 

예를 들어서, 투표 기능을 생각했을 때 저는 당연히 게시물 데이터에 투표수 데이터가 들어있을 것이라고 생각했습니다. 하지만 백엔드 쪽에서 만든 코드는 유저가 투표를 클릭할 때마다 각 이벤트에 따른 데이터가 생성이 되는 기능까지만 있었습니다. 투표에는 좋아요, 싫어요 두 가지가 있기에 해당 게시물의 투표 데이터를 모두 불러온 뒤 filter메서드로 좋아요 수 - 싫어요 수 를 계산한 수를 화면에 랜더링 해주어야 했고 이 부분을 논의 한 뒤 백엔드 쪽에서 코드를 고치기 어렵다 판단, 클라이언트 단에서 계산한 결과를 다시 게시물에 투표 속성을 추가하는 patch 요청을 했습니다. 이로써 문제는 해결되었지만 훨씬 코드가 복잡해졌습니다. 초반에 잘 체크했더라면 이런 일이 없었겠죠?

 

제대로 알고 있는지 돌아보자.

제가 존경하는 동기분이 있는데요 그분이 항상 스스로 하시는 말씀이 왜?입니다. 왜 이런 코드를 썼고 이런 메서드는 왜, 어떻게 동작을 하는지 내가 이해한 게 맞는지 메타인지를 확실히 하며 공부를 하는 것을 늘 강조하십니다. 그런 의미에서 저는 이번 프로젝트를 통해 자바스크립트와 리액트를 과연 이해하면서 사용하고 있는가에 강한 의문이 들었습니다. 예를 들어서 이런 경우가 있었습니다. 팀원분께서 useState를 통해 비동기로 받은 데이터로 상태를 변경했는데 해당 코드 블록 안에서 상태 변경이 안 일어난다고 도움을 요청했었습니다. 한참을 뜯어서 찾아보다가 결국 useState가 비동기로 이뤄진다는 점에서 해결방안을 찾았습니다. useEffect로 변경하고 싶은 값의 상태를 의존성 배열에 두고 변경하는 함수를 작성해 주었더니 원하는 대로 동작을 했습니다. 리액트를 사용하면서 가장 자주 쓰는 훅인 useState의 기본 개념임에도 불구하고 처음에 생각해내지 못했던 점에 저에게 적잖은 충격을 받았습니다? 그렇게 귀 따갑게 공식문서를 읽어라는 소리를 많이 들었는데 처음에는 너무 추상적이라 읽기 싫었지만 지금의 저에게는 꼭 해야 할 일이 되었습니다. 이 외에도 설명을 해드리면서 제가 제대로 알고 설명한다는 느낌이 들지 않았습니다. 개떡같이 말해도 찰떡같이 알아들어주신 팀원분들께 무한한 감사를 드립니다...

 

이 외에도 깨달은 점이 있다면

삼십분 컷 하려던 회고가 한 시간이 가까워지고 있네요. 빠르게 나머지 깨달은 점을 써보겠습니다.

기록 잘하기 : 프로젝트기간동안 날짜별로 todo를 적어놨는데 나중에 보니 뿌듯했습니다. 이외에도 작은 회의도 놓치지 않고 기록해 주신 팀원분들 덕분에 이렇게 회고를 쓰는데 도움을 받고 있습니다.

상수화 하기 : 자주 쓰는 변수들을 상수화 하면 나중에 백엔드 쪽에서 데이터 이름 변경이 일어났을때도 한 번에 바꿀 수 있으니 편했을 것입니다.

깃 전략 : 백엔드와 프런트엔드 브랜치를 나누는 게 좋을 것 같습니다. 제가 백엔드 코드를 건드릴 일이 있을 줄 몰랐습니다... 그래서 클론을 다시 받는 일이 몇 번 발생했습니다... 흑흑

기능별로 업무 분담 하기 : 제가  질문 RUD를 맡고 다른 팀원분께서 질문 C를 맡으셨는데 나중에 뭔가 이상함을 깨닫고 보니 디자인도 다르고 똑같은 코드를 두 번 쓰게 되어서 가능한 연결된 부분은 같은 사람이 작업하는 게 낫다는 당연한 깨달음을 얻었습니다.

우선순위 고려하기 : 저희가 서버와의 연결에 실패한 가장 큰 이유입니다. 로그인이 되어야 거의 모든 기능을 수행할 수 있는 게시판인데 우선순위를 팀장인 제가 제대로 짚어드렸어야 했으나 그러지 못한 관계로... 프런트 작업은 다 되었지만 로그인이 안되어서 아무것도 할 수 없는 상태로 끝이 났습니다. 너무 아쉽지만 또 소중하고 큰 교훈이라 앞으로 평생 못 잊어잉..

 

이렇게 얼렁뚱땅 팀장배지만 찬 프리프로젝트 후기를 마치겠습니다. 그런데 메인도 제가 팀장이 되었습니다. 메인 후기 커밍쑨..