AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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(url: string): Observable {

return this.http.get(url);

}

}

```

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.tsexports로 공유 컴포넌트 노출