최대한 빠르고 접근성이 높은 Angular 사이트를 만들고 싶으신가요? 잘 찾아오셨습니다.
Angular란 무엇인가요?
Angular는 사용자 인터페이스를 빌드하기 위한 프레임워크입니다. 유지관리 및 확장 가능한 애플리케이션을 빠르게 설정하는 데 도움이 되는 빌딩 블록을 제공합니다. Angular는 개발자가 웹, 모바일 또는 데스크톱에서 작동하는 애플리케이션을 만들 수 있게 해줍니다.
이 컬렉션에 포함된 항목
이 컬렉션은 Angular 애플리케이션을 최적화하기 위한 다섯 가지 주요 영역에 중점을 둡니다.
- 애플리케이션 성능을 개선하여 사용자 전환 및 참여 증대
- Angular 서비스 워커로 애셋을 사전 캐싱하여 열악한 네트워크에서 애플리케이션의 안정성 향상
- 사전 렌더링 및 서버 측 렌더링을 사용하여 검색엔진 및 소셜 미디어 봇이 애플리케이션을 검색할 수 있도록 만들기
- 애플리케이션을 설치 가능하여 iOS/Android 앱과 유사한 사용자 환경을 제공합니다.
- 모든 사용자가 쉽게 사용할 수 있도록 애플리케이션의 접근성을 개선합니다.
컬렉션의 각 게시물에서는 애플리케이션에 직접 적용할 수 있는 기법을 설명합니다.
이 컬렉션에 포함되지 않은 항목은 무엇인가요?
이 컬렉션은 사용자가 Angular와 TypeScript에 이미 익숙하다고 가정합니다. Angular에 대해 확신이 없다면 TypeScript 문서와 angular.io의 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를 사용한 접근성 감사