예시 프로젝트에 미니 앱 프로그래밍 원칙 적용

Thomas Steiner

참고: 이 게시물은 각 문서가 이전 기사를 기반으로 하는 기사 컬렉션의 일부입니다. 이 페이지에 방금 방문하셨다면 처음부터 읽어 보시기 바랍니다.

앱 도메인

미니 앱의 프로그래밍 방식을 보여주기 위해 작으면서도 충분히 완전한 앱 아이디어가 필요했습니다. 고강도 인터벌 트레이닝 (HIIT) 보다 적은 회복 기간을 두고 짧은 기간의 격렬한 무산소 운동을 번갈아 하는 심혈관 운동 전략입니다. 많은 HIIT 교육에서는 HIIT 타이머를 사용합니다(예: 이 30분 온라인 세션). (출처: The Body Coach TV YouTube 채널)

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 활성 기간입니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 안정시 기간입니다.

HIIT Time 예시 앱

이 장에서는 이러한 HIIT 타이머 애플리케이션의 기본 예를 빌드했습니다. 'HIIT 시간' 사용자가 다양한 타이머를 정의하고 관리할 수 있습니다. 항상 높은 강도와 낮은 강도의 구간으로 이루어져야 합니다. 학습 세션을 위해 하나를 선택합니다 이 앱은 탐색 메뉴, 탭 바, 다음 세 페이지가 있는 반응형 앱입니다.

• 운동: 운동 중 활성 페이지입니다. 이를 통해 사용자는 타이머 중 하나를 선택할 수 있습니다. 세 가지 진도 고리(세트 수, 활동 기간 및 휴식 기간)가 있습니다.
• 타이머: 기존 타이머를 관리하고 사용자가 새 타이머를 만들 수 있도록 허용합니다.
• 환경설정: 음향 효과와 음성 출력을 전환하고 언어와 테마를 선택할 수 있습니다.

다음 스크린샷은 애플리케이션의 모습을 보여줍니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> HIIT 시간 '운동' 세로 모드의 탭

를 통해 개인정보처리방침을 정의할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> HIIT 시간 '운동' 탭을 가로 모드로 재생합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> HIIT 시간 타이머 관리

앱 구조

위에서 설명한 대로 앱은 탐색 메뉴, 탭 바 및 세 개의 페이지로 구성되어 그리드로 정렬됩니다. Navbar와 Tabbar는 각각 iframe이 3개 있는 <div> 컨테이너가 있는 iframe으로 구현됩니다. 로 표시되며, 이 중에서 하나가 항상 표시되고 탭바의 활성 선택에 따라 달라집니다. about:blank를 가리키는 최종 iframe은 동적으로 생성된 인앱 페이지에 게재되며, 이는 기존 콘텐츠를 수정하는 데 필요합니다. 새로운 타이머를 만들 수 있습니다. 저는 이 패턴을 MPSPA (Multi-Page Single-Page App)라고 부릅니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 앱은 iframe 6개로 구성됩니다.

구성요소 기반 lit-html 마크업

각 페이지의 구조는 lit-html Scaffold로 실현됩니다. 런타임 시 동적으로 평가됩니다 lit-html의 배경 정보로 사용할 수 있는 이 라이브러리는 효율적이고 표현력이 뛰어나며 확장 가능한 JavaScript용 HTML 템플릿 라이브러리입니다. HTML 파일에서 직접 사용함으로써 멘탈 프로그래밍 모델은 직접적으로 출력 지향적입니다. 프로그래머는 최종 출력이 어떻게 표시될지에 관한 템플릿을 작성합니다. 그러면 lit-html이 데이터를 기준으로 동적으로 공백을 채우고 이벤트 리스너를 연결합니다. 이 앱은 Shoelace의 <sl-progress-ring>와 같은 서드 파티 맞춤 요소나 <human-duration>라는 자체 구현 맞춤 요소를 사용합니다. 맞춤 요소에는 선언적 API (예: 진행률 링의 percentage 속성)가 있으므로 아래 목록에서 볼 수 있듯이 lit-html과 함께 잘 작동합니다.

