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로 웹 앱 매니페스트 추가