힙스터 아웃

이번에 비사이드에서 진행하는 10일짜리 해커톤인 포텐데이에 참여했다. 지금까지 공부했던 내용을 바탕으로 팀 프로젝트를 진행해 보고자 참여했는데 결과는 폭망이다. 이에 느낀 점이 많아서 회고해 보고자 글을 남긴다.

시작하기 전

시작하기 전에 나는 여러 가지 시도를 해보고자 했다. 모노레포도 공부했었고, 스토리북, jest를 통한 단위 테스트 등 지금까지 공부한 것들을 팀 프로젝트를 개발하면서 녹여보고자 했다. (프론트엔드 파트가 나밖에 없었기 때문에 여러 가지 시도해 보기 좋다고 생각했다… 왜 그렇게 자신만만했지?)

시작하기 전에 나온 디자인 시안을 바탕으로 공통 UI 컴포넌트를 디자인 시스템으로 만들고, 스토리북으로 컴포넌트 테스트를 하고 커스텀 훅을 jest로 테스트하고자 했다. 자고로 꿈은 크게 꾸자는 게 나의 모토지만 능력에 비해 너무 컸다

하지만 바뀌는 기획과 디자인 시안에 치여 점점 내 코드는 재사용이 불가능한 코드가 되었고, 이는 개발 지연을 초래했다.

마감 1일 전

마감 하루 전에 백엔드 API가 나왔고 디자인은 오늘까지 변경되어갔다.. 일단 변경된 디자인까지는 충분히 시간을 맞춰 개발을 했지만, API와 연결을 하면서 코드 곳곳에서 버그가 터져 나오기 시작했다. 버그의 원인은 충분히 파악 가능했지만 도저히 마감 내에 고치지 못할 양이었다.

가장 크리티컬한 버그는 채널을 불러오거나 파티 (게시글과 유사하다) 를 불러오는 커스텀 훅에서 토큰에 저장된 유저가 속한 채널을 필수로 입력받게 되어있는데 여기서 오류 처리를 제대로 해주지 않다 보니 오류가 발생할때마다 배포된 페이지에서 UI가 깨져버렸다.

로그인이 되지 않은 사용자는 next의 middleware에서 로그인 페이지로 redirect 되도록 해주었지만 next가 빌드 시 ssg 페이지를 만들면서 저장된 유저가 없기 때문에 undefined를 반환하면서 undefined를 참조하고자 하는 코드에서 빌드가 터지고, 내 맨탈도 터져버렸다.

결국 우리 팀은 결과물로 기워 붙인 나의 프론트와 피그마 시안을 제출하게 되었다. 디자인 시안이 확정되지 못한 것, api가 꽤 늦게 나온 것을 핑계로 댈 수 있겠지만 전적으로 나의 잘못이라고 판단했다. 결국 나는 팀원에게 정확한 개발 가능한 범위를 공유하지 못했고 두루뭉술하게 이야기한 뒤 받아온 내 tesk를 처리하지 못했기 때문이다.

얻은 것들

그럼에도 나는 꽤 많은 것을 얻었다. 사소하게는 애니메이션과 css부터 크게는 협업에서 중요한 것이 무엇인지를 배우게 되었다.

이번에 모바일에 친화적인 페이지를 만들면서 고려해야 할게 많다는 것을 알았다. 사파리에 데드 존을 고려해서 하단 네비게이션을 고정하거나 framer motion을 이용해서 캐러셀이나 드롭 다운 목록을 드래그하는 기능을 만들면서 UX를 고려하면서 개발해 보았다.

slash 라이브러리의 useFunnal을 유사하게 구현해 보고 퍼널을 선언적으로 관리해 보거나 useOverlay를 이용해 dropdown을 관리하면서 다시금 선언적인 코드가 코드 품질과 개발 속도에 얼마나 많은 기여를 하는지 느꼈다.

가장 중요한 것은 역시 협업에서는 커뮤니케이션이 가장 중요한 요소라는 것을 느꼈다. 처음에는 매일 나의 작업 결과를 팀에게 공유하거나 계획을 구성하는 것으로 충분하다고 생각했지만, 팀에게 내가 필요한 것을 요구하거나 내 능력과 구현해야 하는 기능의 범주를 고려해 마감기한을 맞춰서 팀에게 알리는 것이 중요하다는 것을 배웠다.

결국 프론트엔드는 최종 결과물을 위해서 백엔드의 api와 디자이너가 정성 들여 만든 디자인을 연결해야 하기 때문에 이 과정에서 어떤 이슈가 터질지 모른다. 따라서 자신의 능력과 연결에 필요한 난이도를 충분히 계산해서 개발 시간을 확보하는 것이 중요하다.

이후에

선언적인 코드, 재사용하기 좋은 컴포넌트와 디자인 시스템도 물론 개발에서 중요한 영역이지만, 개발자에게 가장 중요한 것은 문제없는 프로덕트를 개발하고 배포하는 것이다. 이 점에서 나는 개발자로서 역할을 다하지 못했다. 개발자로서 중요한 것에 기대 정작 개발자가 필요한 이유를 까먹지 말자.

이번에 개발을 하면서 내가 react-query를 통한 에러 처리와 데이터 관리에 매우 부족하다는 것을 느꼈고, 프로젝트를 리팩터링 하면서 컴포넌트의 오류 처리 서버 상태관리에 대해 좀 더 깊게 공부해야 한다고 생각했다.

내가 이 회고의 제목을 힙스터 아웃이라고 적은 이유는 내가 너무 겉멋에 속아 중요한 것을 놓치고 있다고 생각하기 때문이다. 개발자에게 있어서 기능 구현이 가장 우선이라는 것을 잊지 말아야 한다. 그 이후에 따라오는 것이 코드 관리를 위한, 테스트와 기술들이다.