들어가며 최근 간단하게 대용량 데이터를 가공하여 대시보드를 구현해볼 좋은 기회가 있었다. 데이터를 받아오고 처리하는 과정에서 사용성을 해치지 않는 것이 주 목적이었다. 이를 위해 웹워커나, Transferable Object, 인덱싱을 활용하는 등 다양한 개념을 적용해보았다. 이전에는 해보지 않았던 작업이라 그런지 새로운 개념을 배우고 이를 직접 적용하며 어떻게 하면 효율적으로 데이터를 연산해서 보여줄지를 고민하며 정말 즐겁게 작업했다. 이번 글에서는 이 과정을 통해 배운 것들, 시도해본 것들을 기록해보려 한다. 주어진 조건 API의 응답 크기 약 10MB(API를 수정할 수는 없음) 두 API(제품과 매출 데이터)의 응답 데이터를 제품 id를 기준으로 joining 필요 데이터를 가공하여 다양한 형태의 그래프 및 표의 형식으로 UI를 구현하고, 그 안에서 검색, 필터링하여 인사이트를 얻을 수 있도록 구성 챌린지1: 대용량 데이터를 효율적으로 처리하기 1) 웹워커의 도입과 그 이유 “대용량 데이터를 처리하면서도 사용성을 해치지 않는 것”이라는 목표를 고려했을 때 가장 먼저 떠올린 해결책은 웹워커(Web Worker) 활용이었다. 웹워커는 간단히 말해 브라우저 안에서 돌아가는 작은 ‘보조 작업자 스레드’다. 보통 자바스크립트 코드는 메인 스레드 위에서 실행되는데, 여기서는 렌더링/이벤트 처리/로직 실행이 모두 싱글 스레드 위에서 처리되기 때문에 연산이 길어지면 UI 블로킹이 발생한다. 웹워커는 이와 분리된 별도의 스레드를 제공해서, 무거운 연산을 맡겨도 메인 스레드는 계속 부드럽게 동작할 수 있게 해준다. 다만 웹워커에서는 DOM에는 직접 접근할 수 없고, 메인 스레드와는 postMessage로만 데이터를 주고받는다는 것에 주의하여 활용해야한다. ...

개발 단계에서 코드를 변경하고 저장하면 새로고침이 없이도 변경사항이 반영되는 경험은 이제 어쩌면 당연한 개발환경이 된 것 같다. 처음 개발을 시작했을 때 ‘npm run dev 를 하면 변경사항이 자동반영 된다’라는 걸 알고도 그런가보다 하고 넘어간 뒤로는 이에 대해 특별히 고찰해보지 않았다. 심지어는 웹팩으로 만들어진 디자인 시스템을 vite로 마이그레이션 하고 HMR 시간을 단축했던 경험이 있는데, 그때에도 정확히 어떤 원리로 번들러를 바꿈으로써 HMR 시간을 단축할 수 있었는지 이해하려하지 않고, 그 결과물에만 심취해있었던 것 같다. ...

들어가며 <발더스 게이트 3(이하 BG3)>는 정말 미친 게임이다. 지난 6월 퇴사를 하고 풀타임 게이머라고 해도 무방할 정도로 게임을 해서 어느덧 100시간이 훌쩍 넘는 플레이 시간을 기록했다. BG3는 플레이어 관점에서도 엄청난 게임이지만, 웹 프론트엔드 개발자의 관점에서 바라봤을 때 특히 감탄을 자아낸다. 그 이유 중 하나는 방대한 맵에서 수많은 인물들과의 관계, 수많은 퀘스트와 헤아릴 수 없는 아이템들이 모두 기억되고, 그러면서도 사용성이 매끄럽다는 점이다. 게다가 퀘스트 실행 순서에 따라 달라지는 내러티브까지… 감히 상상도 못할 개발적 규모를 지녔음에도 지금까지 심각한 버그를 찾아내지 못했다. ...

정원을 가꾸는 알로시아 이야기 완벽하게 직관형 인간이라 마음이 끌리지 않으면 쳐다도 보지 않는 내게 이번 여행은 어떤 의무처럼 느껴졌다. 개발자로서 입사한 첫 회사를 어쩌면 자의적으로 어쩌면 타의적으로 퇴사한 뒤 장기 여행은 왠지 실업급여 신청처럼 꼭 해야만 할 것 같은 일 중 하나였다. “지금 아니면 언제 가겠어”라는 단순하고도 회피적인 마음. 이 여행에 기대가 크지 않았다. 나라를 정하는 것도 귀찮고 싫어서 배우자에게 “당신이라면 어딜 갈거야?“라고 물어 오스트리아에 가기로 정했다. 숙소비를 아끼려고 일주일은 친구 집에 묵고, 남은 일주일은 소도시를 전전하며 저렴한 숙소에서 묵기로 했다. 그러던 중 나는 알로시아의 에어비앤비를 찾게 된 것이었다. 그 숙소가 없었다면 절대 갈 일이 없어보이는 마을에 위치해 있었지만, 숙소 사진만 봐도 십여년전 에어비앤비 창업가들의 정신을 여전히 계승하고 있는 듯 해보였다. 그 곳에 가기 위해서 기차를 두 번 갈아타고 버스로 한번 갈아타야 했지만 다시 한 번 20대 처럼 여행할 수 있는 좋은 기회처럼 보였다. ...