| 서론
안녕하세요, 팡일입니다.
이번 글에서는 Angular 프로젝트를 처음 시작하는 방법부터, 프로젝트 구조와 기본 동작 흐름까지 한 번에 정리해보려고 합니다.
Angular는 React와 비교했을 때 구조가 비교적 정해져 있고, 초기 설정 과정도 포함되어 있기 때문에 처음 접하면 “어디서부터 이해해야 할지” 막막하게 느껴질 수 있습니다.
그래서 이번 글에서는 단순히 프로젝트를 생성하는 방법만 다루는 것이 아니라, 프로젝트 생성 과정에서 등장하는 선택 옵션들의 의미와 폴더 구조, 실행 흐름, 그리고 실제 페이지를 추가하는 방법까지 전체적인 흐름을 한 번에 이해할 수 있도록 구성했습니다.
Angular를 처음 시작하시는 분들이나, React 기반에서 Angular로 넘어오시는 분들께 도움이 되었으면 합니다.
| Angular CLI 설치
Angular 프로젝트를 생성하기 위해서는 먼저 Angular CLI를 설치해야 합니다.
Angular CLI는 프로젝트 생성, 실행, 빌드 등 Angular 개발 전반을 관리해주는 핵심 도구입니다.
아래 명령어를 통해 전역으로 설치할 수 있습니다.
npm install -g @angular/cli
| 새 프로젝트 생성
Angular CLI가 설치되었다면, 아래 명령어를 통해 새로운 프로젝트를 생성할 수 있습니다.
ng new <project-name>
또한, 프로젝트 생성 과정에서는 몇 가지 선택 옵션이 나오게 되는데, 각 옵션의 의미를 이해하고 선택하는 것이 중요합니다.
1) 자동완성 설정
Would you like to enable autocompletion? (Y/n)
이 옵션은 Angular CLI 명령어를 입력할 때 자동완성을 사용할지 여부를 묻는 질문입니다.
이 기능을 활성화하면 TAB 키를 통해 명령어를 자동완성할 수 있으며, .zshrc 또는 .bashrc 같은 쉘 설정 파일이 자동으로 수정됩니다.
개발 편의성을 위해 Y를 선택하는 것을 추천합니다.
2) 사용 데이터 공유
Would you like to share pseudonymous usage data?
Angular 팀(구글)에 익명화된 사용 데이터를 전송할지 여부를 묻는 옵션입니다.
기능에는 영향을 주지 않기 때문에 N을 선택해도 전혀 문제 없습니다.
3) 스타일 시스템 선택
Which stylesheet system would you like to use?
프로젝트에서 사용할 스타일링 방식을 선택하는 단계입니다.
- CSS
- Tailwind CSS
- SCSS
- Less
빠르게 시작하려면 CSS, 실무에서는 Tailwind 또는 SCSS를 많이 사용합니다.
4) SSR / SSG 설정
Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG)?
이 옵션은 렌더링 방식을 선택하는 단계입니다.
- CSR: 브라우저에서 렌더링
- SSR/SSG: 서버 또는 빌드 시 HTML을 미리 생성
처음에는 CSR로 시작하고, 필요할 때 아래 명령어로 추가하는 것을 추천합니다.
ng add @angular/ssr
5) AI 도구 설정
Which AI tools do you want to configure?
이 옵션은 AI 코딩 도구에 Angular 베스트 프랙티스 규칙을 자동으로 설정할지 묻는 단계입니다.
VSCode와 AI 도구를 함께 사용한다면 Agents.md를 선택하는 것을 추천합니다.
6) 완료 메시지
✔ Packages installed successfully.
Successfully initialized git.
위 메시지가 출력되면 프로젝트 생성이 완료된 것입니다.
| 프로젝트 실행
프로젝트를 실행하려면 아래 명령어를 입력합니다.
cd <project-name>
npm start
기본적으로 http://localhost:4200에서 실행됩니다.
| 폴더 구조 이해
Angular는 구조가 정해져 있는 프레임워크이기 때문에, 폴더 구조를 이해하는 것이 매우 중요합니다.
.
├── src/ # 🔥 실제 개발 영역
│ ├── index.html # 루트 HTML
│ ├── main.ts # 앱 시작점
│ ├── styles.css # 전역 스타일
│ │
│ └── app/ # 핵심 영역
│ ├── app.ts # 루트 컴포넌트
│ ├── app.html # 템플릿
│ ├── app.css # 스타일
│ ├── app.routes.ts # 라우팅
│ └── app.config.ts # 전역 설정
특히 아래 3가지 파일은 반드시 이해하고 넘어가는 것이 좋습니다.
- main.ts: 애플리케이션 시작점
- app.ts: 루트 컴포넌트
- app.routes.ts: 페이지 라우팅 설정
| Angular 동작 흐름 이해
Angular 애플리케이션은 다음과 같은 흐름으로 동작합니다.
- 브라우저가 index.html을 로드합니다.
- <app-root> 태그를 확인합니다.
- main.ts가 실행됩니다.
- App 컴포넌트가 부트스트랩됩니다.
- 라우터와 전역 설정이 적용됩니다.
이 과정의 핵심 코드는 아래와 같습니다.
bootstrapApplication(App, appConfig)
이 코드는 React의 ReactDOM.createRoot()와 유사한 역할을 합니다.
또한, app 폴더 내 파일들의 역할은 아래와 같습니다
- app.ts → 루트 컴포넌트
- app.html → 화면 구조
- app.routes.ts → 페이지 경로
- app.config.ts → 전역 설정
| 페이지 추가 방법
Angular에서는 페이지를 “컴포넌트” 단위로 구성합니다.
1) 컴포넌트 생성
@Component({
selector: 'app-project',
template: `...`,
})
export class ProjectComponent {}
React의 페이지 컴포넌트와 같은 개념입니다.
2) 라우트 등록
export const routes: Routes = [
{
path: '',
loadComponent: () => import('./home/home').then(m => m.HomeComponent)
},
{
path: 'project',
loadComponent: () => import('./project/project').then(m => m.ProjectComponent)
}
];
Angular는 기본적으로 lazy loading을 지원하기 때문에 필요한 시점에 컴포넌트를 로드하게 됩니다.
(1) index.ts 활용 팁
loadComponent: () => import('./project').then(m => m.ProjectComponent)
index 파일을 활용하면 import 경로를 더 깔끔하게 관리할 수 있습니다.
3) 페이지 이동
<a routerLink="/project">이동</a>
React Router의 <Link>와 동일한 역할을 합니다.
| 결론
이번 글에서는 Angular 프로젝트를 처음 시작하는 방법부터, 프로젝트 구조와 실행 흐름, 그리고 페이지 추가 방법까지 전반적으로 살펴보았습니다.
Angular는 처음에는 설정과 구조가 많아 다소 복잡하게 느껴질 수 있지만, 한 번 전체 흐름을 이해하고 나면 오히려 일관된 구조 덕분에 유지보수와 확장 측면에서 큰 장점을 가지는 프레임워크입니다.
특히 아래 세 가지를 이해하면 Angular의 전체 구조를 빠르게 파악할 수 있습니다.
- main.ts에서 애플리케이션이 시작된다
- 컴포넌트를 중심으로 화면이 구성된다
- 라우터를 통해 페이지가 관리된다
이 구조를 기반으로 이후에는 상태 관리나 성능 최적화, SSR/SSG 같은 고급 기능까지 확장해 나갈 수 있습니다.
'💻 개발 > 🅰️ Angular' 카테고리의 다른 글
| [Angular] Angular에서 CSR → SSG 전환하기 (0) | 2026.03.19 |
|---|---|
| [Angular] Angular 초심자 문법 가이드 (0) | 2026.03.19 |