《실전 Angular 22 & TypeScript: jQuery 레거시에서 완성하는 게시판 아키텍처》

사내 엔터프라이즈 개발자를 위한 단일 코드베이스 점진적 리팩터링 & 풀스택 실무 가이드

📦 실습 예제 풀스택 소스코드 패키지 (.zip)

Spring Boot 3 백엔드 + Angular 22 (Standalone & Signals) + TypeScript 6.0 프론트엔드 + 14단계 챕터별 실습 코드 및 스냅샷이 모두 포함되어 있습니다. (node_modules 및 빌드 캐시 제외)

예제 소스 다운로드 (.zip)

🗺️ 단일 게시판 코드의 14단계 진화 로드맵

🚀 풀스택 실습 환경 구성 및 따라하기 안내

TIP

jQuery만 써 보셨고 Angular는 처음이신가요? 과거의 복잡했던 NgModule과 Zone.js는 완전히 잊으셔도 좋습니다! 2026 최신 Angular 22는 Standalone Component, 기본 ChangeDetectionStrategy.OnPush, 초경량 Signals (signal, computed, effect, httpResource) 체계로 완전히 탈바꿈했습니다. 먼저 Chapter 00. 준비운동을 한 번 훑어보고 시작하십시오. 각 장 첫머리의 📋 처음 만나는 개념 표와 본문의 🆕 처음 보는 문법 박스가 새 문법을 친절하게 안내합니다.

본 교재는 코드를 눈으로 읽기만 하는 책이 아닙니다.
사내 개발자가 직접 한 줄씩 코드를 작성(Hands-on)하고 브라우저와 콘솔, 자동 테스트에서 동작을 검증하며 엔터프라이즈 아키텍처의 진화를 체감할 수 있도록 설계되었습니다.

📥 예제 소스 다운로드 및 Git 저장소

압축 파일 직접 다운로드: 📦 angular-board-architecture.zip 다운로드

0) 사전 요구사항 및 대상 기술 스택 버전 (Prerequisites)

실습을 시작하기 전 아래 런타임 버전이 설치되어 있는지 확인하십시오. 에디터 확장 Angular Language Service와 크롬 확장 Angular DevTools도 함께 설치하십시오(0장 0.2).

구분	기술 스택	권장 버전	비고
런타임	Node.js	`v22.x LTS` 이상	Angular 22 빌드 및 Vitest 실행 필수 사양
백엔드	Java (JDK) / Spring Boot	`JDK 21 LTS` / `Spring Boot 3.3+`	내장 H2 인메모리 DB 사용 (포트: 8080)
코어	Angular / TypeScript	`Angular 22.x` / `TS 6.0+`	Standalone, Signals, Control Flow (`@if`, `@for`), 기본 `OnPush`
아키텍처	Signals Store / Router / Http	`httpResource()` / `provideHttpClient`	캡슐화 `.asReadonly()`, `CanActivateFn`, `HttpInterceptorFn`
최적화/테스트	Angular CDK / Vitest / MSW	`@angular/cdk 22.x` / `Vitest 2.1+` / `MSW 2.4+`	10,000개 댓글 가상 스크롤, `TestBed` + MSW 통합 테스트

1) 프로젝트 디렉터리 구성

