[Angular 마스터하기] Day 1 - Angular와의 첫 만남

이제와서 시작하는 Angular 마스터하기 - Day 1 “늦었다고 생각하지 마세요. 지금이 가장 빠른 시작입니다! 🚀”

오늘 배울 내용

• Angular가 무엇이고 왜 배워야 하는지
• React, Vue와의 차이점
• 개발 환경 설정 (Node.js, Angular CLI)
• 첫 프로젝트 생성하고 실행하기

---

1. Angular가 뭘까요?

웹 프레임워크의 필요성

웹사이트를 만들 때 순수 HTML, CSS, JavaScript만 사용하면 어떤 문제가 있을까요?

<!-- 전통적인 방식 - 중복이 많고 관리가 어려움 -->
<div class="user-card">
  <h3>홍길동</h3>
  <p>개발자</p>
</div>
<div class="user-card">
  <h3>김철수</h3>
  <p>디자이너</p>
</div>
<!-- 100명의 사용자라면...? 😱 -->

문제점:

• 같은 코드를 계속 반복해야 함
• 데이터가 변경되면 일일이 수정해야 함
• 코드가 복잡해지면 관리가 힘듦

Angular의 해결책:

// 컴포넌트로 재사용 가능!
@Component({
  selector: 'user-card',
  template: `
    <div class="user-card">
      <h3>{{ name }}</h3>
      <p>{{ role }}</p>
    </div>
  `
})

Angular란?

Angular는 구글이 만든 웹 애플리케이션 프레임워크입니다. 쉽게 말해:

“복잡한 웹 앱을 체계적으로 만들 수 있게 도와주는 도구 세트”

graph LR
    A[복잡한 요구사항] --> B[Angular]
    B --> C[체계적인 구조]
    B --> D[재사용 가능한 컴포넌트]
    B --> E[유지보수 쉬운 코드]

    style B fill:#dd0031,stroke:#fff,color:#fff

Angular의 특징

특징	설명	초보자에게 좋은 이유
완전한 프레임워크	필요한 모든 기능 내장	선택 고민 없이 바로 시작
TypeScript 기본	타입 안정성 제공	에러를 미리 잡아줌
강력한 CLI	명령어로 쉽게 생성	보일러플레이트 자동화
대기업 검증	구글, MS 등에서 사용	안정적이고 신뢰할 수 있음

---

2. React, Vue와 뭐가 다를까?

프론트엔드 3대장을 비교해볼까요?

비교표

항목	Angular	React	Vue
개발사	Google	Meta	커뮤니티
학습 곡선	높음 (완만한 시작)	중간	낮음
타입	프레임워크 (All-in-one)	라이브러리	프레임워크
언어	TypeScript	JavaScript/TypeScript	JavaScript/TypeScript
규모	대규모 엔터프라이즈	모든 규모	중소규모
라우팅/상태관리	내장	별도 설치	별도 설치

실제 코드 비교

같은 기능을 세 프레임워크로 작성하면?

// Angular - 구조화된 접근
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>카운트: {{ count() }}</p>
      <button (click)="increment()">+1</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(v => v + 1);
  }
}

// React - 함수형 접근
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

<!-- Vue - 템플릿 중심 -->
<template>
  <div>
    <p>카운트: 9</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Angular를 선택해야 하는 경우

✅ 이런 분께 추천:

• 체계적인 구조를 선호하는 분
• TypeScript를 좋아하는 분
• 대규모 프로젝트를 준비하는 분
• 엔터프라이즈 환경에서 일하는 분

⚠️ 이런 경우는 다른 선택도 고려:

• 빠른 프로토타입이 필요한 경우 → React
• 학습 곡선이 부담스러운 경우 → Vue

💡 하지만 걱정 마세요! 이 시리즈를 따라오시면 Angular도 충분히 쉽게 배울 수 있습니다!

---

3. 개발 환경 설정하기

자, 이제 실전으로 들어갑니다! 차근차근 따라오세요.

Step 1: Node.js 설치

Angular는 Node.js가 필요합니다.

설치 확인:

# 터미널에서 실행
node --version
npm --version

결과 예시:

v20.10.0
10.2.3

💡 없다면? nodejs.org에서 LTS 버전 다운로드!

권장 버전: Node.js 18.x 이상

Step 2: Angular CLI 설치

Angular CLI는 Angular 프로젝트를 쉽게 관리해주는 도구입니다.

# 전역으로 설치
npm install -g @angular/cli

# 설치 확인
ng version

성공하면 이렇게 나옵니다:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.0.0
Node: 20.10.0
Package Manager: npm 10.2.3

Step 3: 코드 에디터 준비

추천: Visual Studio Code (무료)

필수 확장 프로그램:

1. Angular Language Service - Angular 코드 자동완성
2. Angular Snippets - 코드 스니펫
3. Prettier - 코드 포맷팅
4. ESLint - 코드 품질 체크

---

4. 첫 프로젝트 생성하기

프로젝트 만들기

# 'my-first-app'이라는 프로젝트 생성
ng new my-first-app

질문이 나옵니다:

? Would you like to add Angular routing? (y/N)

👉 일단 N (나중에 배울게요!)

? Which stylesheet format would you like to use?
❯ CSS
  SCSS
  Sass
  Less

👉 CSS 선택 (화살표 키로 이동, 엔터로 선택)

