patterns

Hey.com

📮 피드백 보내기

자바스크립트를 최소화하여 성능을 최적화한다

대부분의 로딩 패턴은 무거운 자바스크립트 앱을 로드하는 방식을 최적화하는것에 중점을 두고 있지만, 아주 적은 양의 자바스크립트만을 사용하여 모던 웹 앱의 성능을 최적화하는것도 가능하다.

이러한 방식의 좋은 예시로 Hey.com 의 사례를 들 수 있다. Hey.com은 성능을 위해 모던 웹 프레임웍들을 사용하지 않는다. 그들은 성능을 위해 몇몇 커스텀 패키지들만을 사용하고 있다.

클라이언트 사이드의 프레임웍 없이 사이트 탐색 성능을 최적화하기 위해 Hey.com은 Turbolinks 라는 라이브러리를 사용하고 있다. 사용자가 같은 도메인의 <a href>링크를 클릭할 때 Turbolinks는 이 리디렉션을 가로채어. 새로운 페이지에 대한 요청을 XMLHttpRequest로 수행하게 된다.

서버에서 응답된 HTML은 body 태그의 컨텐츠를 교체하며 화면에 렌더링되고. head컨텐츠 역시 병합된다. 사용자가 같은 페이지를 재방문하면 Turbolinks는 이를 또 요청하지 않고 캐시로부터 페이지를 꺼내어 렌더링한다. 페이지가 캐시되지 않았다면 Turbolinks는 네트워크를 통해 새로운 버전을 요청하게 된다.

또한 Turbolinks를 사용하면 백그라운드에서 최신 버전의 페이지를 요청하는 동안 캐시된 HTML페이지를 화면에 렌더할 수 있다. 한번 받았던 컨텐츠는 이런 방식으로 렌더 속도가 극대화된다. 새로운 페이지가 백그라운드에서 받아지는 동안에도 사용자는 예전 버전의 페이지를 보고 상호작용도 가능하다.

Stimulus

웹 앱은 웹 서버로부터 HTML을 효율적으로 응답받은 후에 뒤이어 상호작용이 가능하게 되어야 한다. Hey.com은 이렇게 화면에 렌더된 HTML에 상호작용이 가능하도록 하기 위해 Stimulus라는 프레임웍을 사용하고 있다.

Stimulus는 컨트롤러, 액션, 타겟이라는 세 가지 주요 관점을 제시한다. 우리는 Stimulus가 상호작용 기능을 부여할 HTML에게 data-controller, data-action, data-target 속성을 추가할 수 있다.

<div data-controller="hello">
  <input data-target="hello.name" type="text" />
  <button data-action="click->hello#greet">Greet</button>
  <span data-target="hello.output"></span>
</div>

아래는 DOM요소에 필요한 자바스크립트를 추가하는 hello 컨트롤러의 예제이다.

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['name', 'output']

  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}

Stimulus GitHub repo 에서 더 많은 예제를 확인해볼 수 있다.

Stimulus는 페이지의 변경 사항을 지켜보다가 새로 렌더된 HTML에 맞는 컨트롤러를 붙인다. Stimulus의 컨트롤러는 미리 번들이 되어 있기 때문에 서버의 HTML응답에는 자바스크립트 번들이 포함되어 있지 않다.

Turbolinks와 Stimulus 그리고 기타 기술들을 조합하여 Hey.com은 최소한의 자바스크립트만으로 상호작용 가능하고 성능도 뛰어난 웹 사이트를 서빙하고 있다.

Hey.com은 자바스크립트를 최소한으로만 사용하여 성능이 뛰어난 웹 앱을 만든 수 많은 사례 중 하나일 뿐이다. 웹 사이트의 성능을 개선하는 도구들은 점점 더 발전하고 있지만, 웹 앱의 특정 요구 사항에 집중하는 것도 매우 중요하다. 자신만의 독창적인 패턴을 만들거나 인기 있는 로딩 패턴으로부터 몇몇 장점들만을 채택하는 것으로도 웹 앱의 로딩 경험을 성공적으로 개선할 수도 있다!