시작하기: Angular 애플리케이션 최적화

Angular 사이트를 최대한 빠르고 쉽게 액세스할 수 있도록 하려면 어떻게 해야 하나요? 여기에서 알아볼 수 있습니다.

Angular는 사용자 인터페이스를 빌드하기 위한 프레임워크입니다. 유지관리가 가능하고 확장 가능한 애플리케이션을 빠르게 설정하는 데 도움이 되는 빌딩 블록을 제공합니다. Angular를 사용하면 개발자가 웹, 모바일 또는 데스크톱에서 실행되는 애플리케이션을 만들 수 있습니다.

이 모음에서는 Angular 애플리케이션 최적화를 위한 5가지 주요 영역에 중점을 둡니다.

  • 애플리케이션의 성능을 개선하여 사용자 전환 및 참여도 높이기
  • Angular 서비스 워커로 애셋을 미리 캐시하여 네트워크 상태가 좋지 않은 경우 애플리케이션의 안정성 개선
  • 사전 렌더링 및 서버 측 렌더링을 사용하여 검색엔진 및 소셜 미디어 봇에서 애플리케이션을 검색 가능하게 만들기
  • iOS/Android 앱과 유사한 사용자 환경을 제공하기 위해 애플리케이션을 설치 가능하게 만들기

컬렉션의 각 게시물에서는 자체 애플리케이션에 직접 적용할 수 있는 기법을 설명합니다.

이 컬렉션에 포함되지 않는 항목은 무엇인가요?

이 모음에서는 Angular 및 TypeScript에 이미 익숙하다고 가정합니다. 아직 확실하지 않다면 angular.io에서 TypeScript 문서Angular 시작하기 가이드를 확인하세요.

프로젝트 시작

Angular 명령줄 인터페이스 (CLI)를 사용하면 간단한 클라이언트 측 Angular 애플리케이션을 빠르게 설정할 수 있습니다. 이 게시물에서는 CLI에 대한 간단한 소개를 제공하고, 컬렉션의 다른 게시물에서는 서버 측 렌더링 및 배포 지원과 같은 고급 기능을 추가하는 방법을 보여줍니다.

CLI 설정

시작하려면 CLI를 전역적으로 설치하고 다음 명령어를 실행하여 최신 버전이 있는지 확인합니다.

npm i -g @angular/cli
ng
--version

마지막 명령어에서 버전 8.0.3 이상이 출력되는지 확인합니다.

또는 CLI를 전역적으로 설치하고 싶지 않다면 로컬에 설치하고 npx 명령어로 실행할 수 있습니다.

npm i @angular/cli
npx ng
--version

프로젝트 만들기

새 프로젝트를 만들려면 다음을 실행합니다.

ng new my-app

이 명령어는 애플리케이션의 초기 파일과 폴더 구조를 만들고 필요한 노드 모듈을 설치합니다.

설정 프로세스가 완료되면 다음을 실행하여 애플리케이션을 시작합니다.

cd my-app
ng serve

이제 http://localhost:4200에서 애플리케이션에 액세스할 수 있습니다.

다음 단계

이 모음의 나머지 부분에서는 Angular 애플리케이션의 성능과 SEO를 개선하는 방법을 알아봅니다. 다음은 이 과정에서 다루는 내용입니다.

  • Angular의 경로 수준 코드 분할
  • Angular CLI를 사용한 성능 예산
  • Angular의 경로 미리 가져오기 전략
  • Angular의 변경 감지 최적화
  • Angular CDK로 대규모 목록 가상화
  • Angular 서비스 워커로 미리 캐시
  • Angular CLI로 경로 미리 렌더링
  • Angular Universal을 사용한 서버 측 렌더링
  • Angular CLI로 웹 앱 매니페스트 추가