안녕, 서울

해가 길어졌습니다. 길고 긴 터널 같았던 겨울이 끝나가고 이제 곧 무더위가 찾아옵니다. 질투심 많은 그녀가 오기 전에 잠깐 스치듯 봄이 지나가겠죠. 계절이 변해가는 동안 저의 생활도 많은 변화가 있었습니다. 서울로 올라오게 되었습니다. 아직 한달이 안됐지만 벌써 새로운 루틴이 자리 잡아가고 있습니다. 이제 매일 가던 카페를 가지 않습니다. 대신 커피를 내리는 일로 하루를 시작합니다. 커피를 마시면서 한 시간 정도 공부를 하다가 아침 밥을 먹고 회사로 갑니다. 하루 종일 화면을 보고 UI를 만지작 거리다 집에 와서 격일로 스터디를 하거나 사이드 프로젝트를 하거나 공부를 합니다. 취업 전과 후가 그다지 바뀐것 같진 않지만 그래도 돈을 받으면서 좋아하는 일을 하는 것이 오랜만이라 기쁘기만 합니다. 물론 자취 방이 방음이 잘 안되서 비싸게 주고 산 기계식 키보드를 시간을 정해놓고 써야하는 것이 좀 아쉽습니다. 어찌됐든 퇴근을 하면서 이제 다시 운동을 시작해볼까 하면서 어느 시간에 끼워 넣을지 고민하는 것이 이제 일상이 되어갑니다.

두 괴물

저희 회사에는 두 괴물이 살고 있습니다. 하나는 레거시라는 괴물과 다른 하나는 제가 생각지 못한 엄청난 탐구욕과 실력을 가진 동료 괴물입니다. 먼저 레거시라는 괴물에 대해서 이야기 하려고 합니다.

레거시 괴물

처음 팀에서 저에게 읽어보라고 한 코드는 순한 맛, 그리고 '이렇게 상태를 관리할 수 있구나'라며 신기했던 기억이 납니다. 코드를 작성한 팀 동료에게 이것 저것 질문을 던지면서 재미난 시간을 보냈습니다. 하지만 꼭 아름답거나 신기하거나 똑똑한 코드만 있지 않습니다. 어딜 가나 (두 곳 밖에 경험을 못했지만) 레거시가 살고 있습니다.

레거시는 어디에서나 자신의 존재를 톡톡히 드러냅니다. 최근에 속도 개선이 된 API로 기존에 쓰던 API를 바꿔 끼는 업무를 하게 되었습니다. 정말 간단한 작업이라고 생각했습니다. 왜냐하면 지금까지 했던 사이드 프로젝트는 API를 수정하는 것이 그렇게 어렵지 않았기 때문입니다. 한 페이지에 많아 봐야 4-5개 정도의 API를 사용했으니까요.(CRUD) 하지만 일단 확장자 명이 .js라는 것은 복선이었습니다. 그 안에 숨어있는 괴물은 순시간에 시간을 잡아먹기 시작했습니다. 복잡하게 얽혀있는 상태는 진실의 원천에서 복사와 복사를 거듭해 이곳 저곳에 흩어져있었습니다. 하나를 수정하면 저곳이 동작하지 않는 등 상태를 추적하기 어려습니다. 물론 제가 한숨 쉬는 모습을 보면서 동료분들이 많은 도움을 주셨습니다.

괴물은 정체를 특정 지을 수 없습니다. '그래봐야 코드가 코드지!'라고 할 수 있겠지만 괴물의 창조자는 이미 다른 곳으로 떠났습니다. 괴물에 대한 정보를 얻을 방법이 많지 않습니다. 결국 마법사인 제가 괴물과 싸워가면서 기록을 남겨야합니다.

괴물은 시간을 먹고 자라왔기 때문에 그의 주식이 시간입니다. 많은 시간을 빼앗기고난 뒤에서야 최종 QA를 통과할 수 있었습니다.괴물과 싸우면서 괴물에게 남긴 상처가 나중엔 괴물의 힘이 됩니다. 해결을 하기 위해서 저의 흔적을 이곳 저곳에 저의 남겨 놓았습니다.(다음에 코드를 읽는분 죄송합니다.) 결국 그 상처는 코드를 더 읽기 힘들게 합니다.

레거시가 레거시인 이유는 서비스는 이어나가야하는데 계산, 상품 정보 등 실수가 없어야할 부분에서 실수가 생긴다면 회사에 손실이 생기기 때문에 결국 급한대로 문제가 생긴 부분만 해결해야하기 때문이 아닐까 싶습니다. 레거시는 더 늦기 전이라는 말이 통하지 않는 것 같습니다. 그냥 늦었습니다.

