정적 리소스 사용

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

정적 리소스의 정의와 필요한 이유에 대해 설명할 수 있습니다.
개별 정적 리소스와 압축된 정적 리소스의 차이점을 설명할 수 있습니다.
정적 리소스를 만들고 업로드할 수 있습니다.
Visualforce 페이지에 정적 리소스를 추가할 수 있습니다.

참고

한국어로 학습하시겠어요? 이 배지에서는 Trailhead 실습 과제 검증이 영어로 진행됩니다. 참조용 번역이 괄호로 제공됩니다. 영문으로 표시된 값을 복사하여 붙여 넣은 다음 Trailhead Playground 언어를 영어로, 로캘을 미국으로 전환하세요. 여기에 나와 있는 지침을 따르세요.

원하는 언어로 Trailhead 사용하기 배지를 확인해 현지화된 Trailhead 경험을 활용하는 방법을 알아보세요.

정적 리소스 소개

정적 리소스를 사용하면 Visualforce 페이지에서 참조할 수 있는 컨텐츠를 업로드할 수 있습니다. 리소스는 아카이브(예: .zip 및 .jar 파일), 이미지, 스타일시트, JavaScript 및 기타 파일일 수 있습니다.

정적 리소스는 파일의 CDN(컨텐츠 배포 네트워크) 역할을 하는 Lightning Platform에서 관리 및 배포합니다. 캐싱 및 배포는 자동으로 처리됩니다.

정적 리소스는 Visualforce에서 직접 사용하거나 URLFOR()과 같은 함수에 대한 매개변수로 사용할 수 있는 $Resource 전역 변수를 사용하여 참조됩니다.

단순 정적 리소스 만들기 및 업로드

개별 정적 자산에 대한 간단한 독립 실행형 정적 리소스를 만듭니다.

정적 자산이 다른 자산과 관련이 없는 경우(즉, 아이콘 그룹과 같은 유사한 자산 집합의 일부가 아닌 경우) 독립 실행형 정적 리소스를 만드는 것이 가장 쉽습니다.

http://jquery.com/download/에서 jQuery JavaScript 라이브러리의 현재 버전을 다운로드합니다.
Setup(설정)의 Quick Find(빠른 찾기) 상자에 Static Resources를 입력한 다음 Static Resources(정적 리소스)를 선택하고 New(새로 만들기)를 클릭합니다.
이름에 jQuery를 입력합니다.
Choose File(파일 선택)을 클릭한 다음 이전에 다운로드한 jQuery JavaScript 파일을 선택합니다.
Cache Control(캐시 관리) 메뉴가 나타나면 Public(공개)을 선택합니다. 이 항목은 일부 조직에서 볼 수 없습니다.
Save(저장)를 클릭합니다.

이제 표현식에서 참조하여 Visualforce 페이지에서 사용할 수 있는 jQuery의 정적 리소스 버전이 있습니다(예: {!$Resource.jQuery }). 가장 좋은 점은 Visualforce 페이지를 변경하지 않고도 정적 리소스를 편집하고 jQuery 3.1.2로 업데이트할 수 있다는 것입니다. 정적 리소스 참조는 세부 사항을 처리합니다.

Visualforce 페이지에 정적 리소스 추가

$Resource 전역 변수와 점 표기법을 사용하여 독립 실행형 정적 리소스를 참조합니다.

Developer Console을 열고 File(파일) | New(새로 만들기) | Visualforce Page(Visualforce 페이지)를 클릭하여 새 Visualforce 페이지를 만듭니다. 페이지 이름에 HelloJQuery를 입력합니다.

편집기에서 모든 마크업을 다음으로 바꿉니다.

<apex:page>
    <!-- Add the static resource to page's <head> -->
    <apex:includeScript value="{!Resource.jQuery }"/>
    <!-- A short bit of jQuery to test it's there -->
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function() {
            jQuery("#message").html("Hello from jQuery!");
        });
    </script>
    <!-- Where the jQuery message will appear -->
    <h1 id="message"></h1>
</apex:page>

Preview(미리보기)를 클릭하여 변경 시 볼 수 있는 페이지 미리보기를 엽니다. jQuery의 짧은 메시지를 표시하는 새 창이 열립니다.

이 페이지는 Visualforce 페이지에 JavaScript 리소스를 포함하는 방법을 설명하는 것을 제외하고는 많은 작업을 수행하지 않습니다. $Resource 전역 변수를 사용하는 것이 중요합니다. <apex:includeScript>(JavaScript 파일의 경우), <apex:stylesheet>(CSS 스타일시트의 경우) 또는<apex:image>(그래픽 파일의 경우) 태그의 리소스 이름과 결합하도록 점 표기법을 사용하여 페이지에 추가합니다.

