Oracle JET 가상 DOM 앱 디버그

소개

이 사용지침서에서는 브라우저 개발자 툴을 사용하여 Oracle JET(Oracle JavaScript Extension Toolkit) 가상 DOM 앱을 디버깅하는 방법을 보여줍니다.

브라우저의 디버깅은 문제 코드를 신속하게 격리하고 솔루션을 테스트하는 데 유용합니다. 모든 브라우저에는 HTML 보기 및 수정, CSS(Cascading Style Sheets) 및 Oracle JET 가상 DOM 앱의 기타 소스 코드 파일 등의 작업을 수행하는 데 사용할 수 있는 개발자 도구가 있습니다. 또한 가상 DOM 앱을 디버그할 때 브라우저의 개발자 도구에 추가 디버깅 도구를 제공하는 Preact 브라우저 확장 기능을 설치할 수 있습니다.

목표

이 자습서에서는 Preact 브라우저 확장 기능을 설치하고 브라우저에서 웹 개발자 도구를 사용하여 Oracle JET 가상 DOM 앱에서 잘못된 코드를 찾고 제공된 샘플 프로젝트 파일을 변경하며 브라우저에 표시되는 변경 사항을 검토하는 방법을 배웁니다.

필요 조건

• Node.js가 설치된 Oracle JET 가상 DOM 앱을 생성하도록 설정된 개발 환경
• Google Chrome 설치
• 이 학습 경로의 이전 자습서 완료, Oracle JET Virtual DOM 앱의 구성요소 데이터 바인딩
• index.tsx 샘플이 JET-Virtual-DOM-app/src/components/content 디렉토리에 다운로드됩니다.

작업 1: Preact DevTools 설치

Oracle JET 가상 DOM 앱에는 기본적으로 Chrome DevTools에서 추가 디버깅 도구를 제공하는 브라우저 확장자인 Preact DevTools에 대한 연결을 초기화하는 import 문이 포함됩니다. Preact가 https://preactjs.github.io/preact-devtools/에서 다운로드를 위해 제공하는 Chrome 브라우저 확장 프로그램을 설치합니다.

확장을 설치했으면 Chrome DevTools에 구성 요소 계층 뷰어와 같은 가상 DOM 앱을 디버깅하는 추가 도구를 제공하는 사전 작업 탭이 표시됩니다.

preact-tab.png 그림에 대한 설명

작업 2: Oracle JET Virtual DOM 앱 실행

1. JET-Virtual-DOM-app/src/components/content 디렉토리로 이동하여 index.tsx 파일의 백업 복사본을 만든 다음 제공된 index.tsx 샘플 파일을 동일한 디렉토리에 다운로드합니다.

2. Oracle JET 툴링 서버 일괄 처리 작업이 터미널 창에서 실행 중인 경우 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 서버 일괄 처리 작업을 종료합니다. 서버 일괄 처리 작업은 기존 앱 파일에 대한 개정만 인식합니다. 새 파일을 만든 후 앱을 다시 실행해야 합니다.

3. 터미널 window의 JET-Virtual-DOM-app 디렉토리에서 앱을 실행합니다.

   npx @oracle/ojet-cli serve
   

   브라우저에 막대 또는 파이 차트가 아닌 압축된 차트가 포함된 샘플이 표시됩니다. 차트 선택 드롭다운 목록이 작동하지 않습니다.

   

   그림 app-open.png에 대한 설명

4. 기본 브라우저가 Google Chrome이 아닌 경우 브라우저를 열고 열린 페이지의 주소를 Google Chrome URL 주소 필드에 복사합니다.

작업 3: 가상 DOM 앱 디버그

1. Google Chrome 브라우저에서 페이지에 표시되는 차트를 마우스 오른쪽 버튼으로 누르고 표시되는 컨텍스트 메뉴에서 검사를 선택합니다.

   Chrome DevTools가 열리고 가상 DOM 앱을 렌더링하는 HTML 및 CSS를 표시하는 요소 및 스타일 패널이 표시됩니다.