<div>
  <button class="start" @click="${eventHandlers.start}" type="button">
    ${strings.START}
  </button>
  <button class="pause" @click="${eventHandlers.pause}" type="button">
    ${strings.PAUSE}
  </button>
  <button class="reset" @click="${eventHandlers.reset}" type="button">
    ${strings.RESET}
  </button>
</div>

<div class="progress-rings">
  <sl-progress-ring
    class="sets"
    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
  >
    <div class="progress-ring-caption">
      <span>${strings.SETS}</span>
      <span>${data.sets}</span>
    </div>
  </sl-progress-ring>
</div>

드림 <ph type="x-smartling-placeholder">

</ph>

위의 마크업에 해당하는 페이지의 렌더링된 섹션입니다.

프로그래밍 모델

각 페이지에는 구현을 제공하여 lit-html 마크업을 수명으로 채우는 상응하는 Page 클래스가 있습니다. 각 페이지에 대한 데이터를 제공합니다. 이 클래스는 onShow(), onHide(), onLoad(), onUnload()와 같은 수명 주기 메서드도 지원합니다. 페이지는 선택적으로 페이지별 상태 및 전역 상태를 공유하는 역할을 하는 데이터 스토어에 액세스할 수 있습니다. 모든 문자열은 중앙에서 관리되므로 국제화가 기본 제공됩니다. 앱이 iframe 표시 여부를 전환하기만 하면 라우팅은 브라우저에서 무료로 처리됩니다. 동적으로 생성된 페이지의 경우 자리표시자 iframe의 src 속성을 변경합니다. 다음은 동적으로 생성된 페이지를 닫는 코드의 예입니다.

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

드림 <ph type="x-smartling-placeholder">

</ph>

iframe에서 iframe으로 이동이 발생합니다.

스타일 지정

페이지 스타일은 자체 범위가 지정된 CSS 파일에서 페이지별로 지정됩니다. 즉, 일반적으로 요소를 요소 이름으로 직접 처리할 수 있지만 다른 페이지와 충돌이 발생할 수 없기 때문입니다. 전체 스타일이 각 페이지에 추가되므로 font-family 또는 box-sizing과 같은 중심 설정이 반복적으로 선언할 필요가 없습니다. 테마와 어두운 모드 옵션도 여기에 정의됩니다. 아래 목록은 다양한 양식 요소를 배치하는 환경설정 페이지의 규칙을 보여줍니다. 그리드에 표시됩니다.

main {
  max-width: 600px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  margin-block-end: 1rem;
}

label {
  text-align: end;
  grid-column: 1 / 2;
}

input,
select {
  grid-column: 2 / 3;
}

드림 <ph type="x-smartling-placeholder">

</ph>

모든 페이지는 자신만의 세계입니다. 스타일은 요소 이름과 함께 직접 지정됩니다.

화면 wake lock

운동 중에는 화면이 꺼지면 안 됩니다. HIIT Time은 이를 지원하는 브라우저에서 화면 wake lock을 통해 이를 인식합니다. 아래 스니펫은 이를 수행하는 방법을 보여줍니다.

if ('wakeLock' in navigator) {
  const requestWakeLock = async () => {
    try {
      page.shared.wakeLock = await navigator.wakeLock.request('screen');
      page.shared.wakeLock.addEventListener('release', () => {
        // Nothing.
      });
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };
  // Request a screen wake lock…
  await requestWakeLock();
  // …and re-request it when the page becomes visible.
  document.addEventListener('visibilitychange', async () => {
    if (
      page.shared.wakeLock !== null &&
      document.visibilityState === 'visible'
    ) {
      await requestWakeLock();
    }
  });
}

애플리케이션 테스트

HIIT Time 애플리케이션은 GitHub에서 사용할 수 있습니다. 새 창에서 데모를 실행해 볼 수 있습니다. 또는 바로 아래 iframe 삽입에 삽입할 수도 있습니다. 이는 휴대기기를 시뮬레이션하는 것입니다.

를 탭합니다.

성공: 마지막 장에서는 미니 앱에 관한 이 컬렉션을 결론하고 마무리합니다.

감사의 말씀

이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.