압축된 정적 리소스 만들기 및 업로드

일반적으로 함께 업데이트되는 관련 파일을 그룹화하기 위해 압축된 정적 리소스를 만듭니다.

정적 자산이 관련 항목 집합(예: 애플리케이션 아이콘 집합 또는 복잡한 JavaScript 라이브러리)인 경우 압축된 정적 리소스를 만드는 것이 가장 좋습니다. 함께 그룹화할 모든 요소가 포함된 zip 파일을 만들고 하나의 zip 파일만 Lightning Platform에 업로드합니다.

ZIP 형식의 jQuery Mobile JavaScript 라이브러리의 현재 버전을 http://jquerymobile.com/download/에서 다운로드합니다.
zip 파일을 열고 /demos/ 디렉터리와 해당 컨텐츠를 삭제합니다.
폴더를 압축하고 이름을 jquery.zip으로 변경합니다.
Setup(설정)의 Quick Find(빠른 찾기) 상자에 Static Resources를 입력한 다음 Static Resources(정적 리소스)를 선택하고 New(새로 만들기)를 클릭합니다.
이름에 jQueryMobile을 입력합니다.
Choose File(파일 선택)을 클릭한 다음 jquery.zip 파일을 선택합니다.
Cache Control(캐시 관리) 메뉴가 나타나면 Public(공개)을 선택합니다. 이 항목은 일부 조직에서 볼 수 없습니다.
Save(저장)를 클릭합니다.

이제 Visualforce 페이지에서 사용할 수 있는 jQuery Mobile의 정적 리소스 버전이 있습니다. 다음에는 압축된 정적 리소스 내부의 개별 파일을 참조하는 방법을 살펴보겠습니다.

Visualforce 페이지에 압축된 정적 리소스 추가

$Resource 전역 변수와 URLFOR() 함수를 사용하여 압축된 정적 리소스 내의 항목을 참조합니다.

URLFOR() 함수는 압축된 정적 리소스에 대한 참조와 해당 항목에 대한 상대 경로를 결합하여 정적 리소스를 참조하는 Visualforce 구성 요소와 함께 사용할 수 있는 URL을 만들 수 있습니다. 예를 들어 URLFOR($Resource.jQueryMobile, 'images/ico-png/cloud-black.png')는 <apex:image>구성 요소에서 사용할 수 있는 압축된 정적 리소스 내의 특정 그래픽 자산에 대한 URL을 반환합니다. <apex:includeScript> 및 <apex:stylesheet> 구성 요소에 대한 JavaScript 및 스타일시트 파일에 유사한 URL을 구성할 수 있습니다.

현재 버전의 jQuery Mobile JavaScript 라이브러리를 다운로드하지 않은 경우 압축된 정적 리소스 만들기 및 업로드 섹션의 지침에 따라 다운로드합니다. 정적 리소스로 추가합니다.
Developer Console을 열고 File(파일) | New(새로 만들기) | Visualforce Page(Visualforce 페이지)를 클릭하여 새 Visualforce 페이지를 만듭니다. 페이지 이름에 jQueryMobileResources를 입력합니다.

편집기에서 모든 마크업을 다음으로 바꿉니다.

<apex:page showHeader=”false” sidebar=”false” standardStylesheets=”false”>
    <!-- Add static resource to page’s <head> -->
    <apex:stylesheet value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.css’)}”/>
    <apex:includeScript value=”{!$Resource.jQueryMobile }”/>
    <apex:includeScript value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.js’)}”/>
    <div style=”margin-left: auto; margin-right: auto; width: 50%”>
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt=”eye” title=”eye”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/eye-black.png’)}”/>
            <apex:image alt=”heart” title=”heart”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/heart-black.png’)}”/>
            <apex:image alt=”cloud” title=”cloud”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/cloud-black.png’)}”/>
        </p>
    <!-- Display images referenced by CSS styles, all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-action”>action</button>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-start”>star</button>
    </div>
</apex:page>

이 예제에서는 jQuery Mobile Javascript 라이브러리 버전 1.4.5를 사용합니다. 최신 버전을 사용하는 경우 코드의 4행과 7행에서 버전 번호를 업데이트합니다.

Preview(미리보기)를 클릭하여 변경 시 볼 수 있는 페이지 미리보기를 엽니다. 새 창이 열리고 jQuery Mobile 정적 리소스의 몇 가지 이미지가 표시됩니다.

이 페이지에서는 간소화를 위해 Visualforce 페이지에서 압축된 정적 리소스를 참조하는 방법만 보여줍니다. 예를 들어 Visualforce와 jQuery Mobile 등의 JavaScript 라이브러리를 결합하는 방법에 대해 자세히 알아보려면 추가 리소스를 참조하세요.

리소스