출시·고도화 중
Framework · 2016년 공개
Angular는 Google이 이끄는 TypeScript 기반 웹 프레임워크로, 라우팅·폼·HTTP 통신을 기본으로 갖춰 규모가 큰 웹 애플리케이션을 만드는 데 알맞습니다.
Angular는 TypeScript로 웹 애플리케이션을 만드는 프런트엔드 프레임워크입니다. 2016년에 처음 공개되었고 Google의 Angular 팀이 오픈 소스로 개발합니다. 2010년에 나온 AngularJS와는 이름만 이어받은 별개의 프레임워크입니다. 화면은 템플릿과 TypeScript 클래스로 이루어진 컴포넌트로 나누고, 상태 변화는 시그널(signal)로 추적하며, 공통 기능은 의존성 주입(DI)으로 서비스에 담아 공유합니다.
Angular는 라우터, 폼, HttpClient, 국제화, 테스트 도구까지 공식 패키지로 함께 제공하기 때문에, 여러 팀이 오래 유지보수해야 하는 대규모 업무용 애플리케이션이나 관리 화면에서 특히 많이 쓰입니다. 정해진 구조와 코드 생성 도구 덕분에 프로젝트마다 구성이 크게 달라지지 않아 새로 합류한 개발자도 금방 코드를 읽을 수 있습니다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)도 같은 도구로 지원합니다.
처음 시작한다면 Node.js를 설치한 뒤 Angular CLI로 프로젝트를 만들고 ng serve로 개발 서버를 띄워 보는 것이 가장 빠릅니다. 공식 사이트 angular.dev에는 설치 없이 브라우저에서 따라 할 수 있는 입문 튜토리얼과 주제별 가이드가 잘 정리되어 있습니다. TypeScript 기초를 먼저 익혀 두면 데코레이터, 타입, 클래스로 이루어진 Angular 코드를 훨씬 쉽게 이해할 수 있습니다.
컴포넌트가 필요한 다른 컴포넌트와 디렉티브를 직접 imports로 가져오므로, 별도의 모듈 없이도 화면을 작고 독립적인 단위로 나눌 수 있습니다.
signal, computed, effect로 상태와 파생 값을 선언하면 Angular가 어떤 값이 바뀌었는지 추적해 필요한 부분만 다시 그립니다.
라우터, 반응형 폼, HttpClient, 국제화, 서버 렌더링이 공식 패키지로 제공되어 핵심 기능을 고르느라 시간을 쓰지 않아도 됩니다.
Angular CLI 하나로 프로젝트 생성, 코드 생성, 개발 서버, 테스트, 최적화된 프로덕션 빌드까지 한 가지 방식으로 처리합니다.
Angular CLI는 Node.js 위에서 동작합니다. nodejs.org에서 LTS 버전을 설치하고, 터미널에서 node와 npm 버전이 표시되는지 확인합니다. 지원하는 Node.js 버전은 angular.dev의 버전 호환표에서 확인할 수 있습니다.
node --version && npm --versionnpm으로 Angular CLI를 전역 설치합니다. 설치가 끝나면 ng 명령을 쓸 수 있으며, ng version으로 설치된 버전을 확인할 수 있습니다.
npm install -g @angular/cling new로 새 프로젝트를 만들고 개발 서버를 실행합니다. 스타일시트 형식과 SSR 사용 여부를 묻는 질문에 답하면, 브라우저에서 http://localhost:4200 이 열립니다.
ng new my-app && cd my-app && ng serve --open@Component 데코레이터는 클래스를 화면 조각인 컴포넌트로 만듭니다. selector는 HTML에서 쓸 태그 이름이고, template의 {{ }}는 값을 화면에 출력하며 (click)은 이벤트를 메서드에 연결합니다. signal로 만든 값은 함수처럼 호출해 읽고 update로 바꾸며, 값이 바뀌면 Angular가 화면을 자동으로 갱신합니다.
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --open설치부터 Angular 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.
Angular 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.
아직 토론이 없습니다. 첫 이야기를 시작해 보세요.
댓글 0개
로그인 · 로그인하면 댓글을 남길 수 있습니다.
첫 댓글을 남겨 보세요.