설치 중…:

CREATE my-first-app/README.md (1067 bytes)
CREATE my-first-app/.editorconfig (274 bytes)
CREATE my-first-app/.gitignore (548 bytes)
...
✔ Packages installed successfully.

프로젝트 구조 살펴보기

my-first-app/
├── src/                    # 소스 코드
│   ├── app/               # 애플리케이션 코드
│   │   ├── app.component.ts      # 메인 컴포넌트
│   │   ├── app.component.html    # 템플릿
│   │   ├── app.component.css     # 스타일
│   │   └── app.config.ts         # 앱 설정
│   ├── index.html         # 메인 HTML
│   └── main.ts           # 진입점
├── node_modules/          # 의존성 패키지
├── angular.json          # Angular 설정
├── package.json          # 프로젝트 정보
└── tsconfig.json         # TypeScript 설정

💡 지금은 이것만 기억하세요:

• src/app/ 폴더에서 주로 작업합니다
• app.component.ts 파일이 시작점입니다

개발 서버 실행

# 프로젝트 폴더로 이동
cd my-first-app

# 개발 서버 시작
ng serve

성공 메시지:

** Angular Live Development Server is listening on localhost:4200 **
✔ Compiled successfully.

브라우저에서 확인:

1. 브라우저 열기
2. http://localhost:4200 접속
3. Angular 기본 화면 확인! 🎉

---

5. 첫 코드 수정해보기

app.component.ts 열기

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-first-app';
}

간단한 수정

app.component.html 파일을 열고 전체 내용을 삭제한 후:

<div style="text-align: center; padding: 50px;">
  <h1>🎉 {{ title }}에 오신 것을 환영합니다!</h1>
  <p>이제와서 시작하는 Angular 마스터하기</p>
  <p>오늘은 {{ today }}입니다.</p>
</div>

app.component.ts 수정:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = '나의 첫 Angular 앱';
  today = new Date().toLocaleDateString('ko-KR');
}

저장하고 브라우저 확인! 자동으로 새로고침됩니다 (Hot Reload) 🔥

---

🧪 직접 해보기

실습 1: 자기소개 페이지 만들기

미션: 본인의 이름과 좋아하는 것을 표시하세요!

app.component.ts:

export class AppComponent {
  myName = '홍길동';        // 여기 수정!
  myHobby = '코딩';         // 여기 수정!
  myAge = 25;              // 여기 수정!
}

app.component.html:

<div style="text-align: center; padding: 50px; font-family: Arial;">
  <h1>안녕하세요! 👋</h1>
  <h2>저는 {{ myName }}입니다</h2>
  <p>나이: {{ myAge }}세</p>
  <p>취미: {{ myHobby }}</p>
</div>

예상 결과:

안녕하세요! 👋
저는 홍길동입니다
나이: 25세
취미: 코딩

---

💡 자주 하는 실수

❌ 이렇게 하지 마세요

실수 1: ng 명령어가 안 될 때

ng: command not found

👉 해결: Angular CLI를 전역 설치했는지 확인

npm install -g @angular/cli

실수 2: 포트가 이미 사용 중일 때

Port 4200 is already in use.

👉 해결: 다른 포트로 실행

ng serve --port 4300

실수 3: 변경사항이 반영 안 될 때 👉 해결:

1. 파일을 저장했는지 확인 (Ctrl+S / Cmd+S)
2. 브라우저 새로고침 (F5)
3. 개발 서버 재시작

✅ 이렇게 하세요

• 파일 저장 습관화
• 터미널 에러 메시지 꼭 읽기
• 브라우저 개발자 도구 활용 (F12)

---

📝 정리

오늘 배운 내용을 체크해볼까요?

• Angular가 무엇인지 이해했나요?
• Node.js와 Angular CLI 설치를 완료했나요?
• 첫 프로젝트를 생성하고 실행했나요?
• 코드를 수정하고 결과를 확인했나요?

핵심 키워드

mindmap
  root((Day 1))
    Angular란?
      구글의 프레임워크
      TypeScript 기반
      완전한 솔루션
    환경 설정
      Node.js
      Angular CLI
      VS Code
    첫 프로젝트
      ng new
      ng serve
      localhost:4200

오늘의 명령어

# Angular CLI 설치
npm install -g @angular/cli

# 프로젝트 생성
ng new 프로젝트명

# 개발 서버 실행
ng serve

# 버전 확인
ng version

---

📚 다음 학습

다음 시간에는 컴포넌트를 직접 만들어봅니다!

컴포넌트는 Angular의 핵심입니다. 레고 블록처럼 조립해서 큰 애플리케이션을 만들 수 있죠.

• 다음: Day 2: 컴포넌트 기초 - 나만의 첫 컴포넌트
• 전체 커리큘럼: Angular 마스터하기 시리즈

---

💬 마무리하며

“모든 전문가도 처음엔 초보자였습니다. Angular는 어렵다는 편견을 함께 깨봐요! 💪”

첫날 고생하셨습니다! 환경 설정이 제일 어려운데 잘 해내셨어요.

내일부터는 본격적으로 코딩하면서 재미있는 것들을 만들어봅시다! 🚀

궁금한 점이 있으시면 댓글로 남겨주세요!

---

“늦었다고 생각할 때가 가장 빠른 때입니다.” - 중국 속담