Angular 생태계
서비스 워커 & PWA

앱 기본 구조 패턴

앱 기본 구조 패턴은 빌드 시점에 라우팅 규칙을 사용해서 애플리케이션의 일부를 렌더링하는 방법입니다. 브라우저가 전체 클라이언트 버전을 내려받는 동안 정적으로 렌더링한 페이지(모든 페이지에서 공통으로 사용하는 뼈대)를 빠르게 표시하고, 코드 로딩이 끝나면 자동으로 전환해서 사용자 경험을 개선할 수 있습니다.

JavaScript를 초기화하지 않고도 브라우저가 HTML과 CSS를 렌더링할 수 있으므로, 사용자에게 의미 있는 애플리케이션 화면을 빠르게 처음 표시할 수 있습니다.

  1. 애플리케이션 준비하기

    다음 Angular CLI 명령으로 준비하세요:

    ng new my-app

    기존 애플리케이션에서는 Router를 직접 추가하고 애플리케이션 안에 <router-outlet>을 정의해야 합니다.

  2. 앱 기본 구조 생성하기

    Angular CLI를 사용해서 앱 기본 구조를 자동으로 생성하세요.

    ng generate app-shell

    이 명령에 대한 자세한 내용은 앱 기본 구조 명령을 참고하세요.

    이 명령은 애플리케이션 코드를 갱신하고 프로젝트 구조에 파일을 추가합니다.

    src
├── app
│ ├── app.config.server.ts # server application configuration
│ ├── app.routes.server.ts # 서버 라우팅 규칙 설정
│ └── app-shell # app-shell component
│   ├── app-shell.css
│   ├── app-shell.html
│   ├── app-shell.spec.ts
│   └── app-shell.ts
└── main.server.ts # main server application bootstrapping

  3. 앱 기본 구조의 내용을 포함해서 애플리케이션이 빌드되었는지 확인하기 

    ng build --configuration=development

    프로덕션 설정을 사용하려면 다음과 같이 실행하세요.

    ng build

    빌드 결과를 확인하려면 dist/my-app/browser/index.html을 여세요. 앱 기본 구조 라우팅 규칙이 결과물의 일부로 렌더링되었는지 확인하려면 기본 문구인 app-shell works!를 찾아보세요.