Angular 프로젝트 구조 개요
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 개발자 및 Angular 프레임워크 학습자
- 난이도: 초급 (기초 개념과 CLI 명령어 중심)
핵심 요약
- 핵심 폴더 구조:
core/
(앱 전역 서비스),shared/
(공유 컴포넌트/인터페이스),pages/
(모듈별 페이지) - 모듈 분리:
lazy loading
방식으로home
,login
,dashboard
등 페이지별 모듈 생성 - CLI 명령어:
ng generate module
,ng generate component
,ng generate service
등으로 자동 생성 가능
섹션별 세부 요약
1. **프로젝트 기본 구조**
src/app/
하위에core/
,shared/
,pages/
폴더로 구성core/
폴더:services/
,guards/
,interceptors/
포함 (예:AuthService
,TokenInterceptor
)shared/
폴더: 공유 컴포넌트(ButtonComponent
), 파이프(DatePipe
), 모델(User
,Product
) 포함pages/
폴더: 각 페이지별 모듈(home/
,login/
)로 분리 (예:home.module.ts
,home-routing.module.ts
)
2. **폴더별 역할**
core/
: 앱 전역 사용 서비스 (@Injectable({ providedIn: 'root' })
)shared/
: 모든 페이지에서 재사용 가능한 컴포넌트 및 인터페이스models/
또는types/
:User
,Product
등 데이터 타입 정의app-routing.module.ts
: 루트 라우팅 정의,loadChildren
으로 lazy loading 적용
3. **예시 코드 및 파일 구조**
shared/models/user.model.ts
:
```typescript
export interface User {
id: string;
username: string;
email: string;
}
```
app-routing.module.ts
:
```typescript
const routes: Routes = [
{ path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
];
```
core/services/api.service.ts
:
```typescript
@Injectable({ providedIn: 'root' })
export class ApiService {
constructor(private http: HttpClient) {}
get
return this.http.get
}
}
```
4. **Angular CLI 명령어**
- 프로젝트 생성:
```bash
ng new my-angular-app --routing --style=scss
```
- 라우팅 모듈 생성 (lazy loading):
```bash
ng generate module pages/home --route home --module app.module
```
- 공유 컴포넌트 생성:
```bash
ng generate component shared/components/button
```
- 서비스 생성:
```bash
ng generate service core/services/api
```
5. **최종 프로젝트 구조 예시**
src/app/
├── core/
│ ├── services/
│ │ ├── api.service.ts
│ │ └── auth.service.ts
│ ├── guards/
│ ├── interceptors/
│ └── core.module.ts
├── shared/
│ ├── components/
│ │ ├── button/
│ │ └── card/
│ ├── models/
│ │ └── user.model.ts
│ └── shared.module.ts
├── pages/
│ ├── home/
│ ├── login/
│ └── dashboard/
├── app-routing.module.ts
└── app.module.ts
결론
- 핵심 팁:
lazy loading
을 통해 페이지별 모듈 분리로 앱 성능 향상,shared/
폴더를 통해 재사용 가능한 컴포넌트/인터페이스 관리 - CLI 자동 생성:
ng generate
명령어로 구조, 라우팅, 서비스 등 자동 생성 가능 - 실무 적용:
@Injectable({ providedIn: 'root' })
로 싱글톤 서비스 구현,shared.module.ts
의exports
로 공유 컴포넌트 노출