Qwik: 가장 빠른 로딩속도의 자바스크립트 프레임워크

안녕하세요. 원더월에서 프론트엔드 개발을 하고있는 황호찬입니다.

이번에는 builder.io에서 만들어낸 Qwik Framework에 대한 소개를 해볼까 합니다.

Qwik은 2021년에 최초로 pre-release, 올해 5월에 1.0.0이 릴리즈된 나름? 따끈따끈한 프레임워크입니다.

개발팀 내부에서도 작년에 Qwik의 정보를 같이 공유한 히스토리가 있네요.

Qwik Framework?

Qwik은 React.js, Vue.js와 같은 웹 프레임워크입니다.

Qwik애서 가장 강점으로 뽑고 있는 부분은, 로딩시의 최소 크기의 자바스크립트와 가장 빠른 속도입니다.

Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity.
Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.

단 1kb의 자바스크립트만으로 페이지의 최초 기동이 가능하다고 하네요. 이를 가능하게 하는것은 다른 프레임워크와 Qwik의 동작 방식의 차이입니다.

기존 프레임워크는 최초 기동시 해당 페이지에 필요한 모든 js파일을 로드하고, 그 파일들이 로드되기 전까지는 사용자가 페이지를 확인할수 없습니다. 하지만 Qwik은 최소한의 js파일만을 가져오고, 필요할때 그 동작을 위한 최소한의 js파일을 그때그때 가져옵니다.

직접 확인해보자

실제로 동일하게 동작하는지 알아보기위해 react와 qwik 버전의 다음과 같은 간단한 Counter를 만들어보겠습니다.

먼저 react입니다.

npm create vite@latest react --template react-ts

function App() {
  const [count, setCount] = useState(0)

  return (
    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '0.5rem'}}>
      <button onClick={() => setCount(count => count - 1)}>minus</button>
      <div>{count}</div>
      <button onClick={() => setCount(count => count + 1)}>plus</button>
    </div>
  )
}

다음은 qwik입니다.

npm create qwik@latest

export default component$(() => {
  const count = useSignal(0);

  return (
    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '0.5rem'}}>
      <button onClick$={() => count.value--}>minus</button>
      <div>{count}</div>
      <button onClick$={() => count.value++}>plus</button>
    </div>
  );
});

그럼 이제 개발자도구 네트워크탭을 열어서 js로 필터를 걸고 한번 확인해보면

생각보다 불러오는 js파일의 양과 크기에 확연하게 차이가 보이는걸 확인할 수 있습니다. 물론 현재 페이지가 큰 기능이 있는건 아니고 실제로 js로 번들링되는 내용도 많지 않아 페이지 로딩에 큰 차이가 없어보일순 있지만 수많은 기능이 들어가면서 페이지 로딩 속도는 점점 느려지고 사용자의 이탈율로 이어지게 됩니다.

Qwik이 이렇게 최초 로딩시의 js 사이즈를 줄인 방법은, 최초 페이지를 로딩하는데 필요하지 않은 자바스크립트를 로딩하지 않기 때문입니다. 저희가 만든 카운터앱에서 페이지 로딩을 하는 시점까지는 button에 붙어있는 이벤트 리스너는 필요하지 않습니다. 사용자가 클릭하지 않으면 쓸일 없는 내용이기 때문입니다.

Qwik은 가능한 모든것을 비동기로 처리하고, 꼭 필요한 동작이 아닌 경우 해당 코드가 사용되지 않습니다. 그렇기 때문에 react에서는 plus, minus 버튼을 눌러도 아무 변화가 없지만 qwik에서는 해당 버튼을 누르는 즉시 그 버튼을 클릭했을때 발생해야 하는 자바스크립트 코드를 불러오고 호출이 끝나면 실행하게 됩니다.

Concept

위에서 살펴본 내용을 기준으로 Qwik의 컨셉, 그 개발자들이 어떤걸 중시하고 작업을 했는지 알아보려고 합니다.

Delay Execution

최소한의 자바스크립트 코드를 다운로드하는걸로, 어플리케이션을 빠르게 실행시킵니다.
로딩 시간 향상을 위해 적은 양의 코드를 만₩들어내는게 아니라 필요할때 코드를 가져와서 사용하며, 이를 위해 Qwik에서는 모든것을 레이지로드로 동작하게 할 수 있습니다.

Resumability

Qwik은 기본적으로 SSR을 지향하는 프레임워크입니다. 이 때, 서버에서 설정된 상태가 클라이언트에서 초기화되는게 아닌 해당 상태를 클라이언트에서도 그대로 유지합니다.
다만 하이드레이션은 현재 페이지에 관련되는 모든 컴포넌트 코드를 다운로드해야하고, 세부 컴포넌트 트리와 리스너를 다시 빌드하기 위한 컴포넌트에 연관된 템플릿을 실행시켜야하기 때문에 렌더링에 너무 많은 비용이 발생, 하이드레이션을 하지 않습니다.

Reactivity

어떤 컴포넌트가 어떤 상태를 구독하고 있는지를 알게하여 리렌더되는 컴포넌트의 수를 최소화하고, 이는 프록시를 통해서 관리됩니다.
또한 Qwik 컴포넌트는 부모부터 자식의 순서대로 렌더링을 하지 않고 각각 별개의 렌더링과정을 거치며, 이는 부모의 리렌더링으로 인한 자식의 리렌더링을 예방합니다.
이를통해, 객체등을 활용하여 하나의 상태로 관리하고 있어도, 해당 컴포넌트에서 사용하지 않는 값의 변경은 리렌더링을 발생시키지 않습니다. 아래 예제에서 a값을 변경시켰을때, props로 a를 전달받는 Child만 렌더링이 다시 발생하고, b를 전달받는 Child는 리렌더링이 발생하지 않습니다.

export const Child = component$((props: { count: number }) => {
  return <span>{props.count}</span>;
});

export const MyApp = component$(() => {
  const store = useStore({ a: 0, b: 0, c: 0 });

  return (
    <>
      <button onClick$={() => store.a++}>a++</button>
      <button onClick$={() => store.b++}>b++</button>
      <button onClick$={() => store.c++}>c++</button>
      {JSON.stringify(store)}

      <Child count={store.a} />
      <Child count={store.b} />
    </>
  );
});

마치며

이번에 제가 개인적으로 주목하고 있는 차세대 프레임워크라 생각되는 Qwik.js에 대해서 간단한 소개를 해봤습니다.
현재 팀 내 개발자들을 위한 qwik 문서를 작성하고 있으며, 추후에 완성도를 높여서 해당 문서를 공개할 수 있는 기회가 있으면 좋겠습니다.
또한 원더월에서는 간단한 프로젝트를 대상으로 Qwik을 적용해보려 하고 있고, 이를 통해 원더월이 관리하고 있는 프로젝트들에 대해서 사용자들에 더욱 친밀한 서비스가 되는 기회가 될수 있을거라 생각합니다.