<WIL> 첫 협동프로젝트 : 프론트 엔드는 생각보다 작업량이 많았다.

리액트 주특기를 학습하기 시작하고 첫 협업 프로젝트를 하게 되었다. 백엔드 팀과 프론트 엔드 팀으로 나뉘어 하나의 웹 앱을 만들어 내는 일로 기획부터 함께 진행하게 되었다.

다들 직장인이기 때문에 아주 복잡한 앱은 만들 수 없어서 간단한 앱을 구상하게되었다. 복잡한 앱을 만들어내는 것보다 납기(2주)내에 완성을 시키는 것이 중요하다고 하여 스코프는 크게 잡지 않았다.

우리가 기획한 앱은 릴레이 동화 프로젝트였다. 불특정 다수의 인원이 한줄씩 이어서 작정해서 동화를 이어나가는 기능을 구상했다.

필요한 기능은 회원가입, 로그인, 첫 동화 게시글 작성 기능, 이어쓰기 기능이 기본적으로 필요했고 이어서 서버에 저장된 데이터를 받아와서 화면에 뿌려주는 기능이 필요하다.

사이드 기능으로 글과 이어쓴 문장에 좋아요를 할 수 있는 기능도 기획하였다.

팀 역할 분담

백엔드 두명, 프론트엔드 두명으로 구성되어 있었고 백엔드의 API가 구현되기 전 나는 기본적인 UI틀을 작성하고 회원가입과 로그인 기능을 작성했다. 회원가입 로직이 완료될 때 쯤 백엔드의 API가 일부 배포되었기 때문에 다른 프론트엔드 팀원께는 서버에서 데이터를 가져와 화면에 뿌려주는 것과 글을 작성할 수 있는 기능을 구현하도록 부탁하였다. 주특기 강의에서 사용했던 기능만 사용하면 충분히 작성할 수 있는 기능이라고 생각해서 빠르게 마무리 될 것으로 기대했었다. 하지만 누구나 그럴싸한 계획을 가지고 있다.

문제

나는 충분하게 팀원에게 구현해야할 기능을 설명하지 못했던 것 같다. 내가 맡은 기능을 어느정도 마무리한 뒤 중간 점검을 하였는데 조원이 모두 모여 기획을 논의 했을때와 다른 기능이 구현되어 있었다.

서버에서 로그인시 쿠키를 보내주는데 브라우저에서 차단되어 받을 수 없는 문제도 생겼다.

API를 연결해본 것은 처음이였기에 Axios도 처음 사용해봤다. 서버에 요청을 보내면 응답을 보내준다는 것은 알았지만 받은 응답을 어떻게 사용하면 좋을지도 잘 몰랐다.

서버에서 보내주는 코드에서도 일부 버그가 존재했지만 나는 프론트엔드 개발자이다보니 코드 내용을 알 수 없어 답답한 마음도 들었다.

해결을 위한 노력

조원분들과 다시 여러 이야기를 나누었다. 다행히 백엔드 팀에서는 버그의 원인을 빠르게 확인하셨고 수정해 주셨다, 쿠키를 받을 수 없는 문제는 권장되는 방법은 아니지만 다른 API 테스트를 위해 응답 바디에 토큰을 직접 담아 보내주셨다.

그리고 잘못 구현되고 있던 기능은 우리가 논의했던 방향으로 갈 수 있도록 다시 바로잡았다.

프론트엔드에서 중요하게 생각하는 지점과 백엔드가 중요하게 생각하는 지점이 다른 것은 논의를 통해 어떻게 해결할지 결정했다.

발생하는 여러 문제들을 백엔드에서 처리하는 것이 좋을지 프론트엔드에서 처리하는 것이 좋을지도 논의할 수 있었다.

이렇게 다시 기능에 대한 분담이 진행되었다.

깃 문제

프론트와 백은 저장소가 분리되어 있어 충돌이 없지만 프론트끼리는 저장소를 공유하기 때문에 브렌치 병합, 풀 리퀘스트 등의 작업에서 몇몇 문제를 겪었다. 코드 충돌은 당연하고 풀 리퀘스트를 수락한 뒤 원래 작동하던 기능이 동작하지 않는 경우가 발생하거나, 컴포넌트 분담을 미숙하게 처리해서 팀원이 작업을 끝내주기 전에는 일부 컴포넌트 작업을 시작할 수 없어 기다려야만하는 경우도 생겼다.

깃 문제는 각자의 브렌치를 만들어 커밋하는 것이 아닌 깃 저장소를 포크한 뒤 풀 리퀘스트를 작성하고 내가 검토하고 병합하는 방식으로 진행하기로 했다. 팀원의 기능 구현이 지연되고 있었기 때문에 VS Code의 라이브 쉐어를 이용해서 페어 프로그래밍을 진행했다.

완벽하다고 할 수는 없겟지만 이 방법으로 깃 충돌 문제는 최소화할 수 있었다. 기능 구현이 지연되는 것도 페어 프로그래밍을 통해 어느정도 완화할 수 있었다. 페어 프로그래밍을 통해 일부 컴포넌트를 빠르게 완성한 뒤 내가 작업해야할 컴포넌트를 작업하고 복잡하지 않은 기능을 팀원께 맞겨두고 내 작업이 완료되면 진척도를 확안한 뒤 다시 페어 프로그래밍을 진행했다.

CSS 지옥

프론트 엔드는 로직만 구현한다고 끝이 아니다. 화면에 어떻게 보여줄 것인가, UI/UX에 대한 고민도 하게 된다. 이 기능은 어떻게 화면에 보여줄까? 버튼의 색은 무슨색이 좋을까? 사용자가 어떻게 앱을 사용할까? 우리가 의도하지 않은 방식으로 사용하려고 할때 문제가 생기지 않을까? 나의 경우 기능 구현은 금새 마무리 지을 수 있었다. 그러나 CSS, 알림창, 모달, 페이지 이동 등의 문제를 해결하는것이 더 힘들었다. 특히 CSS의 경우 디버그할 수 없기 때문에 정말 어려웠다. 디자이너 분들이 너무나 존경스럽다. 그러나 아쉽게도 위의 시급한 문제들로 인해 시각적인 부분은 많이 작업하지 못했던 것이 아쉬움으로 남는다.

결론

예상하지 못했던 문제점들도 있었지만 백에서도 프론트를 배려해 주셔서 대부분의 문제점들은 백에서 처리해 주시는 방법으로 도움을 주셨다. 또한 일부 로직 구현에 어려움을 겪는 부분은 내가 부재중이거나 다른 작업이 한창일 때 도와주셔서 지연을 최대한 억제해 주셨다. 기능 구현에 힘들어하긴 하셨지만 프론트 팀원께서도 다양한 레퍼런스를 참조하며 자료를 찾고 문제를 해결하려는 노력을 게을리 하지 않으셨다.

덕분에 페어 프로그래밍 과정에서 내가 로직을 많이 고민하지 않고 조금씩 수정하는 방법으로 코드를 작성해갈 수 있었다.

이렇게 프론트와 백에서 협력하여 진행한 결과 일부 기능은 미흡하긴 했지만 핵심 기능은 모두 완성하고 무사히 서비스를 배포할 수 있었다.

마음대로 되지 않는 프로젝트 진행에 도중에 못된 생각도 잠깐 들긴 했지만 서로 일을 미루지 않고 도와주셔서 힘을 낼 수 있었다. 특히 백엔드 팀 분들께서는 작업이 좀처럼 진척되지 않던 기능의 로직을 함께 리뷰해 주신 덕에 제출 마감전에 완성할 수 있었기 때문에 무한한 감사를 드린다.