3월 넷째 주 일기
작은 행복을 느끼는 요즘 / 일태기 회복 / 트러블 슈팅
이번 주 에피소드
1. 작은 행복을 느끼는 요즘: 몸은 천근만근이었지만
2. 일태기 회복: threejs와 패키지 관리 공부
3. 트러블 슈팅: 브라우저에 영향을 줄 수 있는 원인은 정말 많다
1. 작은 행복을 느끼는 요즘: 몸은 천근만근이었지만
이번 주는 몸이 아주 피곤했다. 여행의 후유증이 가시지도 않았고 컨디션도 안 좋으니 식욕도 없어 그냥 겨우겨우 끼니만 때웠다. 무리해서 먹으면 딱 체할 것 같은 느낌으로 일주일을 보냈던 것 같다.
목요일엔 동호회에서 방탈출을 했는데 비트포비아 강남 던전 2의 로스트 킹덤 2를 했다. 로스트킹덤1은 가까스로 탈출했었는데 2는 대실패를 했다. 뉴비분들과 함께한 우당탕탕 방탈출이었지만 그래서 더 친해졌고 그래서 더 재밌었다. 서로 침착해요 괜찮아요 하는데 하나도 안 침착하고 하나도 안 괜찮았다. 그렇게 방탈출이 끝나고 집에 와서 부모님께 다녀왔다고 말씀드리고 방에 들어왔는데, 그 이후가 기억이 안 난다. 거의 마취총을 맞은 수준이었다.
혹시 왔다갔니이아침에 일어났는데 언제 잠들었는지 어떻게 잤는지 기억이 안 났다. 술 마신 것도 아닌데 어떻게 이렇게 기억이 삭제되지? 아직 어린데 살짝 무서웠다. 영양제를 먹어야겠다.
금요일에는 동기 언니를 만나서 훠궈에 맥주 한잔을 하고 건대부터 뚝섬까지 산책을 했다. 날씨도 선선하고 나른하게 걸으니까 좋았다.
한강 벤치에 앉아서 이런저런 얘기하다 뮤덕인 언니 따라 4월에 뮤지컬을 보러 가기로 했다. 피곤하긴 했는지 한강에서 했던 얘기 중에 언니가 뮤지컬 노래 부른 것밖에 기억이 안 난다. 노래가 패밀리 나이프 뮤직이랬다. 라이프가 아니라 나이프라 그래서 나이프가 왜 거기서 나와? 했던 기억이 난다.
이번 주 식욕이 없어서 뭐 먹을지 고민했는데 이틀 연속 그릭 요거트를 먹었다. 근데 진짜 진짜 맛있었다. 강남역 레이지요거트 그릭 진짜 추추추추 대추천! 꾸덕함이 딱 적당해서 좋았다!
이번주 힘든 와중에 그래도 아침 스터디도 꼬박꼬박 하고 아 월요일은 못했구나 암튼, 주말 스터디도 잘 마쳤다. 계단 오르기도 할 때마다 포도알 스티커 하나씩을 붙이고 있는데 열심히 해서 벌써 열개정도 채웠다. 히히
요새 내 일상에 엄청 큰 기쁨이 있진 않은 것 같은데 하루하루 작은 행복들이 기다리고 있는 것 같다. 그래서 좋다.
2. 일태기 회복: threejs와 패키지 관리 공부
회사에서 계속 붕 뜬 느낌을 받아서 일태기다!! 했었는데 이번주는 그래도 이것저것 많이 해보면서 일태기가 회복된 것 같다. 저번주처럼 올라온 코드를 뒤적인 게 아니라 내가 만들고 싶은 것들을 찾아보고 만들어봤다.
Three.js를 사용하면서 아 이 라이브러리 얘기를 전에 했던가. 웹에 3D 객체 렌더링을 도와주는 JS 라이브러리 정도로 설명하면 될 것 같다. 선배님이 삼제이라고 불러서 뭔가 했더니 이거였다. 요 라이브러리와 더불어 설치되어 있던 drei, fiber을 활용하여 react 안에서 3D 모델을 커스텀하기도 하고 해도 뜨고 달도 뜨고 별도 뜨게 만들 수 있었다. 여기까진 다른 동료/선배님들이 만들어놔 주신 환경.
나는 메인 화면에서 보일 오브젝트가 떨어지는 걸 표현하고 싶었고 찾아봤더니 cannon 라이브러리를 추가하면 다른 라이브러리들과 조합해서 재밌는 물리 컴포넌트들을 만들 수 있었다. 그래서 큐브를 떨어지게도 해보고 원기둥을 떨어지게도 해보고 glb/gltf 파일을 로드해서 떨어지게도 해보고 떨어질 위치와 속도도 조절해 보고 원래 하려고 했던 기능인 버튼을 누르면 코인이 하나씩 추가되도록 만들어보기도 했다. 여기까지 하니 별건 아니지만 일태기는 충분히 회복된 것 같았다.
마지막으로 코인이 떨어질 때 쨍글하는 소리를 추가하려고 onCollide 속성에 audio 객체를 play() 하는 콜백함수를 추가했는데 한 번 로드된 후에 버튼으로 코인을 추가하면 소리가 잘 먹여지는데 처음 로드될 때 에러가 나서 결국 요리조리 살펴보다 원인을 못 찾고 커밋은 못 했다. 아쉽다. audio 객체의 특성을 제대로 이해 못 하고 추가해서 그런 건데 다음에 또 시간이 나면 해봐야겠다.
cannon 라이브러리를 추가하는 과정에서 우리가 백엔드가 포함된 모노레포를 쓰는데 웹뷰 폴더에만 설치를 해야 하는데 내가 전역으로 설치를 하는 바람에 피드백을 받았다. 마이 미스테잌. 요번 기회에 이 패키지 관리 부분 살짝 공부한 내용을 적어보겠다.
모노레포의 탄생 배경을 살펴보자면 관심분리가 어려웠던 모놀리식 애플리케이션을 거치고, 프로젝트 별로 독립된 레포를 갖는 멀티레포를 지나 여기서 발생한 단점들을 보완한 모노레포가 탄생하게 되었다. 이를 도입함으로써 의존성 관리가 더 쉬워지고 관리 포인트가 단일화되는 등의 이점을 얻을 수 있게 된 것이다.
이때 패키지 매니저로 우리는 2017년에 만들어진 따끈따끈한 pnpm을 선택했는데 만든 선배님께 직접적으로 물어보진 않았지만 배민에서도 그렇게 사용하고 있었고 그 사용하게 된 이유가 합리적이어서 마찬가지로 선택했을 것 같았다.
대표적인 장점으로는 npm과 사용법이 비슷해서 쉽게 사용가능하다는 점(drop-in replacement), npm과 yarn이 가진 프로젝트 간 dependencies 가 중복저장되는 문제를 해결하는 전략을 사용한다는 점이 되겠다. 이 전략을 content-addressable storage라고 하는데 이 방법은 홈 폴더의 글로벌 저장소에 중첩된 폴더가 생성되게 되고, 결과적으로 dependencies가 물리적으로 한 번만 저장되기 때문에 상당한 디스크 공간을 절약할 수 있다고 한다.
공부할 때 참고한 자료
패키지 매니저, 모노레포와 pnpm, pnpm 설치 옵션
3. 트러블 슈팅: 브라우저에 영향을 줄 수 있는 원인은 정말 많다
이번 주 나를 고생시킨 에러가 있다. 아직도 해결이 안 됐다. 하하. 하루종일 붙잡고 있었는데 비록 해결은 안 됐지만 붙잡고 씨름했던 과정에서 선배님들께 배운 점들이 있어 정리해보려고 한다.
우선 화면 배경과 일부 이미지가 까맣게 보인다는 제보가 들어왔다.
에러로그 확인을 부탁드렸는데 popup.js 파일의 updateEmojis라는 함수에서 난 에러를 캡처해서 보내주셨다. 근데 우리 프로젝트에는 그런 함수가 없었다. 그러면 당연한 건데 우리 프로젝트에서 난 문제가 아니다. (이 당연한 사실을 도출해 내는 게 너무 어려웠다. 다른 원인이 있나, 모듈에서 사용하는 함수인가 등등 불확실한 의문들이 난무했다.) 다시 말해 제보된 문제와 관련이 없는 에러인 것이다. 그럼 어디서 난 에러길래 나를 헷갈리게 했나.
결론은 크롬 익스텐션에서 난 에러였다. 익스텐션의 UI는 popup.js에 코드를 추가해서 구성하게 되는데 이것이 이 에러의 원인이었던 것이다.
출처: https://velog.io/@hustle-dev/크롬-익스텐션-아키텍처와-튜토리얼익스텐션을 개발해 본 적이 없는 나는 이 사실을 몰랐고 그래서 이 에러를 보면서 저 문제와 관련지어 머리를 굴린 것이다.
선배님이 저 에러를 보자마자 익스텐션일 가능성이 높다고 하셔서 진짜 짬바가 무섭다는 생각을 했다. 보자마자 바로 생각해 내다니, 진작 물어볼걸. 주위에 천재만재 선배님들이 많은 건 정말 행운인 것 같다는 생각도 했다. 몰래 쓰는 거지만 선배님들 제가 많이 애정합니다요.
그래서 저 캡처로 보내주신 에러의 원인은 찾아냈고 화면이 까매지는 문제의 원인이 아니라는 사실도 밝혀냈다. 그러면 이제 이 문제의 원인을 파악해서 해결을 해야 하는데. 센트리에 잡힌 에러들 중 영향이 갈 만한 에러를 수정해서 반영했지만 여전히 발생하고 있었다.
그만 나오란 말이야..에러 로그를 보면서 API Latency 문제인가도 의심해 봤지만 여러 정황상 API 문제일 확률이 너무나 희박했다. 문제가 될 수 있는 API호출은 처음에만 호출하는데 문제 발생 시점이 이미 로드한 후라는 점, 문제의 화면처럼 나오려면 API 2개가 문제가 있어야 하고 API서버가 아닌 또 다른 서버에도 문제가 있어야 하는데 이 서버들이 다 특정 사람의 특정 환경에서만 갑자기 나타난다는 점, 더군다나 문제가 있어야 하는 API에서 에러가 났다는 로그도 없었다.
그나마 추측한 바로는 윈도우 환경에서, 탭을 이동하다 돌아왔을 때 발생했다는 점에서 브라우저 자체적으로 메모리를 날리나? 하는 추측이었다. window canvas element 키워드를 각양각색으로 검색해 봤는데 크롬 브라우저에서 성능 관리를 위해 날린다는 말도 있고 비슷한 사례로 질문을 올리는 사람들이 있기도 해서 기대를 했으나 결국 원인을 못 찾았다. 개발자들은 모두 맥을 쓰고 있었기에 사수님께서 윈도우로도 비슷하게 테스트를 해보셨지만 결국 재연을 실패했다.
이번에 이렇게 에러를 며칠 동안 잡고 있으면서 브라우저에 영향을 주는 요소들이 생각보다 정말 많구나를 깨달았다.
전에 선배님들께서 트러블 슈팅에 대한 조언을 주실 때 ‘일단 재연을 해야 한다. 재연하면 문제를 다 푼 거나 다름없다.’고 말씀하시며 문제 재연을 가장 강조하셨던 것 같은데 이 말에 공감할 수 있는 기회가 되기도 했다. 정말 재연이 안되니까 잡히지가 않는다.
이번에 들은 조언은 이랬다. 이렇게 해볼만큼 해봤는데도 안 잡히는 에러들이 있다. 이건 사냥 추적을 해봤는데도 안 되는 거니 덫을 놓고 기다리는 수밖에 없다. 사실 누가 나중에 고치길 기다리는 방법도 있다. 같은 말들도 재치 있게 해 주셨다.
나는 사실 일반적이지 않게 등장한 에러에 대해선 한두 번 해보고 안되면 그냥 덮어버리는 경향이 있었다. 이 부분에 대해 지적을 받은 후로 일정 시간까지는 계속 시도해 보게 되었는데 그래도 지적받을 때보다 많이 발전한 것 같아 다행이다.
그래도 저번주에 우려했던 부분 잘해주어서 대견하다.
이번 주도 고단했지만 잘 이겨냈다.
이번 주처럼 다음 주도 행복함을 충분히 자주 느끼도록!
이번 주엔 배운 게 많다.
잊지 않게 주중에도 한 번씩 생각하자.
이번 주에 기억에 남는 문장이 있다. 우연히 갔던 카페에서 잠깐 읽은 책에서 나온 문장, ‘10%의 힘은 남겨두어야 한다‘ 너무 힘들지 않게 잘 조절하는 것도 필요하다. 다들 화이팅!