엄청난 탐구욕과 실력을 가진 동료 괴물

동료 한분이 끝없이 무언가를 만들고 있습니다. 분명 코드를 작성하고 있었습니다. 그런데 스크럼 시간에 자기가 아직은 할 일이 없어서 놀고 있다고 합니다. '뭐지?' 싶었습니다. 보통 놀고 있다고 하면 눈치보면서 하는 SNS 활동을 떠올리기 쉽습니다. 하지만 그분은 바닐라 자바스크립트도 이미지 가상화를 만들고 있다고 했습니다.

나중에 안 사실이지만 react-window라는 가상화 라이브러리가 이미 있었습니다. 그런데 커피를 주식으로 삼아가면서 모니터 앞에서 끝없이 키보드를 두드리다가 어느날 '됐다.'라는 짧은 한마디를 하고 구현 한 것을 짧게 보여주었습니다.

한번은 react-hook-form 동작이 이상해서 그분이 작성한 코드를 보고 질문을 드렸는데 갑자기 github에서 react-hook-form 코드를 보여주더니 대강 이렇게 동작하기 때문에 이렇게 동작하는 것이 아닐까 생각된다. 라며 github 이슈를 보여주는데 '와! 뭐지?'라는 생각이 들었습니다. 저는 지금까지 문제 생기면 '공식 문서 읽기 싫은데...'라며 번역기를 돌리고 했었습니다. 그와 너무 상반된 모습에 동료지만 탐구욕과 실력을 지닌 괴물을 마주한 느낌이었습니다.

공식문서를 꼼꼼히 보고 깃 허브에서 살면서 코드를 뜯어보고 이슈를 뒤적거려가면서 현업에서 마주하는 문제를 해결해 나가라 배웠지만 사실 그다지 그렇게 하지 않았었거든요. 덕분인지 뭔지는 몰라도 요즘 라이브러리 사용을 위해서 공식 문서를 굉장히 꼼꼼히 보게 되었습니다. 대충 얻은 지식위에 짠 코드는 언젠가 무너지겠죠.

프론트엔드 개발자의 OS 브라우저

회사에서 디버깅 툴을 정말 많이 활용하게 됩니다. 크롬에서 option + command + J를 누르면 좋은 도구가 많이 나옵니다. 저는 도구를 아래 용도로 많이 사용합니다.

그냥 매일 브라우저에서 살다보니 활용도가 점점 높아지는 느낌입니다. 장인은 도구를 탓합니다. 도구의 성능이 좋은 서비스를 만들어내는데 많은 도움을 줍니다.

덤으로 vscode에서 디버깅을 하는 방법을 알게되니 예상하는 대로 동작이 되지 않을 때 원인을 찾기 더 쉬워진 것 같습니다. 물론 그렇다고 console.log를 찍지 않는 것은 아닙니다. 그게 더 빠를 때가 있습니다. 하지만 디버깅 툴은 넓은 시야를 가지게 해주는 것 같습니다.

시간이 없긴 하다.

이제 글을 마무리하려고 합니다. 사실 사이드 프로젝트 하면서 공부한 컴파운드 컴포넌트에 대해서 아티클을 작성하려고 했습니다. 하지만 최근에 ContextAPI에 대해 팀에서 걱정 섞인 목소리를 듣게 되어 조금 더 여러 사례를 공부하고 정리해서 올리려고합니다.(그러다 또 딴거 쓸수도...) 디버깅 툴 사용 방법과 후기에 대해서도 쓰려고 했는데... 쓰려고 했는데라는 말은 핑계입니다. 저도 팀 동료처럼 좋은 의미에서 괴물이 되고 싶습니다. 사실 동료에 대해선 마법사라 표현하는게 더 좋은 표현이겠지만 이번 글에선 괴물이라는 스테레오 타입을 대조함으로써 회사에서 경험한 명암을 표현하고 싶었습니다. 왜 프랑켄슈타인이 괴물이라 생각했는데 알고보니 아니었더라하는 클리셰가 있잖아요.

그런데 정말 시간이 없긴 하네요. 회사 끝나고 사이드플젝하고 스터디하고 개인 공부하다보면 우선 순위에서 뒤로 밀리는 것들이 많네요. 그나저나 블로그도 타입스크립트로 바꿔야하는데 언제 바꾸나... 이래서 처음 만들때 잘 만들어야합니다. '나중은 결코 오지 않으니까요.'