Angular 사이트를 최대한 빠르고 액세스 가능하게 만들고 싶으신가요? 이제 잘 오셨습니다.
Angular란 무엇인가요?
Angular는 사용자 인터페이스를 빌드하기 위한 프레임워크입니다. 유지관리 및 확장 가능한 애플리케이션을 신속하게 설정하는 데 도움이 되는 구성 요소를 제공합니다. Angular는 개발자가 웹, 모바일 또는 데스크톱에서 실행되는 애플리케이션을 만들 수 있게 해줍니다.
이 컬렉션에 포함된 항목은 무엇인가요?
이 컬렉션은 Angular 애플리케이션을 최적화하기 위한 다섯 가지 주요 영역에 중점을 둡니다.
- 애플리케이션의 성능을 개선하여 사용자 전환 및 참여도 증가
- 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 애플리케이션의 성능, 접근성, 검색엔진 최적화를 개선하는 방법을 알아봅니다. 보증 대상:
- Angular에서 경로 수준 코드 분할
- Angular CLI를 사용한 성능 예산
- Angular에서의 경로 미리 가져오기 전략
- Angular에서 감지 최적화 변경
- Angular CDK로 대규모 목록 가상화
- Angular 서비스 워커로 사전 캐싱
- Angular CLI를 사용한 사전 렌더링 경로
- Angular Universal을 사용한 서버 측 렌더링
- Angular CLI로 웹 앱 매니페스트 추가
- Codelyzer를 사용한 접근성 감사