사용한 것 (환경)

cordova

visualStudioCode

windows10

Android

튜토리얼을 번역하면서 시도

튜토리얼의 페이지는 아래와 같다.

Module 7: Setting Up a Single-Page Application

마지막 튜토리얼.

Cordova 튜토리얼을 시도해보십시오.

환경 구축에 대해서는 별도 정리하고 있으므로 아래 참조.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

Module 7: Setting Up a Single-Page Application

단일 페이지 애플리케이션 설정

A "Single-Page Application"is a web application that lives within a single HTML page.
"단일 페이지 애플리케이션"은 하나의 HTML 페이지로 구성된 웹 애플리케이션입니다.

The "views"of the application are injected into and removed from the DOM as needed as the user navigates through the app.
사용자가 애플리케이션을 통과할 때 애플리케이션의 '보기'는 DOM에서 필요에 따라 삽입되거나 제거됩니다.

A single-page application architecture is particularly well suited for mobile apps:
'단일 페이지 애플리케이션' 아키텍처는 모바일 앱에 특히 적합합니다.

구체적인 단일 페이지 애플리케이션에 대한 설명은 아래 페이지를 참조하십시오.
SPA (Single Page Application)의 기본

The absence of page refreshes provides a more fluid and closer to native experience.
페이지 새로고침이 없으면 보다 유동적이며 네이티브 환경에 가깝습니다.

The UI is entirely created at the client-side with no dependency on a server to create the UI, making it an ideal architecture for applications that work offline.
UI를 만드는 서버에 의존하지 않고 완전히 클라이언트 측에서 UI를 만들면 최적의 아키텍처가되어 오프라인으로 작동합니다.
→ 조금 번역의 일본어가 잘 되지 않습니다만, 요컨대 서버에 의존하지 않는 것으로 독립성이 높아져 오프라인에서도 동작 가능하다는 것입니다.

In this module, we set up the basic infrastructure to turn Employee Directory into a single-page application.
이 모듈은 Employee Directory를 단일 페이지 응용 프로그램으로 변경하는 기본 인프라를 구성합니다.

1. index.html:body 태그에서 HTML 마크업을 삭제합니다. (그러나 스크립트 태그를 제외합니다.)

2. app.js의 immediate 함수에서 renderHomeView()라는 함수를 findByName 함수 바로 뒤에 정의합니다.
프로그래밍 방식으로 홈 뷰 마크업을 body 요소에 추가하는 함수를 구현합니다.

아래의 코드를 보면 알 수 있습니다만, 요컨대 1.에서 삭제한 부분을 더하는 코드를 그대로 쓰는 것입니다.

function renderHomeView() {
    var html =
      "<h1>Directory</h1>" +
      "<input class='search-key' type='search' placeholder='Enter name'/>" +
      "<ul class='employee-list'></ul>";
    $('body').html(html);
    $('.search-key').on('keyup', findByName);
}

3. 데이터 서비스 초기화 로직을 변경합니다.
서비스가 성공적으로 초기화되면 renderHomeView() 함수를 호출하여 프로그램에서 홈 뷰를 표시합니다.

app.js의 Local Variables 블록을 다음과 같이 변경합니다.

var service = new EmployeeService();
service.initialize().done(function () {
    renderHomeView();
});

4. renderHomeView() 함수 내에서 keyup 이벤트 등록을 이동했으므로 Event Registration 섹션에서 원래 keyup 이벤트 등록을 삭제합니다.

5. 도움말 버튼이 더 이상 표시되지 않으므로 이벤트 등록 섹션의 도움말 버튼 클릭 이벤트 핸들러를 삭제합니다.

6. 응용 프로그램을 테스트합니다.

실제 화면 표시는 이런 느낌입니다.

참고 URL

Module 7: Setting Up a Single-Page Application

Cordova 튜토리얼을 시도해보십시오.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

SPA (Single Page Application)의 기본