우여곡절과 숙제

4주간 이어진 부트캠프에서의 팀프로젝트가 끝났다. 우선 시간 상 프로젝트는 끝났다. 다만, 완성도 측면에서 아쉬움이 남는다. 기획했던 기능은 전부다 작동하지만, 시간 내에 모든 기능이 완성하는 것을 목표로 하다보니 코드가 난잡한 곳도, 길어진 곳도, 그리고 동작에 오류가 있는 곳도 있다. 따라서 완벽히 끝난 프로젝트라 하기 어려운 상태다.

 

 

PWA

PWA PC버전

처음 기획할 때부터 꼭 하고 싶었던 게 PWA다. 일정이 밀리는 순간에도 어떻게든 PWA를 할 시간을 확보하고자 노력했다. 해본 적 없기 때문에 시간이 얼마나 걸릴지 모르지만, PWA를 위해 하루를 빼놓았다. 결론부터 말하자면, PWA를 적용했고 아침부터 9시부터 시작해 다음날 1시까지 총 16시간이 걸렸다. 하고보니 너무 허탈했지만, 오류가 났을 땐 너무나 큰 벽처럼 느껴졌다. 매니페스트 파일을 만드는 것부터, 이미지 파일 노가다, next.config에서 pwa module을 아웃풋하는 것까지. 쉬운듯 오류가 많았다. 그중 제일 시간을 많이 쓴 오류는 head에 스크립트, 메타 등 태그를 넣는 부분이었다. 알고보면 매우 어이없을 정도다.

PWA 모바일 버전

next.js에선 HEAD 컴포넌트를 제공한다. 이 컴포넌트로 head에 넣을 태그를 집어 넣을 수 있는데, 타입스크립트는 이를 권장하지 않는다고 콘솔에 자꾸 경고 아닌 경고를 한다(빨간색이 아닌 노란색...). 그래서 _document.tsx파일에 document.createElement, document.head.appendChild를 이용해 link, meta 등 일일히 집어 넣었다. 그런데 왠걸, 이번엔 빌드 오류가 뜬다. PWA에서 쓰일 부분이기 때문에 _document.tsx에 모두 넣었을 뿐인데, 잘 되던 빌드가 안된다니... 

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

모든 페이지에서 프리렌더링에 대한 오류가 난다. URL를 따라 가니, pages 폴더에 page가 아닌 게 있는지 확인하라는 등 총 6가지 확인사항을 안내한다. 모두 확인했으나, 문제가 전혀 없었다. 여기 확인하는데 1시간 넘게 소요됐다. 그 다음 오류를 찾아봤다.

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

스택오버플로우든 여러 곳을 찾아보니 위 에러는 hook을 선언하지 않았거나, 제대로 사용하지 않았을 때 뜨는 에러란다. 너무다 당황스러웠다. 문법도 맞고, import도 문제 없었다. 사실 당황보다 황당에 가까웠다. 같은 오류를 제대로 인지하는 것은 맞는지 의심스러울 정도였다. 혼자 풀긴 어려운 듯해 팀원들에게 이 상황을 모두 공개했고, 함께 해결방법을 찾기 시작했다. 그러던 중 팀원 한 명이 "혹시..." 하면서 의견을 냈다. useEffect를 _document.tsx가 아니라 다른 곳에 써보면 어떻겠냐고. 나는 PWA에 적용할 부분이기에 그게 의미가 있을까 싶었다. 왠걸, _app.tsx로 옮기고 빌드하니 제대로 실행되는 게 아닌가... 

내가 무엇을 놓친건가 가만히 생각했다. 나는 next의 실행 방식을 완전히 잊고 있었다. next.js가 없는 곳에서 useEffect를 썼으니 당연히 오류가 날 수 밖에. 타입스크립트를 해결해야한다는 것에 몰두한 나머지 next.js의 동작 순서를 깜빡한 것. 이런 사소한 것을 빠르게 인지하지 못해 3시간을 잡아먹었다.

 

비공식 마무리

우리 콘셉트는 크리에이터의 공동구매다. 공동구매를 여는 사람이 직접 상품 소개하며 자신의 이미지를 끝까지 사용하게 하는 게 특징이고, 보통 판매 페이지가 하나인 일반 쇼핑몰에서 벗어나 스킨을 직접 설정할 수 있는 게 핵심 기능이다. 상세 페이지 스킨 3개, 판매율, 스킨2의 컬러 선택, PWA까지.

일찍 끝내고 3일간 오류만 수정하겠다던 당찬 계획은 이미 물건너 갔음을 몸소 알고 있었고, 마지막까지 오류는 우리의 발목을 잡고 놓아주지 않았다. 팀프로젝트 발표 전까지도 오류는 우리와 함께였다. 특히 발표 1시간 전 git에 머지한 게 이상했는지 서버에 배포된 버전에 오류가 더욱 많아졌다. 리스트 자체를 볼 수 없을 정도라, 긴급하게 도커게 있는 이전 이미지로 다시 돌려 두고 발표했다.

그 사이 꽤 많이 수정했는데,,, 급하게 수정하다보니 무언가 잘못 건드린 듯했다. 발표와 함께 4주간 진행한 팀프로젝트, Z9프로젝트는 공식적으로 마무리되었다.

 

사실, 끝나지 않았다. 리팩토링!

부트캠프 일정따라 공식 팀프로젝트는 끝났지만, 비공식 리팩토링 시간이 찾아왔다. 사실 수정할 게 많다. 코드 최적화 뿐만 아니라, 발표 후 뒷기수에게 받은 피드백을 따라 조금 더 다듬어야할 부분이 있다. 최소한 우리가 하고 싶었던 코드 최적화만 아니라 위 피드백까지는 수정해야 마음이 편할 듯하다. 할 수 있는 프론트엔드 팀원 모두가 할 수 있는 선에서 최대한 리팩토링하자고 약속했다. 그리고 일주일이 지난 지금 우리는 열심히 이를 수정하고 있다. 아마 다음 글이 Z9프로젝트 마지막 후기가 되지 않을까 싶다.