Oracle JET 웹 앱 디버그

소개

이 사용지침서에서는 브라우저 개발자 툴을 사용하여 Oracle JET 앱을 디버그하는 방법을 보여줍니다.

브라우저에서 디버깅은 문제가 있는 코드를 빠르게 격리하고 솔루션을 테스트하는 데 유용합니다. 모든 브라우저에는 HTML, CSS(Cascading Style Sheets) 및 JavaScript 소스 보기 및 수정과 같은 작업을 수행하는 데 사용할 수 있는 개발자 도구가 있습니다. 예를 들어, Google Chrome 웹 브라우저에서 Oracle JET 웹 앱을 실행하는 경우 Google Chrome Developer Tools(Chrome DevTools)를 사용하여 각 구성 요소에 대한 페이지 소스 및 CSS 스타일을 검사할 수 있습니다.

목표

이 자습서를 완료하면 브라우저에서 웹 개발자 툴을 사용하여 Oracle JET 웹 앱에서 잘못된 코드를 찾고, 제공된 샘플 프로젝트 파일을 변경하고, 브라우저에서 라이브 변경사항을 검토하는 방법을 배웁니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
Google Chrome 설치
이 학습 경로에 이전 자습서가 포함되어 JET_Web_Application 폴더에 Oracle JET 웹 앱을 생성했습니다.
dashboard.html 샘플이 JET_Web_Application/src/ts/views 디렉토리로 다운로드되었습니다.

작업 1: 웹 앱 실행

JET_Web_Application/src/ts/views 디렉토리로 이동하여 dashboard.html 파일의 백업 복사본을 생성한 다음 제공된 dashboard.html 샘플 파일을 동일한 디렉토리로 다운로드합니다.
Oracle JET 툴링 서버 일괄 처리 작업이 터미널 창에서 실행 중이면 Ctrl+C을 누르고 메시지가 표시되면 y를 입력하여 서버 일괄 처리 작업을 종료합니다. 서버 일괄 처리 작업은 기존 앱 파일에 대한 개정만 인식합니다. 새 파일을 생성한 후 웹 앱을 다시 실행해야 합니다.
터미널 창의 JET_Web_Application 디렉토리에서 앱을 실행합니다.
```
$ ojet serve
```
브라우저에 압축된 차트가 포함된 샘플이 표시됩니다. 차트 선택 드롭다운 목록이 작동하지 않습니다.

그림 app-open.png에 대한 설명
기본 브라우저가 Google Chrome이 아닌 경우 브라우저를 열고 열린 페이지의 주소를 Google Chrome URL 주소 필드에 복사합니다.

작업 2: 웹 앱 디버그

Google Chrome 브라우저에서 Ctrl+Shift+I을 눌러 Developer Tools 창을 표시합니다. Chrome DevTools는 소스 코드를 표시합니다.
[요소] 패널에서 oj-chart 사용자 정의 HTML 요소를 찾을 때까지 중첩 태그를 확장합니다. oj-chart 사용자 정의 HTML 요소의 type 속성은 oj-select-single 사용자 정의 HTML 요소의 값을 사용하지 않고 bar로 하드 코딩됩니다. Chrome DevTools의 [스타일] 패널에서 차트 구성 요소 위치 다이어그램 아래에 있는 차트 구성 요소 width 속성이 135픽셀로 설정되어 있음을 알 수 있습니다.

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

oj-chart 사용자 정의 HTML 요소는 너비를 135px로 설정하고 차트 구성 요소를 페이지에 압축하는 HTML div 요소에 포함됩니다. 따라서 차트 구성요소는 상위 컨테이너에서 너비를 상속하고 스타일 너비 설정 100%를 무시합니다.

작업 3: 웹 앱 코드 수정

JET_Web_Application/src/ts/views 디렉토리로 이동하여 편집기에서 dashboard.html 파일을 엽니다.

oj-chart 사용자정의 HTML 요소를 검색합니다. 차트 유형을 [[val]]로 변경하고 태그를 둘러싸는 <div> 태그를 제거합니다.

. . .
</oj-select-single>
<oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto" 
          animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
  <template slot="itemTemplate" data-oj-as="item">
. . .

아직 없는 경우 appRootDir/src/css/app.css 파일의 끝에 스타일 클래스 chartStyle를 추가합니다.
```
.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
style 속성을 appRootDir/src/css/app.css 파일에서 스타일 속성을 참조하는 class 속성으로 바꿉니다.
```
<oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>
```
유효
```
<oj-chart id="barChart" type="[[val]]" . . . class="chartStyle">
```
이전 예제에서 설명한 인라인 style 속성을 사용하지 않고 구성 요소에 적용할 스타일을 별도의 CSS 파일에 배치하는 것이 좋습니다.
변경사항을 확인하려면 파일을 저장하고 브라우저에서 웹 앱의 업데이트된 라이브 출력을 봅니다.
샘플 파일을 원래 dashboard.html 파일로 바꿉니다.
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.
다음 튜토리얼을 위해 터미널 창을 열어 둡니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 찾아보거나 Oracle Learning YouTube channel에서 무료 학습 콘텐츠에 액세스할 수 있습니다. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer로 변경하십시오.

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

제목 및 저작권 정보

Debug an Oracle JET web app

F53106-01

February 2022