소개

본 글에서는 최신 버전Angular을 사용하여 WEB 어플리케이션을 생성하고, JavaScript 코드의 문제점을 찾기 위해 코드를 정적으로 분석하는 ESLint을 추가한다.

전제 조건

시작하기 전에 아래 도구를 설치하고 구성하여 Angular 애플리케이션을 만들어야 합니다.

git : Git은 분산 버전 제어 시스템이며 저장소를 동기화하는 데 사용됩니다.

Node.js and npm : Node.js는 Google의 V8 엔진을 기반으로 하는 JavaScript 코드 런타임 소프트웨어입니다. npm은 Node.js(Node.js 패키지 관리자)용 패키지 관리자입니다. Angular 애플리케이션을 빌드 및 실행하고 라이브러리를 설치하는 데 사용됩니다.

Angular CLI: Angular CLI는 Angular용 명령줄 유틸리티 도구이며 Angular 응용 프로그램의 기본 구조를 만드는 데 사용됩니다.

IDE(예: Visual Studio Code 또는 WebStorm ): IDE(통합 개발 환경)는 응용 프로그램 개발에 도움이 되는 그래픽 인터페이스가 있는 도구이며 Angular 응용 프로그램을 개발하는 데 사용됩니다.

시작하기

Angular 애플리케이션 만들기

Angular은 HTML, CSS 및 TypeScript(JavaScript)를 사용하여 WEB, 모바일 및 데스크톱 애플리케이션을 구축하기 위한 개발 플랫폼입니다. 현재 Angular는 버전 14이며 Google이 프로젝트의 주요 유지 관리자입니다.

1. 경로 파일 및 SCSS 스타일 형식과 함께 @angular/cli를 사용하여 Angular 기본 구조로 애플리케이션을 생성해 보겠습니다.

ng new angular-eslint --routing true --style scss
CREATE angular-eslint/README.md (1067 bytes)
CREATE angular-eslint/.editorconfig (274 bytes)
CREATE angular-eslint/.gitignore (548 bytes)
CREATE angular-eslint/angular.json (3136 bytes)
CREATE angular-eslint/package.json (1045 bytes)
CREATE angular-eslint/tsconfig.json (863 bytes)
CREATE angular-eslint/.browserslistrc (600 bytes)
CREATE angular-eslint/karma.conf.js (1431 bytes)
CREATE angular-eslint/tsconfig.app.json (287 bytes)
CREATE angular-eslint/tsconfig.spec.json (333 bytes)
CREATE angular-eslint/.vscode/extensions.json (130 bytes)
CREATE angular-eslint/.vscode/launch.json (474 bytes)
CREATE angular-eslint/.vscode/tasks.json (938 bytes)
CREATE angular-eslint/src/favicon.ico (948 bytes)
CREATE angular-eslint/src/index.html (299 bytes)
CREATE angular-eslint/src/main.ts (372 bytes)
CREATE angular-eslint/src/polyfills.ts (2338 bytes)
CREATE angular-eslint/src/styles.scss (80 bytes)
CREATE angular-eslint/src/test.ts (749 bytes)
CREATE angular-eslint/src/assets/.gitkeep (0 bytes)
CREATE angular-eslint/src/environments/environment.prod.ts (51 bytes)
CREATE angular-eslint/src/environments/environment.ts (658 bytes)
CREATE angular-eslint/src/app/app-routing.module.ts (245 bytes)
CREATE angular-eslint/src/app/app.module.ts (393 bytes)
CREATE angular-eslint/src/app/app.component.scss (0 bytes)
CREATE angular-eslint/src/app/app.component.html (23364 bytes)
CREATE angular-eslint/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-eslint/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. 이제 라이브러리를 설치하고 ESLint 설정을 추가합니다.

ng add @angular-eslint/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/[email protected].
✔ Package information loaded.

The package @angular-eslint/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.

    All @angular-eslint dependencies have been successfully installed 🎉

    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.

    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.

    Please see https://github.com/angular-eslint/angular-eslint for more information.

CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1511 bytes)
UPDATE angular.json (3447 bytes)
✔ Packages installed successfully.

3. 다음으로 아래 명령을 실행하여 ESLint 설치 및 구성을 확인합니다.

npm run lint

> [email protected] lint /home/rodrigokamada/angular-eslint
> ng lint


Linting "angular-eslint"...

All files pass linting.

4. 준비! All files pass linting 메시지. 문제가 발견되지 않았음을 나타냅니다.

응용 프로그램 저장소는 https://github.com/rodrigokamada/angular-eslint에서 사용할 수 있습니다.

결론

요약하면 이 문서에서 다룬 주제는 다음과 같습니다.

Angular 응용 프로그램을 만들었습니다.

코드를 분석하고 문제를 찾기 위해 ESLint를 추가했습니다.

이 문서를 사용하여 환경에 배포하기 전에 애플리케이션 코드의 문제를 분석하고 찾을 수 있습니다.

읽어주셔서 감사하고 기사가 마음에 드셨기를 바랍니다!

이 자습서는 내blog에 포르투갈어로 게시되었습니다.

새 기사를 게시할 때마다 업데이트를 받으려면 및 에서 나를 팔로우하십시오.