angular-board-architecture/
├── backend/                   # Spring Boot 3 백엔드 (H2 DB, REST API: 8080)
│   └── src/main/resources/static/
│       ├── legacy-board.html  # 👈 1장에서 해부하고 부록 D에서 웹 컴포넌트를 심을 jQuery 레거시 게시판
│       └── docs/              # 👈 이 교재의 HTML 뷰어 (오프라인 열람 지원)
├── frontend/                  # Angular 22 + TypeScript 6.0 프론트엔드 (포트: 4200 또는 3000)
│   ├── src/
│   │   ├── app/
│   │   │   ├── app.component.ts         # 최상위 레이아웃 (<router-outlet> + ErrorBoundaryBanner)
│   │   │   ├── app.routes.ts            # 11장 함수형 라우트 및 authGuard/roleGuard 관문 설정
│   │   │   ├── board-app/
│   │   │   │   └── board-app.component.ts  # 👈 메인 컴포넌트 (1장부터 14장까지 점진적 진화)
│   │   │   ├── models/                  # 👈 7장 백엔드 DTO 1:1 타입 계약 및 런타임 타입 가드 (post.model.ts)
│   │   │   ├── components/              # 👈 6~8장, 13장 공통 컴포넌트 (CommentItem, PostCreateModal, BoardTable<T>, VirtualCommentList)
│   │   │   ├── services/                # 👈 5~6장, 13장 도메인 서비스 (Pagination, Filter, CommentService, BoardShortcuts)
│   │   │   ├── stores/                  # 👈 9~11장 캡슐화된 Signals Store (PostStore, DraftStore, AuthStore)
│   │   │   ├── guards/                  # 👈 11장 함수형 라우터 가드 (auth.guard.ts)
│   │   │   ├── repositories/            # 👈 12장 PostRepository & httpResource() 팩토리
│   │   │   ├── interceptors/            # 👈 12장 Single-Flight 401 토큰 갱신 인터셉터 (auth.interceptor.ts)
│   │   │   ├── core/                    # 👈 12장 GlobalErrorHandler 및 환경설정 토큰
│   │   │   ├── views/                   # 👈 11장 LoginPageComponent 및 부록 B Material/NG-ZORRO 뷰
│   │   │   ├── widgets/                 # 👈 부록 D @angular/elements 웹 컴포넌트 위젯
│   │   │   └── snapshots/               # 👈 장별 완성 스냅샷 (막힐 때 비교/복원용)
│   │   ├── environments/                # 👈 부록 A 로컬/운영 환경설정 (environment.ts, environment.prod.ts)
│   │   ├── practice/                    # 👈 2.5장 미니 Signals 엔진 터미널 실습 파일
│   │   └── main.ts                      # bootstrapApplication 엔트리포인트
│   ├── tests/                           # 👈 10, 12, 14장 Vitest + TestBed + MSW 단위/통합 테스트
│   ├── Dockerfile                       # 👈 부록 A Node 22 LTS + Nginx 멀티스테이지 빌드
│   ├── nginx.conf                       # 👈 부록 A SPA 라우팅 폴백 및 /api/ 리버스 프록시 설정
│   └── angular.json                     # Angular CLI 빌드 및 fileReplacements 설정
└── .vscode/                             # VS Code 공통 권장 설정

IMPORTANT

모든 챕터 코드는 생략 없는 실행 가능한 풀코드(Full Hands-on Code)로 구성되어 있습니다.
각 장은 📋 처음 만나는 개념 표 → 🏁 이 장의 시작 파일 → 유머 비유 & Mermaid 아키텍처 다이어그램 → 단계별 풀코드 실습 → 🆕 초보자 문법 박스 & 🔬 중급자 심화 토글 → 💪 직접 해보기 실습 미션(정답 포함) → 🚀 핵심 요약 및 셀프 체크 순서로 일관되게 구성되어 있습니다.

2) 터미널 2개로 실습 환경 기동하기

bash

# [터미널 1] 백엔드(Spring Boot 3) 실행 (포트: 8080)
cd backend
./mvnw spring-boot:run
# (Windows PowerShell / CMD: .\mvnw.cmd spring-boot:run)

# [터미널 2] 프론트엔드(Angular 22) 실행 (포트: 4200)
cd frontend
npm install
npm start

3) 주요 접속 주소 및 테스트 실행 명령어

jQuery 레거시 화면 확인: http://localhost:8080/legacy-board.html
Angular 22 점진적 리팩터링 실습 화면: http://localhost:4200
2.5장 미니 Signals 엔진 터미널 실습: cd frontend && npm run practice:signals
14장 전체 Vitest + MSW 테스트 실행: cd frontend && npm test

🗂 챕터별 원고 바로가기 (Chapters)

Part 1. Signals와 Standalone의 본질 (jQuery 탈출기)

