설치 및 연결 가이드

DEWP v0.4.x

DEWP 라이브러리를 프로젝트에 설치하고 연결하는 방법을 단계별로 설명합니다.

🚀 설치 방법

1) NPM 설치 (권장)

# 프로덕션 의존성으로 설치
npm install designbase-wp-library

# 개발 의존성으로 설치
npm install --save-dev designbase-wp-library

# Yarn
yarn add designbase-wp-library

# pnpm
pnpm add designbase-wp-library

2) CDN 연결

최신 버전 (권장)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>

jsDelivr 최신

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/css/dewp.min.css">
<script src="https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/js/dewp.min.js"></script>

특정 버전 예시

<link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@0.4.1/dist/css/dewp.min.css">
<script src="https://unpkg.com/designbase-wp-library@0.4.1/dist/js/dewp.min.js"></script>

🔗 HTML 연결 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DEWP 라이브러리 테스트</title>
  <link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css" />
</head>
<body>
  <button class="dewp-btn dewp-btn-primary">Primary</button>
  <script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>
  <script>
    if (window.DEWP) {
      console.log('DEWP 로드 완료', Object.keys(window.DEWP));
    }
  </script>
</body>
</html>

🧩 WordPress 연동

플러그인 (admin_enqueue_scripts)

wp_enqueue_style('dewp-library', 'https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css');
wp_enqueue_script('dewp-library', 'https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js', [], null, true);

테마 (wp_enqueue_scripts)

wp_enqueue_style('dewp-library', 'https://unpkg.com/designbase-wp-library@0.4.1/dist/css/dewp.min.css', [], '0.4.1');
wp_enqueue_script('dewp-library', 'https://unpkg.com/designbase-wp-library@0.4.1/dist/js/dewp.min.js', [], '0.4.1', true);

🔧 빌드 도구 통합

Webpack

import '@dewp/dist/css/dewp.min.css';

Vite

// index.html에 스크립트 추가
<script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>

CRA

<link rel="stylesheet" href="https://unpkg.com/designbase-wp-library@latest/dist/css/dewp.min.css">
<script src="https://unpkg.com/designbase-wp-library@latest/dist/js/dewp.min.js"></script>

📱 반응형/모바일

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

🔍 디버깅 체크리스트

🆕 최신 버전 요약

npm i designbase-wp-library@latest
https://unpkg.com/designbase-wp-library@latest/dist/{css|js}/dewp.min.{css|js}
https://cdn.jsdelivr.net/npm/designbase-wp-library@latest/dist/{css|js}/dewp.min.{css|js}

프로덕션에서는 고정 버전(@0.4.1 등) 사용을 권장합니다.

🔗 예제 바로가기

컴포넌트별 데모는 아래 링크에서 확인하세요.