Oracle JET 가상 DOM 앱의 콘텐츠 표시 또는 숨기기

소개

Oracle JET(Oracle JavaScript Extension Toolkit)에는 반응형 화면 너비 및 범위 작업을 위한 유틸리티가 포함된 ResponsiveUtils 모듈이 포함되어 있습니다. 예를 들어, 특정 화면 너비 또는 범위는 프레임워크 매체 질의 문자열을 생성하기 위해 getFrameworkQuery() 메소드로 전달할 수 있는 프레임워크 질의 키로 설명됩니다.

Window 인터페이스에는 가상 DOM 앱이 실행 중인 창을 나타내는 window 변수가 포함됩니다. 프레임워크 매체 질의를 window.matchmedia() 메소드로 전달하면 가상 DOM 앱이 실행 중인 창의 화면 너비가 지정된 너비 또는 범위와 일치하는지 여부를 확인하는 데 사용할 수 있는 속성이 있는 객체가 반환됩니다.

이 객체와 Preact 후크, 상태 및 이벤트 리스너를 사용하여 화면 크기가 변경될 때 가상 DOM 앱이 실행 중인 화면의 크기를 모니터하고 반응적으로 다른 콘텐츠를 표시할 수 있습니다.

목표

이 자습서에서는 Preact 후크 및 Oracle JET ResponsiveUtils 모듈을 사용하여 가상 DOM 앱이 실행 중인 창의 크기 변화를 모니터하는 방법에 대해 알아봅니다. 그런 다음 중간 또는 작은 화면을 사용할 때 앱의 활동 항목 컨테이너 구성 요소를 반응적으로 로드하도록 조정합니다.

필요 조건

Node.js 설치가 포함된 가상 DOM 앱을 생성하도록 설정된 개발 환경
Google Chrome 웹 브라우저가 설치되고 기본 웹 브라우저로 설정됨
Oracle JET Developer Cookbook에 대한 액세스
이 학습 경로에서 이전 자습서 완료: 다양한 화면 크기를 위해 구성요소 컨테이너 형식 지정
완성된 앱 jet-virtual-dom-app-responsive-design-final.zip이 선택적으로 다운로드됨

작업 1: 화면 너비 모니터 및 조건부 컨텐트 표시

Preact 후크 및 Oracle JET ResponsiveUtils 모듈을 사용하여 브라우저 창의 화면 너비를 찾고 크기가 중간 또는 작은 경우 모니터합니다. 그런 다음 상태를 사용하여 ActivityItemContainer 구성 요소에서 화면 크기를 추적하고 중간 또는 작은 화면에 대한 약식 항목 목록을 사용하여 복구된 작업 항목 컨테이너를 렌더링합니다.

Oracle JET Cookbook을 열고 Cookbook 홈 페이지로 이동합니다. 메뉴 모음에서 프레임워크를 누른 다음 반응형 동작을 누르고 반응형 로드를 누릅니다.
ResponsiveUtils 네임스페이스에 대한 API 설명서에 접근할 수 있습니다. 메소드 섹션으로 스크롤하고 getFrameworkQuery 메소드에 대해 읽습니다.
JET-Virtual-DOM-app/src/components/ActivityItem 디렉토리로 이동하여 편집기에서 ActivityItemContainer.tsx 파일을 엽니다.

파일 상단에 useRef, useState 및 useEffect 후크에 대한 import 문과 Oracle JET ResponsiveUtils 모듈을 추가합니다.

import { useRef, useState, useEffect } from "preact/hooks";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";

ActivityItemContainer 함수 위에 sm_md_view 변수를 추가하여 화면 크기가 크거나 큰 크기가 아닌 중간 또는 작은 크기일 때 컨테이너가 표시할 콘텐츠를 보유합니다.

// Display this content for medium and narrower screen widths
const sm_md_view =
  <div id="sm_md" class="oj-flex-item oj-sm-padding-4x-start oj-md-6 oj-sm-12" 
                  style="background-color:lightcyan; padding: 10px; font-size: 10px">
    <h3 id="activityDetailsHeader">Activity Details</h3>
    <div class="item-display no-wrap">
      <ul>
        <li class="li-item">SureCatch Baseball Glove</li>
        <li class="li-item">Western R16 Helmet</li>
        <li class="li-item">Western C1 Helmet</li>
        <li class="li-item">Western Bat</li>
      </ul>
    </div>
  </div>;

주: 여기 있는 것처럼 인라인이 아닌 별도의 파일에 CSS 스타일을 정의하는 것이 좋습니다.

ActivityItemContainer 함수의 return 문 앞에 다음 코드를 추가하여 가져온 Preact 후크와 ResponsiveUtils 모듈을 사용합니다.

