Nuxt.js에서 외부 스크립트를 로드하는 방법

Nuxt.js에서 외부 스크립트를 로드하는 방법

Written by Alexander Lichter

Introduction

거의 모든 최신 웹 애플리케이션은 선호하는 JavaScript 프레임워크 외에도 일종의 종속성을 사용하고 있습니다.

대부분의 종속성은 NPM을 통해 사용할 수 있지만 대부분은 CDN(Content Delivery Network) 버전에 대한 링크도 제공하므로 추가 노력이나 빌드 단계 없이 모든 프로젝트에 포함될 수 있습니다.

그러나 NPM 패키지를 제공하지 않고 스크립트 태그를 통해 구현되는 데 전적으로 의존하는 상당한 양의 인기 있는 외부 라이브러리도 있습니다. 일반적인 예로는 뉴스레터 통합, 문의 양식 및 결제를 처리하기 위한 Stripe SDK가 있습니다.

CDN 링크만 있으면 개발자가 소프트웨어를 업데이트하지 않고도 작성자가 원활하게 업데이트할 수 있는 몇 가지 이점이 있지만 특히 최신 JavaScript 프레임워크로 작업할 때 단점이 있습니다.

통합은 특히 단일 페이지에서만 필요할 때 더욱 복잡해집니다. 또한 개발자는 비동기식으로 로드하는 스크립트를 처리해야 합니다.

Nuxt.js 프로젝트에 이러한 외부 종속성을 추가하는 방법을 살펴보겠습니다!

Nuxt.js에서 전역으로 외부 스크립트 로드

Nuxt.js를 사용하면 _어디서나 필요할 때 외부 스크립트를 쉽게 로드할 수 있습니다. 프로젝트의 nuxt.config.js의 head 개체에 해당 링크를 추가하기만 하면 vue-meta가 무거운 작업을 수행할 것입니다.

// nuxt.config.js
export default {
  head: {
    title: 'My awesome project', // Other meta information
    script: [
      { hid: 'stripe', src: 'https://js.stripe.com/v3/', defer: true }
    ]
  }
}

다만 이렇게 하면 스크립트가 지연되지만 모든 페이지에 로드되므로 결제 페이지와 같은 특정 페이지에만 필요한 경우에는 적합하지 않습니다.

고유한 페이지에 외부 스크립트 추가

그러나 Nuxt와 vue-meta 덕분에 스크립트를 추가한 페이지에만 로드하는 페이지 구성 요소 내부에 스크립트를 포함할 수도 있습니다.

이를 달성하기 위해 nuxt.config.js의 객체와 유사하게 작동하는 페이지 구성요소의 head 기능이 핵심입니다.

// /pages/payment-page.vue
export default {
  head() {
    return {
      title: 'Payment Page - My awesome project', // Other meta information
      script: [
        { hid: 'stripe', src: '', defer: true }
      ]
    }
  }
}

이것은 이전에 수행한 작업과 매우 유사하지만 최종 솔루션이 아닙니다.

The problem

서론에서 설명했듯이 개발자는 이러한 방식으로 로드되는 외부 스크립트와 관련하여 로드되기 전과 사용 가능한 때라는 두 가지 상태를 처리해야 합니다.

SSR 모드에서 Nuxt를 사용할 때 페이지에 대한 초기 요청(SSR이 시작되는 곳)은 첫 번째 상태를 갖지 않습니다. 첫 번째 요청 이후에 외부 스크립트가 포함된 페이지로 이동하는 경우 mounted 수명 주기 후크도 스크립트가 로드되기 전에 실행될 수 있으므로 개발자는 추가 상태를 처리해야 합니다.

특히 stripe를 사용할 때와 같이 코드가 외부 스크립트의 API에 의존하는 경우 some issues //github.com/nuxt/nuxt.js/issues/6005)가 과거에 발생했습니다.

<template>
  <div>
    <!-- How do I know when Strip is ready? -->
    <SomeComponentDependingOnStripe/>
  </div>
</template>
<script>
// /pages/payment-page.vue
export default {
  head () {
    return {
      title: 'Payment Page - My awesome project', // Other meta information
      script: [
        { hid: 'stripe', src: '<https://js.stripe.com/v3/>', defer: true }
      ]
    }
  }
}
</script>

The solution: vue-meta to the rescue

그 당시에는 연결된 문제가 제기되었을 때 자체적으로 비동기 스크립트 로드를 처리하는 VueScript2와 같은 라이브러리를 권장했을 것입니다. 그러나 이것은 더 복잡하고 번들 크기를 증가시킵니다. 좋은 소식은 vue-meta의 메인테이너 pimlie가 callback 버전 2.1의 옵션으로 스크립트가 로드된 후 개발자가 Vue 속성을 조작할 수 있습니다.

이 옵션을 사용하면 스크립트가 완전히 사용 가능한 이후에 스크립트 종속 논리가 실행되도록 할 수 있습니다.

이것은 또한 서로 의존하는 외부 스크립트를 연결하는 것도 이제 더 쉽다는 것을 의미합니다.

따라서 위의 예를 적용하고 콜백을 추가해 보겠습니다.

    <template>
      <div>
        <SomeComponentDependingOnStripe v-if="isStripeLoaded"/>
      </div>
    </template>
    <script>
    // /pages/payment-page.vue
    export default {
      data () {
        return {
          isStripeLoaded: false
        }
      },
      head () {
        return {
          title: 'Payment Page - My awesome project',
          script: [
            {
              hid: 'stripe',
              src: '<https://js.stripe.com/v3/>',
              defer: true,
              // Changed after script load
              callback: () => { this.isStripeLoaded = true } 
            }
          ]
        }
      }
    }
    </script>

추신: vue-meta는 이러한 스크립트를 조건부로 로드할 수 있도록 skip 옵션도 도입했습니다. 결제 모달이 뜨면

Conclusion

Nuxt로 외부 스크립트를 로드하는 것은 전 세계적으로 필요할 때 항상 쉬웠습니다. vue-meta의 도움으로 외부 종속성을 사용하기 전에 종속 논리를 처리하는 것도 훨씬 쉬워졌습니다.

새로 발견된 기능을 즐기려면 최신 버전의 vue-meta를 사용하고 있는지 확인하세요. Nuxt를 사용하는 경우 vue-meta가 기본적으로 포함되어 있으며 이미 최신 상태여야 합니다. Vue 프로젝트를 사용할 때, 예를 들어 vue-cli를 통해 package.json에서 vue-meta가 ^2.0.0으로 설정되어 있는지 확인하고 npm update 또는 yarn upgrade를 통해 종속성을 업데이트합니다.

블로그 게시물에서 한두 가지를 배웠기를 바랍니다. 그렇다면 반드시 소문을 퍼뜨리고 블로그 게시물을 동료들과 공유하십시오!