CodeWatchers

WordPress에서 Vue JS를 사용하는 방법

Rifat 워드프레스 튜토리얼 May 3, 2024

오늘날의 디지털 환경에서는 역동적이고 대화형 웹 경험을 만드는 것이 개발자의 최우선 과제가 되었습니다. Vue.js와 같은 JavaScript 프레임워크의 등장과 WordPress와 같은 콘텐츠 관리 시스템(CMS)의 광범위한 사용으로 인해 이러한 기술을 결합하는 것은 기능이 풍부한 웹 사이트를 구축하기 위한 강력한 솔루션이 되었습니다.

WordPress에서 Vue JS를 사용하는 방법

이 가이드에서는 WordPress 생태계 내에서 Vue.js의 기능을 활용하는 방법을 살펴보겠습니다. 원활한 통합을 위한 설치부터 고급 기술까지 모든 것을 다루면서 WordPress로 Vue.js를 설정하는 과정을 살펴보겠습니다. 초보자이든 숙련된 개발자이든 이 가이드는 WordPress에서 Vue.js를 효과적으로 사용하고 매력적인 웹 경험을 만드는 데 필요한 지식과 도구를 제공합니다.

Vue Js란 무엇인가요?

Vue.js는 사용자 인터페이스를 구축하는 데 사용되는 진보적인 JavaScript 프레임워크입니다. 단순성과 유연성으로 유명하여 동적 및 대화형 웹 애플리케이션을 만드는 개발자들 사이에서 인기 있는 선택입니다.

Vue.js는 구성 요소 기반 아키텍처를 채택하여 개발자가 애플리케이션을 쉽게 관리하고 유지 관리할 수 있는 재사용 가능한 모듈식 구성 요소로 나눌 수 있습니다. 부드러운 학습 곡선과 광범위한 문서를 통해 Vue.js는 개발자가 최신 웹 애플리케이션을 효율적으로 쉽게 구축할 수 있도록 지원합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

WordPress에서 Vue를 사용하는 이유는 무엇입니까?

WordPress와 함께 Vue.js를 사용하는 몇 가지 설득력 있는 이유가 있습니다.

첫째, Vue.js는 단순함으로 유명하므로 최신 JavaScript 프레임워크를 빠르게 배우고 채택하려는 개발자에게 이상적인 선택입니다.

또한 Vue.js를 WordPress와 통합하면 실질적인 이점이 있습니다.

예를 들어 jQuery와 같은 기존 라이브러리는 확장성이 떨어지며 특정 시나리오에서 충돌이 발생할 수 있습니다. WordPress와 함께 Vue.js를 API로 활용함으로써 개발자는 웹사이트의 속도와 성능을 크게 향상시킬 수 있습니다.

Vue.js는 또한 구성성이 뛰어나 플러그인, 관리 패널 및 WordPress 사이트의 기타 영역 내에서 사용자 인터페이스를 더 쉽게 구현할 수 있습니다. 구성 요소 중심 아키텍처를 통해 WordPress 생태계 내에서 최신 웹 애플리케이션을 구축하기 위한 다재다능하고 효율적인 도구입니다.

게다가 WordPress는 알려진 웹의 25% 이상을 지원합니다. 즉, WordPress는 이미 개발 스택이나 클라이언트의 일부일 가능성이 높습니다. 이러한 WordPress의 광범위한 채택으로 인해 Vue.js 통합은 프런트엔드 개발을 위한 자연스러운 선택이 되었습니다.

WordPress와 Vue를 사용하는 방법?

여기서는 Vue와 WP를 함께 사용하는 두 가지 방법에 대해 설명합니다. 함께 작동하게 만드는 방법을 살펴보겠습니다!

1. SPA를 하위 웹사이트/앱으로 생성

Vue를 활용하여 WordPress 관리 패널 내에서 "하위 웹사이트"를 개발할 수 있습니다. 이 접근 방식은 탭 시스템이나 다중 페이지 시스템이 필요한 복잡한 플러그인이나 사용자 정의 관리 페이지를 만드는 데 유용합니다.

일반적인 WordPress 방법과 달리 Vue를 사용하면 전체 페이지를 다시 로드하지 않고도 페이지 간 전환이 더 원활해져서 사용자 경험이 향상됩니다.

또한 Vue를 사용하면 표준 WordPress UI 요소에 비해 더 우아하고 사용자 정의된 UI 요소를 생성할 수 있습니다. 다음은 Vue를 사용하여 만든 사용자 정의 관리 페이지의 예입니다.

여기에 표시된 사용자 인터페이스(UI)는 WordPress 관리 패널 내의 WP Rocket 플러그인에 속합니다. 이 UI는 완전히 사용자 정의되었으며 탭으로 표시되는 자체 하위 페이지를 갖추고 있습니다. 각 탭은 고유한 하위 URL에 해당하므로 다른 사람과 쉽게 공유할 수 있습니다. 본질적으로 이는 WP 관리 패널 내의 소형 웹사이트와 유사합니다.

Vue와 Vue-router를 사용하면 이러한 사용자 정의를 쉽게 달성할 수 있습니다. 그러나 세심한 주의가 필요한 한 가지 측면이 있는데, 바로 URL 처리입니다. 두 개의 "웹사이트"(WordPress 관리 패널과 Vue 기반 인터페이스)가 공존하는 경우 잠재적인 URL 충돌이 발생할 수 있습니다.

이 문제를 해결하려면 Vue Router 인스턴스 내에서 간단한 조정만으로 충분합니다. 특히 다음 두 가지 옵션을 수정해야 합니다.

  1. 기본 옵션: 이는 사용자 정의 WP 페이지 경로로 설정되어야 합니다.
  2. 모드 옵션: "해시"로 설정해야 합니다.

