다양한 화면 크기로 Oracle JET 웹 앱 테스트

소개

반응형 레이아웃은 다양한 장치에서 서로 다른 화면 크기에 맞게 자체적으로 조정됩니다. Google Chrome 웹 브라우저에서 Oracle JET 웹 앱을 실행하면 Google Chrome Developer Tools(Chrome DevTools)에서 선택한 화면 크기가 다른 웹 앱의 응답성을 테스트할 수 있습니다.

목표

이 사용지침서에서는 다양한 화면 크기로 개발된 Oracle JET 웹 앱의 반응형 설계를 테스트합니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
Oracle JET Developer Cookbook에 액세스
JET_Web_Application 폴더를 생성할 수 있도록 이 학습 경로에 이전 자습서 완료

작업 1: 웹 앱 실행

Oracle JET 웹 앱에는 반응형 레이아웃 및 구성요소가 있으며 다양한 웹 브라우저에서 실행할 수 있습니다. 이 자습서에서는 Chrome 브라우저 및 DevTools를 사용하여 다양한 화면 크기로 앱을 확인합니다.

터미널 창에서 JET_Web_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
Oracle JET 툴링으로 Google Chrome에서 웹 앱을 실행합니다.

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

작업 2: 화면 크기 변경

Google Chrome 브라우저의 디버거 모드에서 다양한 화면 크기 및 장치에 대해 웹 앱의 응답성을 테스트할 수 있습니다. 다른 장치에서 앱을 실행하면 선택한 화면 크기에 대해 웹 앱 콘텐츠가 표시되고 텍스트 정렬은 화면 크기를 기반으로 합니다.

Google Chrome에서 Ctrl+Shift+I를 눌러 Chrome DevTools 창을 표시합니다.

그림 chrome-debmode.png에 대한 설명
Chrome DevTools 도구 모음에서 을 눌러 장치 모드로 전환합니다.

그림 device-mode-lens.png에 대한 설명
장치 모드의 화면 에뮬레이터에서 앱을 테스트할 특정 장치 또는 화면 크기를 선택합니다.

그림 views.png에 대한 설명
픽셀 5를 선택합니다.

활동 컨테이너에서 콘텐츠는 화면 끝에 정렬됩니다. 활동 항목 컨테이너에는 작은 화면과 중간 화면에 대한 목록 항목이 표시됩니다.

그림 small-screen.png에 대한 설명
iPad Air를 선택합니다.

활동 컨테이너에서 콘텐츠는 왼쪽 정렬됩니다. 활동 항목 컨테이너에는 작은 화면과 중간 화면에 대한 목록 항목이 표시됩니다. 활동 항목 컨테이너의 경우 패딩이 적용됩니다.

그림 medium-screen.png에 대한 설명
허브 최대 중첩을 선택합니다.

활동 컨테이너에서 콘텐츠는 왼쪽 정렬됩니다. 활동 항목 컨테이너에는 큰 화면과 큰 화면의 목록 항목이 표시됩니다.

large-screen.png 그림에 대한 설명
Chrome DevTools 도구 모음에서 을 눌러 장치 모드를 종료합니다.
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

추가 학습 자원

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

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

제목 및 저작권 정보

Test the Oracle JET web application on different screen sizes

F53147-01

February 2022