Angular CLI를 사용해 첫 프로젝트 생성하고 구조 이해하기
서론
Angular를 사용해 본격적인 프로젝트를 시작하려면 Angular CLI의 이해가 필수적입니다. CLI(Command Line Interface)를 통해 명령어로 Angular 앱을 생성하고 관리할 수 있으며, 각종 설정을 자동으로 처리해주기 때문에 빠르고 간편하게 프로젝트를 시작할 수 있습니다. 이번 글에서는 Angular CLI란 무엇인지와 주요 명령어를 살펴보고, 프로젝트의 폴더 구조를 분석하여 각 폴더와 파일이 어떤 역할을 하는지 이해해보겠습니다.
본론
1. Angular CLI란 무엇인가?
Angular CLI의 정의
Angular CLI는 Angular 프로젝트 생성 및 관리를 위한 커맨드 라인 도구입니다. 명령어로 프로젝트를 쉽게 만들 수 있으며, 초기 설정, 빌드, 테스트, 배포 등의 작업을 도와주는 기능도 제공합니다. 이를 통해 개발 속도가 빠르고 일관성 있는 코드를 유지할 수 있습니다.
Angular CLI 설치
Angular CLI를 사용하려면 먼저 Node.js가 설치되어 있어야 합니다. Node.js 공식 사이트에서 최신 버전을 다운로드하여 설치 후, 다음 명령어로 CLI를 설치합니다.
npm install -g @angular/cli
이 명령어는 CLI를 전역에 설치하여 터미널에서 어디서든 Angular 프로젝트를 생성할 수 있게 합니다.
Angular CLI의 기초 명령어
ng new <project-name>: 새 Angular 프로젝트를 생성합니다. 예를 들어, my-angular-app이라는 프로젝트를 생성하려면 다음과 같이 입력합니다.
ng new my-angular-app
ng serve: 개발 서버를 실행하여 프로젝트를 브라우저에서 확인할 수 있게 합니다. 기본적으로 http://localhost:4200에서 앱을 확인할 수 있습니다.
ng serve
ng generate: 새로운 컴포넌트, 서비스, 모듈 등을 생성합니다. 예를 들어, header라는 컴포넌트를 생성하려면 다음과 같이 입력합니다.
ng generate component header
ng build: 애플리케이션을 빌드하여 프로덕션 환경에서 사용할 수 있는 코드로 변환합니다. 이 명령어는 프로젝트의 dist 폴더에 최적화된 빌드 파일을 생성합니다.
ng build --prod
2. 프로젝트 폴더 구조 둘러보기 - 어디에 무엇이 있는지 이해하기
Angular CLI로 프로젝트를 생성하면 여러 폴더와 파일이 포함된 구조가 자동으로 생성됩니다. 각 폴더와 파일이 어떤 역할을 하는지 하나씩 알아보겠습니다.
1) src/ 폴더
src 폴더는 Angular 앱의 주요 코드가 들어있는 폴더입니다. 애플리케이션의 핵심 로직과 UI를 다루는 파일들이 모두 이곳에 저장됩니다.
app/: 애플리케이션의 주요 컴포넌트, 모듈, 서비스가 포함된 폴더입니다.
app.component.ts: 앱의 루트 컴포넌트로, Angular 애플리케이션의 진입점 역할을 합니다.app.module.ts: 앱의 주요 모듈을 정의하는 파일로, 컴포넌트와 서비스의 등록 및 설정이 이루어집니다.
assets/: 이미지, 아이콘, 폰트 등 정적 파일을 저장하는 폴더입니다.environments/: 개발 환경과 프로덕션 환경에서의 설정을 다르게 관리할 수 있는 폴더입니다.
environment.ts: 개발 환경 설정 파일.environment.prod.ts: 프로덕션 환경 설정 파일.
2) 주요 설정 파일
angular.json: Angular CLI의 주요 설정 파일입니다. 앱 빌드, 서버 설정, 경로 설정 등이 이 파일에 정의됩니다.package.json: 앱에서 사용되는 의존성 및 스크립트를 관리하는 파일입니다. Angular의 버전과 종속된 라이브러리가 명시되어 있습니다.tsconfig.json: TypeScript 설정 파일로, Angular에서 TypeScript를 어떻게 해석하고 컴파일할지에 대한 정보가 포함됩니다.
3) 폴더 구조와 개발 워크플로우 이해하기
app/ 폴더 내 각 컴포넌트는 자체 폴더를 가지며, HTML, CSS, TypeScript 파일로 구성됩니다. 이를 통해 UI와 로직을 분리하여 관리할 수 있습니다.- 모듈과 라우팅: Angular CLI를 통해 모듈과 라우팅을 쉽게 설정할 수 있습니다. 각각의 기능을 모듈화하여 프로젝트를 체계적으로 관리할 수 있습니다.
결론
Angular CLI는 Angular 프로젝트 생성과 관리를 단순하고 빠르게 만들어주는 도구로, 기초 명령어를 사용하여 빠르게 앱을 설정하고 실행할 수 있습니다. 프로젝트 구조를 이해하는 것은 각 파일이 어떤 역할을 하는지 알고, 개발 시 체계적으로 작업을 진행하는 데 매우 유용합니다. 앞으로 Angular CLI와 폴더 구조를 잘 활용하여 효과적인 Angular 개발 환경을 구축해보시길 바랍니다.
Q&A 섹션
- Q1: Angular CLI의 장점은 무엇인가요?
A1: Angular CLI는 프로젝트 생성, 빌드, 테스트 등 다양한 작업을 자동화하여 개발 속도를 빠르게 하고, 일관성 있는 코드 작성을 돕습니다.
- Q2: Angular CLI로 생성한 프로젝트 구조를 이해해야 하는 이유는 무엇인가요?
A2: 각 폴더와 파일의 역할을 이해하면 프로젝트 관리가 쉬워지고, 개발과 유지보수에 큰 도움이 됩니다.
- Q3: Angular 프로젝트의 기본 포트는 무엇인가요?
A3: 기본적으로 http://localhost:4200에서 Angular 애플리케이션을 확인할 수 있습니다.
관련 태그
- #angular-cli
- #angular-설치
- #프로젝트-구조
- #프론트엔드-개발
- #웹-개발
이 글을 통해 Angular CLI의 역할과 주요 명령어 사용법, 그리고 프로젝트의 구조를 이해하여 Angular 개발의 첫 걸음을 내딛는 데 도움이 되길 바랍니다.