Chapter 00. 시작하기 전에: jQuery 개발자를 위한 모던 Angular 22 & TS 6.0 준비운동 👈 Standalone과 Signals가 처음이라면 여기부터
Chapter 01. 돌아가기만 하는 사내 레거시: jQuery 게시판의 종말
- Chapter 01.5. Angular 기본기 실습: 신규 Control Flow(@if, @for)와 템플릿 제어 👈 Angular 입문자 필수
Chapter 02. Angular Signals 심층 원리: Zone.js의 종말과 미세 반응형 엔진
- Chapter 02.5. [선택·심화] 50줄로 직접 만드는 미니 Signals 반응형 엔진
Chapter 03. Signals의 올바른 사용법과 신호 끊김(Reactivity Loss) 방어

Part 2. 서비스 분리와 계층적 의존성 주입(DI)

Part 3. 엄격한 타입 계약과 Signals Store 아키텍처

Part 4. 실전 UX 최적화, 인프라 격리, 그리고 통합 테스트

[부록 (Appendix)] 엔터프라이즈 실무 현장 투입 가이드

👥 사내 스터디 리더(진행자)를 위한 5주 운영 키트

퇴근 후 주 2~3회, 회당 1.5~2시간 기준으로 5주 완주 일정을 권장합니다. 각 장 끝의 [직접 해보기] 실습 미션 💪과 셀프 체크를 스터디 첫 10분 리뷰에 활용하십시오.

주차	학습 범위	핵심 아키텍처 성취	스터디 코드 리뷰(PR) 체크포인트
Week 1	Ch 00 ~ Ch 01.5	jQuery 명령형 DOM 조작을 걷어내고 Standalone + `@for`/`@if`로 전환	`innerHTML`이 완전히 제거되었는가? `@for`에 고유 `track post.id`를 지정했는가?
Week 2	Ch 02 ~ Ch 04.5	Signals 의존성 그래프 원리 체득, 신호 끊김 방어, 라우터 쿼리 동기화	신호 값을 초기 변수에 복사해 반응성이 끊긴 곳은 없는가? 부수효과에 `untracked`를 썼는가?
Week 3	Ch 05 ~ Ch 07	도메인 서비스 분리, 계층적 DI 대댓글, Spring DTO 1:1 계약 및 모달 분리	`any` 타입이 남아있지 않은가? `isPageResponse` 타입 가드와 `input.required`/`output`이 적용되었는가?
Week 4	Ch 08 ~ Ch 10	제네릭 `BoardTableComponent<T>`, 캡슐화된 `PostStore`, 낙관적 롤백 & 연타 방어	스토어 내부 신호가 `.asReadonly()`로 캡슐화되었는가? `pendingPostIds` Set 잠금이 `finally`에서 해제되는가?
Week 5	Ch 11 ~ Ch 14 + 부록	`CanActivateFn` 가드, `httpResource` & Single-Flight 401 갱신, CDK 가상 스크롤, MSW 통합 테스트	오픈 리다이렉트 방어(`getSafeReturnUrl`)가 있는가? 동시 401 시 갱신이 1회만 나가는가? 3대 통합 테스트가 통과하는가?

《실전 Angular 22 & TypeScript: jQuery 레거시에서 완성하는 게시판 아키텍처》 ​

🗺️ 단일 게시판 코드의 14단계 진화 로드맵 ​

🚀 풀스택 실습 환경 구성 및 따라하기 안내 ​

0) 사전 요구사항 및 대상 기술 스택 버전 (Prerequisites) ​

1) 프로젝트 디렉터리 구성 ​

2) 터미널 2개로 실습 환경 기동하기 ​

3) 주요 접속 주소 및 테스트 실행 명령어 ​

🗂 챕터별 원고 바로가기 (Chapters) ​

Part 1. Signals와 Standalone의 본질 (jQuery 탈출기) ​

Part 2. 서비스 분리와 계층적 의존성 주입(DI) ​

Part 3. 엄격한 타입 계약과 Signals Store 아키텍처 ​

Part 4. 실전 UX 최적화, 인프라 격리, 그리고 통합 테스트 ​

[부록 (Appendix)] 엔터프라이즈 실무 현장 투입 가이드 ​

👥 사내 스터디 리더(진행자)를 위한 5주 운영 키트 ​