2. [요소] 패널에서 <oj-chart id="barChart"로 시작하는 요소를 선택하고 [스타일] 탭의 [차트] 구성요소 위치 다이어그램 아래에서 차트 구성요소 width 속성이 135 픽셀을 값으로 읽는 방법을 확인합니다.

   

   그림 스타일에 대한 설명-tab.png

   oj-chart 사용자정의 HTML 요소는 너비를 135px로 설정하는 HTML div 요소에 포함되며 차트 구성 요소가 페이지에서 압축된 것처럼 보입니다. 따라서 차트 구성 요소는 상위 컨테이너에서 해당 너비를 상속하며 100%의 width 스타일 설정을 무시합니다.

3. Chrome DevTools에서 Ctrl+Shift+P를 누르고 나타나는 메뉴에서 콘솔 표시를 선택합니다.

4. 다음 명령을 입력하여 단일 구성요소 선택의 value 속성 및 차트 구성요소의 type 속성에 대한 값을 결정합니다.

   document.getElementById("basicSelect").getProperty('value')
   // The Console returns 'pie' 
   document.getElementById("barChart").getProperty('type')
   // The Console returns 'funnel' 
   

   차트 구성요소의 type 속성 값은 단일 선택 구성요소에서 지정한 값과 일치해야 하지만 일치하지 않습니다.

5. 다음 명령을 입력하여 브라우저에서 Chart 구성 요소의 type 속성 값을 pie로 설정합니다.

   document.getElementById("barChart").setProperty('type', 'pie')
   

   브라우저가 업데이트되어 파이 차트가 표시됩니다. 그러면 차트 구성 요소의 type 속성이 설정된 소스 코드를 검사해야 합니다.

   

   그림 update-chart-console.png에 대한 설명

작업 4: 가상 DOM 앱 코드 수정

1. JET-Virtual-DOM-app/src/styles 디렉토리로 이동하여 편집기에서 app.css 파일을 엽니다.

2. 아직 없으면 스타일 클래스 chartStyle를 appRootDir/src/css/app.css 파일 끝에 추가합니다.

   .chartStyle {
      max-width:500px;
      width:100%;
      height:350px;
   }
   

3. JET-Virtual-DOM-app/src/components/content 디렉토리로 이동하여 편집기에서 index.tsx 파일을 엽니다.

4. oj-chart 요소를 검색하고 oj-chart 태그를 둘러싸는 <div style="width:135px;"> 태그를 제거합니다.

5. style 속성을 appRootDir/src/styles/app.css 파일의 스타일 속성을 참조하는 class 속성으로 바꿉니다.

   <oj-chart . . .	style="width:100%;height:350px;">
   

   결과

   <oj-chart . . . class="chartStyle">
   

   이전 예제에서 설명한 인라인 style 속성을 사용하는 대신 별도의 CSS 파일에서 구성요소에 적용할 스타일을 배치하는 것이 좋습니다.

6. oj-chart 요소에서 funnel 차트 유형에 대한 하드 코딩된 참조 대신 useState 후크가 추가한 val 변수를 참조하도록 type 속성을 수정합니다.

   <oj-chart
      id="barChart"
      type={val}
      // type="funnel"
   

   팁: 원하는 경우 index.tsx 파일의 차트 유형을 나열하는 chartTypeData 배열에 funnel를 추가하십시오.

   const chartTypeData = [
      { value: "bar", label: "Bar" },
      { value: "pie", label: "Pie" },
      { value: "funnel", label: "Funnel" },
    ];
   

7. 변경 사항을 확인하려면 파일을 저장하고 브라우저에서 가상 DOM 앱의 업데이트된 출력을 확인합니다.

8. 샘플 파일을 원래 index.tsx 파일로 바꿉니다.

9. 실행 중인 가상 DOM 앱을 표시하는 브라우저 창이나 탭을 닫습니다.

10. 터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

11. 다음 튜토리얼을 위해 터미널 창을 열어 둡니다.

다음 단계

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

추가 학습 자원

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

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

---

제목 및 저작권 정보

Debug an Oracle JET virtual DOM app

F62131-01

December 2022

Copyright © 2022, Oracle and/or its affiliates.