"해시" 모드를 채택하면 전체 URL을 수정하는 대신 해시가 사용되므로 잠재적인 충돌이 완화됩니다.

또한 Elementor 편집기에서 예시한 것과 같은 유사한 기술을 사용하여 콘텐츠 편집기 페이지와 같은 다른 WordPress 페이지를 대체할 수도 있다는 점은 주목할 가치가 있습니다.

기존 WordPress 편집기는 하위 URL을 설명하기 위해 해시 기호를 사용하는 구조화된 인터페이스로 변환됩니다.

기본적으로 플러그인 페이지, 편집기, 대시보드 또는 중간 사무실 인터페이스와 같은 WordPress 관리 패널의 다양한 섹션 내에 하위 웹사이트를 구축하는 것이 가능합니다.

이를 달성하기 위해 프로세스에는 Vue CLI 또는 대체 도구를 활용하여 독립형 Vue 단일 페이지 애플리케이션(SPA)을 생성하는 작업이 포함됩니다. 그런 다음 라우터의 기본 및 모드 옵션을 적절하게 구성하고 애플리케이션을 내보내고 WordPress 생태계 내의 적절한 후크를 통해 WordPress에 통합합니다.

2. 프런트엔드 또는 관리자에서 재사용 가능한 구성 요소 생성

웹사이트에는 메뉴 토글, 드롭다운, 아코디언, 캐러셀 등 다양한 마이크로 상호작용이 통합되어 있습니다. 이러한 요소는 집합적으로 UI 키트라고 알려진 것을 형성합니다. 또한 특정 구성 요소는 좋아요 또는 투표 버튼, 양식 및 사용자 정의 미디어 플레이어와 같이 데이터와 비동기적으로 상호 작용할 수 있습니다.

Vue.js 구성 요소를 WordPress 또는 다른 백엔드 템플릿에 통합할 때 Vue의 런타임 + 컴파일러 버전을 선택해야 할 수도 있다는 점에 유의하는 것이 중요합니다. 이를 통해 백엔드 환경과의 원활한 기능 및 호환성이 보장됩니다.

특정 구성 요소는 렌더링된 데이터와 상호 작용하지만 다른 구성 요소는 그렇지 않습니다. 이러한 구별을 기반으로 다양한 유형의 구성 요소를 만들어야 합니다. 일부 구성 요소에는 템플릿이 있습니다.

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

다른 사람들은 생성된 마크업을 활용합니다.

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

Vue를 활용하여 기본 웹 구성 요소를 생성할 수도 있으며, ionicon(Stencil JS로 제작)과 유사한 다양한 프로젝트에서 재사용성의 이점을 제공합니다.

이러한 구성 요소는 WordPress PHP 템플릿이나 HTML을 생성하는 기능에 통합될 수 있습니다. 데이터를 전역 변수에 문자열화하거나 구성 요소 소품에 직접 할당하여 WordPress의 Vue 인스턴스 또는 구성 요소에 데이터를 전달할 수 있습니다. 이 개념에는 원활한 통합을 위해 Vue를 로드 하고 Vue 인스턴스를 HTML ID와 연결하는 것이 포함됩니다.

<?php

function themeslug_enqueue_style() {
    wp_enqueue_style( 'my-theme', 'style.css', false );
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>

WP 템플릿의 상단과 하단 부분은 다음과 같습니다.

<html>
<div id="app">
  {{ message }}
</div>
</html>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

3. 별도의 프런트엔드 웹사이트 만들기

마지막으로, 일부에게는 분명하지만 모두에게는 그렇지 않을 수 있는 기능을 강조하는 것이 중요합니다.

버전 4.7부터 WordPress에는 REST API가 통합되어 개발자가 플러그인의 도움으로 다양한 엔드포인트에 액세스하고 게시물, 페이지 및 사용자 정의 필드와 같은 데이터를 검색할 수 있습니다. 이 기능은 Headless CMS의 개념과 일치합니다.

실제로 이 기능의 적용 범위는 처음에 생각했던 것 이상으로 확장됩니다. WordPress REST API를 사용하는 별도의 프런트엔드는 다양한 형태를 취할 수 있습니다.

  • SPA(단일 페이지 애플리케이션) 앱 또는 웹사이트
  • SSR(서버측 렌더링) 앱 또는 웹사이트
  • JAMStack 아키텍처를 따르는 정적으로 생성된 웹사이트
  • 프로그레시브 웹 앱(PWA)
  • 모바일 애플리케이션
  • 더 간단하거나 더 빠른 템플릿 엔진을 활용하는 또 다른 모놀리식 백엔드

본질적으로 API를 사용할 수 있고 프런트엔드에 대한 모든 권한을 보유하는 모든 클라이언트가 실행 가능합니다. WordPress는 기본적으로 백엔드 API와 유사한 데이터 소스 역할을 합니다. 특히 ACF(Advanced Custom Fields) 또는 Pod와 같은 플러그인은 API를 통해 사용자 정의 필드를 노출할 수도 있습니다.

또한 WordPress API에 사용자 정의 엔드포인트를 추가하고 nonce 및 기타 필수 구성 요소 생성을 포함하여 인증 시스템을 활용할 수 있는 유연성이 있습니다.

마무리

결론적으로, Vue.js와 WordPress의 통합은 개발자에게 WordPress 생태계 내에서 동적 및 대화형 웹 경험을 만들기 위한 강력한 솔루션을 제공합니다. 단순성과 유연성으로 유명한 Vue.js는 개발자가 구성 요소 기반 아키텍처를 통해 최신 웹 애플리케이션을 효율적으로 쉽게 구축할 수 있도록 지원합니다.

Divi WordPress Theme