오류는 친구다. 가까워서도 멀어서도 안되는 친구. 그런데 이번주는 너무 가까웠다. 백엔드나 프론트엔드나 모두 오류의 향연이었다. 우린 타입스크립트와 빌드의 지옥에서 벗어나고자 몸부림친 한주였다.
라이브러리와 타입스크립트
모든 부분을 직접 개발하면 공부하고 좋다. 다만 기한이 정해져있다면 라이브러리는 필수인 듯하다. 더군다나 내가 직접 짠 코드보다 훨씬 더 안정적일 가능성도 높으니까. 그래서 우리도 시간 내에 구현할 수 있는 것은 최대한 구현하되 시간이 걸리는 것 위주로 라이브러리를 적극적?으로 도입하고 있다. 웹에디터는 물론, 이미지 관련 라이브러리들도 도입했다. 다만, 우리가 개발하려는 환경에선 한가지 주의할 점이 있다. 바로, 타입스크립트 지원여부다. 물론 대부분 지원한다. 다만 버전이 문제다. 해당 라이브러리가 리액트17기준 타입을 지원하는지, 18기준 라이브러리를 지원하는지에 따라 달라질 수 있다.
우리가 쓴 라이브러리 중 react-infinite-scroller라는 게 있다. 얼마 전까지 리액트17 호환이었는데, 그사이 리액트18버전 기준 타입스크립트로 버전업되었다. 이미 리액트17버전으로 70%나 진행한 상태이기에 우리 환경을 바꿀 수 없어 react-infinite-scroll-component라는 라이브러리로 교체해 진행했다. 물론, 바로 오류를 알았던 것은 아니다. 오류가 있어도 차차 잡아나가면 된다는 생각으로 작업하고 있기에 모든 세팅을 마치고 빨간줄(?)을 열심히 없애고 있었다. 그러던 중 강적을 만났다. jsx element가 아니라는 오류다. 갑자기 모든 라이브러리에서 타입스크립트를 인지하지 못하고 모두 오류를 내뱉고 있었다. 특별히 건든 게 없는데, 모든 라이브러리에서 오류가 뜬다니 얼마나 끔직한가. 구글링하니 라이브러리의 타입스크립트가 문제인 경우가 많았고, 그중 리액트버전에 따른 오류와, 잘못된 라이브러리의 타입스크립트 설치가 주로 문제였다. 우리도 이를 토대로 최근에 설치한 라이브러리를 하나씩 살피던 중 알게 되었다. 모든 라이브러리 오류 중 맨 마지막에 모두 react-infinite-scroller관련 오류를 포함하고 있었다. 팀원 중 한 명이 리액트18로 재설치하니 해당 문제가 살아짐을 확인했고, 우리는 리액트 버전에 따른 타입스크립트 지원 유무가 문제였던 것. 따라서 리액트17에 맞는 타입을 제공하는 라이브러리로 재설치해 해결했다.
AWS와 GCP
어느정도 모양이 갖춰져 배포할 시간이 다가왔다. 완성하기 전에 배포를 미리 해두고 실제 서비스 상에서도 잘 작동하는지 점검이 필요했다. 완성하고 빌드하기보다 중간쯤에 작업하면서 배포해두면 시간을 절약할 수 있다고 판단했다. 어차피 수정은 계속 나오니까. 그.러.나. 배포는 우릴 쉽게 허락하지 않았다. AWS를 배웠던 만큼 AWS로 할까 하다가, GCP도 써보면 좋을 듯해 GCP로 시작했다.
인스턴스를 만들고, 그룹을 만들고, 로드밸런서를 만들었다. 로드밸런서에 SSL인증서까지 붙였다. 그런데 로드밸런서와 인스턴스그룹이 붙질 않았다. 방화벽 문제인가 싶어 관련 DOCS를 확인하며 수십번 다시 진행해도 결과는 달라지지 않았다. 하루종일 달라붙었음에도 해결의 빈도가 보이지 않아, 수업에 배웠던 AWS로 다시 해보기로 했다.
AWS에서도 같은 작업을 반복했다. EC2를 만들고, 그룹을 만들고, 로드밸런서를 붙였다. 여긴 다행이 잘 붙었다(환호). 그리고 EC2에 도커를 설치하고 작업한 파일을 빌드시켰다. 1분, 3분, 5분.... 그리고! 오류:) 메모리가 모자르단다. 서울리전에서 무료티어는 한개가 있어 다른 선택지가 없었다. 유료를 선택하느냐 마느냐. 고민한 이유는 한가지다. 단순히 돈이 나가서가 아니라, 얼마나 나갈지 몰라서 고민이었다. 모두 취준생이었기 때문에 쉽게 결정하지 못했고, 내가 다시 GCP를 잘 만져보겠다고 했다.
결국 다시 돌아온 GCP 모두 삭제하고 다시 처음부터 작업했다. 인스턴스를 만들고, 그룹과 SSL 연결된 로드밸런서까지. 그러나 역시 같았다. 여러가지 시도하던 중, GCP를 배웠던 백엔드 동료에게 자료 하나를 받았다. GCP 배포와 관련해 본인이 정리한 자료였다. 찬찬히 살펴보니 딱 하나빼고 모든 설정이 같았다. 그 하나는 방화벽 포트였다. 다만, 이해되지 않았다. 다른 점이라곤 나는 모든 포트를 한 규칙에 다 열었고, 해당 자료는 한 규칙에 한 포트씩 열였다는 것.
포트를 열었다는 것은 동일한데, 왜 해결이 되었는지 여전히 알지 못한다. 어디에 물어봐야할까. 스택오버플로우는 영어를 못해 쉽지 않고, 조만간 한국 커뮤니티를 찾아서 그곳에 올려볼까 생각중이다. 그전에 직접 이유를 알게되면 좋겠지만,,, 아무튼 3일간 애먹었던 서버작업이 끝나고 인스턴스에 도커를 설치하고 프로젝트를 빌드했다. 타입스크립트 오류가 몇개 생겨 실패하긴 했지만, 일단 any로 타입을 임시로 적어두었다. 결과는? 대성공이다.
Frontend's
할 일
- 마이페이지(상품Q&A몰아보기), 스킨2를 위한 컬러피커, PWA, 목업데이터 올리기, CI/CD
keep
- 역할 분담 먼저하기
problem
- 머지 시 충돌 및 꼬임
try
- 리팩토링, 타입스크립트 제너럴 정의
