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

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

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

Spring Boot 3 백엔드 + Vue 3 프론트엔드 + 14단계 챕터별 실습 코드가 모두 포함되어 있습니다. (약 550KB, node_modules 및 빌드 캐시 제외)

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

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

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

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

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

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

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

vue3-board-architecture/
├── backend/                   # Spring Boot 3 백엔드 (H2 DB, REST API: 8080)
├── frontend/                  # Vue 3 + TypeScript 프론트엔드 (Vite: 3000)
│   ├── src/
│   │   ├── BoardApp.vue       # 👈 1장부터 독자가 직접 코딩해 나갈 메인 컴포넌트!
│   │   ├── practice/          # 👈 2장 미니 반응형 엔진 등 순수 TS 실습 파일
│   │   ├── composables/       # 👈 5장 로직 분리 Composable 함수들
│   │   └── components/        # 👈 6~8장 공통 컴포넌트(BoardTable 등)
│   └── package.json           # 프론트엔드 의존성 및 실습 스크립트
└── chapters/                  # 14단계 챕터별 실습 교재 원고 (HTML 뷰어 지원)

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

실습을 위해 2개의 터미널 창을 열어 각각 백엔드와 프론트엔드를 실행합니다:

bash

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

# [터미널 2] 프론트엔드(Vue 3) 실행 (포트: 3000)
cd frontend
npm install
npm run dev

3) 브라우저 접속 주소

jQuery 레거시 화면 확인: http://localhost:8080/legacy-board.html
Vue 3 점진적 리팩터링 실습 화면: http://localhost:3000
HTML 교재 뷰어 (웹 서빙): http://localhost:8080/docs/index.html
HTML 교재 뷰어 (오프라인 로컬): docs/index.html (브라우저에서 더블 클릭 실행)
2장 반응형 엔진 터미널 실습: cd frontend && npm run practice:reactivity

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

[부록 (Appendix)] 실무 현장 투입을 위한 엔터프라이즈 확장

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

사내에서 4주 스터디를 주관하는 팀장 또는 시니어 개발자를 위한 주차별 핵심 토론 질문 및 PR 검수 기준입니다:

[Week 1] Ch 01 ~ 03: 반응형의 본질과 선언적 멘탈 모델

토론 질문: "우리가 과거 jQuery에서 $('#tbody').html()로 화면을 그릴 때와, Vue 3 ref로 화면을 그릴 때 메모리와 렌더링 성능 관점에서 가장 결정적인 차이는 무엇인가?"
PR 검수 포인트: 코드베이스에 document.querySelector나 innerHTML이 완전히 사라졌는가? reactive 객체를 비구조화 할당하여 반응성을 유실한 곳이 없는가?

[Week 2] Ch 04 ~ 06: Fat Component 탈출과 IoC/DI

토론 질문: "컴포넌트가 800줄로 비대해졌을 때, 단순 하위 컴포넌트로 쪼개는 것(UI 분할)과 Composable로 로직을 도려내는 것(로직 분할)의 차이는 무엇인가?"
PR 검수 포인트: usePagination과 usePostFilter가 평문 객체(Plain Object)를 반환하며 컴포넌트와 느슨하게 결합되어 있는가? 대댓글 트리에서 3단계 이상 Props Drilling 없이 Provide/Inject가 올바르게 적용되었는가?

[Week 3] Ch 07 ~ 10: 타입 계약과 엔터프라이즈 상태 관리

토론 질문: "모든 상태를 Pinia에 넣으면 왜 안 되는가? Local State, URL Query, Pinia Global State를 구분하는 우리 팀의 기준은 무엇인가?"
PR 검수 포인트: Spring Boot DTO와 TypeScript 인터페이스가 any 없이 1:1로 매핑되었는가? 제네릭 BoardTable<T>의 Scoped Slot에서 타입 추론이 깨지지 않는가? 낙관적 업데이트에 롤백 방어 코드가 있는가?

[Week 4] Ch 11 ~ 14 & 부록: 인프라, 최적화, 그리고 배포

토론 질문: "컴포넌트 내부에서 axios.get을 직접 부르는 것을 왜 우리 팀 PR에서 엄격히 금지해야 하는가?"
PR 검수 포인트: postRepository로 네트워크 계층이 완벽히 격리되었는가? 10,000개 댓글에 VirtualList와 shallowRef가 적용되었는가? npm run test 시 모든 단위/통합 테스트가 통과하는가?

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

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

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

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

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

3) 브라우저 접속 주소 ​

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

[부록 (Appendix)] 실무 현장 투입을 위한 엔터프라이즈 확장 ​

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

[Week 1] Ch 01 ~ 03: 반응형의 본질과 선언적 멘탈 모델 ​

[Week 2] Ch 04 ~ 06: Fat Component 탈출과 IoC/DI ​

[Week 3] Ch 07 ~ 10: 타입 계약과 엔터프라이즈 상태 관리 ​

[Week 4] Ch 11 ~ 14 & 부록: 인프라, 최적화, 그리고 배포 ​