단방향 데이터 흐름이 가져다줄 예측 가능성과 안정성에 대한 기대감이 팀 전체에 퍼져나갔다. 하지만 그 뜨거운 열기는 이내 차가운 현실의 벽 앞에서 식어갔다. 팀원들의 머릿속을 떠나지 않는 하나의 거대한 질문.
"매번 전부 다시 그리면 너무 느리지 않나?"
팀의 시니어 엔지니어인 데이빗이 문제를 정면으로 제기했다. 그는 성능 최적화의 전문가였고, 그의 의견은 팀 내에서 큰 무게를 가졌다.
“조던, 당신의 아이디어는 우아합니다. 하지만 현실을 무시할 순 없어요.”
데이빗은 페이스북 뉴스피드 페이지를 예로 들었다. 뉴스피드에는 수백 개의 게시물이 로드될 수 있고, 각 게시물은 수십 개의 DOM 요소로 이루어져 있다.
“당신의 말대로라면, 사용자가 맨 아래 게시물의 ‘좋아요’ 버튼 하나를 눌렀을 뿐인데, 수백 개의 게시물 전부와 헤더, 사이드바까지, 페이지에 있는 모든 컴포넌트의 render 함수를 다시 호출해서 UI 설명서를 새로 만든다는 뜻이 됩니다. 맞습니까?”
“네, 맞습니다.” 조던은 차분하게 대답했다.
데이빗은 고개를 저었다.
“그건 재앙입니다. 자바스크립트는 그렇게 빠르지 않아요. 수천, 수만 개의 설명서 객체를 새로 만드는 데만 해도 엄청난 연산이 필요할 겁니다. 브라우저는 그대로 얼어붙을 거예요. 사용자는 ‘좋아요’ 버튼 하나 누르고 1초를 기다려야 할지도 모릅니다.”
그의 말은 논리적이었고, 모두가 동의할 수밖에 없는 현실이었다. 백본이나 다른 프레임워크들이 복잡한 이벤트 시스템을 도입한 이유도 바로 이것, ‘불필요한 계산’을 피하기 위해서였다. 변화가 필요한 부분만 정확히 찾아내서 그 부분만 다시 계산하는 것이 훨씬 효율적이라는 것은 상식이었다.
맷도 거들었다.
“설령 계산이 어떻게든 빨랐다고 칩시다. 그 다음은요? 새로 만들어진 UI 설명서를 기반으로 실제 DOM을 업데이트해야 하잖아요. FaxJS 프로토타입처럼 innerHTML로 매번 전체를 갈아 끼우는 건 말도 안 되고요. 결국 바뀐 부분만 찾아서 DOM을 수정해야 할 텐데, 그 ‘바뀐 부분’을 찾는 과정 자체가 이미 엄청난 작업 아닌가요?”
팀원들의 회의적인 시선이 조던에게 쏠렸다. 그의 아이디어는 이상적이지만, 성능이라는 거대한 현실의 산 앞에서 좌초될 운명처럼 보였다.
조던은 그들의 우려를 충분히 이해하고 있었다. 그는 잠시 침묵하며 생각을 정리했다. 그리고는 마치 오랫동안 준비해 온 답을 꺼내듯, 조용히 입을 열었다.
“여러분의 지적이 모두 맞습니다. 자바스크립트 연산은 느리고, 실제 DOM 조작은 그보다 훨씬 더, 상상 이상으로 느립니다.”
그는 모두의 우려를 인정하는 것으로 말을 시작했다. 그리고는 결정적인 한마디를 덧붙였다.
“그래서 우리는 실제 DOM을 직접 건드리지 않을 겁니다.”
회의실에 있던 모두가 의아한 표정으로 그를 쳐다보았다. DOM을 건드리지 않고 어떻게 화면을 바꾼단 말인가?
“우리가 다룰 것은 실제 DOM이 아닙니다.”
조던의 목소리는 낮았지만, 회의실 전체를 울리는 힘이 있었다.
“우리는 실제 DOM의 복사본, 즉 자바스크럽트 객체로만 이루어진 가짜 DOM을 메모리상에 둘 겁니다. 그리고 모든 비교와 계산은, 그 빠르고 가벼운 가짜 세상 안에서 먼저 끝낼 겁니다.”
가짜 DOM.
그 생소한 단어가 처음으로 페이스북 엔지니어들의 귓가에 울려 퍼진 순간이었다. 그것은 성능이라는 거대한 산을 넘기 위한, 누구도 상상하지 못했던 새로운 등반로의 시작을 알리는 신호였다.