const ActivityItemContainer = () => {

  const mediaQueryRef = useRef<MediaQueryList>(window.matchMedia(ResponsiveUtils.getFrameworkQuery("md-down")));

  const [isSmallMediumWidth, setIsSmallMediumWidth] = useState(mediaQueryRef.current.matches);

  useEffect(() => {
    mediaQueryRef.current.addEventListener("change", handleMediaQueryChange);
    return (() => mediaQueryRef.current.removeEventListener("change", handleMediaQueryChange));
  }, [mediaQueryRef]);     

useEffect 후크에서 다음 두 함수를 추가합니다.

function handleMediaQueryChange(e: MediaQueryListEvent) {
  setIsSmallMediumWidth(e.matches);
}

function getDisplayType() {
  return (isSmallMediumWidth ? false : true);
};

마지막으로 ActivityItemContainer 함수의 return 문을 수정하여 현재 작업 항목 콘텐츠를 렌더링하거나, 화면 크기가 크거나, 화면 크기가 중간이거나 작은 경우 sm_md_view 변수에서 콘텐츠를 렌더링합니다.

return getDisplayType() ? (
  <div
    id="activityItemsContainer"
    class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
    <div id="container" class="item-display no-wrap">
      <h3>Activity Items</h3>
      <ul>
        <li class="li-item">Louisville Slugger Bat</li>
        <li class="li-item">SureCatch Baseball Glove</li>
        <li class="li-item">Baseball</li>
        <li class="li-item">Western R16 Helmet</li>
        <li class="li-item">Western C1 Helmet</li>
        <li class="li-item">Sure Fire Ball (Set of 4)</li>
      </ul>
    </div>
  </div>
) : sm_md_view;

파일을 저장하고 닫습니다.

코드는 responsive-screen-activity-items.txt와 유사해야 합니다.

작업 2: 가상 DOM 앱 실행

터미널 window에서 JET-Virtual-DOM-app 디렉토리로 변경하고 가상 DOM 앱을 실행합니다.
```
npx @oracle/ojet-cli serve
```
Oracle JET 툴링은 로컬 웹 브라우저에서 가상 DOM 앱을 실행합니다. 큰 화면에서 콘텐츠를 보면 이전 자습서 끝에 표시된 것과 동일한 콘텐츠가 표시됩니다.

그림 large_screen_view.png에 대한 설명
sm_md_view 변수에 컨텐트를 표시하려면 브라우저 window의 가장자리가 중간 크기일 때까지 끕니다. 활동 항목 컨테이너의 새 활동 세부정보 머리글 아래에 있는 약식 활동 항목 목록과 컨테이너의 새 광원 시안색을 확인합니다.

그림 medium_screen_view.png에 대한 설명
그런 다음 Chrome DevTools를 사용하여 작은 화면 크기로 가상 DOM 앱을 봅니다. 화면을 최대화한 다음 페이지를 마우스 오른쪽 단추로 누르고 검사를 선택하여 개발자 도구에서 페이지 뷰를 표시합니다.
Chrome DevTools 도구 모음에서 을 눌러 장치 모드로 전환합니다.

그림 device_mode_lens.png에 대한 설명
장치 모드의 화면 에뮬레이터에서 차원 드롭다운 메뉴를 누릅니다.

그림 viewport.png에 대한 설명
드롭다운 메뉴에서 픽셀 5와 같이 화면 크기가 작은 장치를 선택하여 화면 에뮬레이터에서 콘텐츠가 변경되었는지 확인합니다.

그림 small_screen_view.png에 대한 설명

작은 화면 크기에서 앱의 방향 및 레이아웃이 변경되고 짧은 항목 목록이 작업 세부정보 머리글 아래에 표시됩니다. 컨테이너는 밝은 청록색입니다.
터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.
브라우저 창이나 탭을 닫습니다.
반응형 설계 기능이 있는 완성된 가상 DOM 앱은 jet-virtual-dom-app-responsive-design-final.zip와 유사해야 합니다.

작업 3: (선택 사항) 복원된 앱에서 가상 DOM 앱 실행

제공된 코드에서 완료된 Oracle JET 가상 DOM 앱을 실행하려는 경우 다운로드된 아카이브 파일에서 앱을 복원할 수 있습니다. 스트립 및 압축 Oracle JET 가상 DOM 앱을 사용하려면 추출된 앱 내에서 Oracle JET 툴과 필요한 라이브러리 및 모듈을 포함하여 프로젝트 종속성을 복원해야 합니다.

jet-virtual-dom-app-responsive-design-final.zip 파일을 다운로드하고 완료된 앱의 콘텐츠를 JET-Virtual-DOM-app 폴더로 추출합니다.
터미널 window에서 JET-Virtual-DOM-app 폴더로 이동하여 Oracle JET 가상 DOM 앱을 복원합니다.
```
npx @oracle/ojet-cli restore
```
확인을 기다립니다.
```
$ Success: Restore complete
```
앱을 실행할 준비가 되었습니다.
앱을 실행하고 브라우저에서 테스트합니다.
```
npx @oracle/ojet-cli serve
```
실행 중인 앱을 표시하는 브라우저 창이나 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

다음 단계

이 학습 경로의 다음 자습서로 이동하려면 여기를 클릭하십시오.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 살펴보거나 Oracle Learning YouTube 채널에서 보다 무료 학습 컨텐츠에 접근할 수 있습니다. 또한 education.oracle.com/learning-explorer을 방문하여 Oracle Learning Explorer가 됩니다.

제품 설명서는 Oracle Help Center를 참조하십시오.

제목 및 저작권 정보

Show or hide content in the Oracle JET virtual DOM app

F72923-01

December 2022