실전! 스프링 5와 Vue.js 2로 시작하는 모던 웹 애플리케이션 개발

스프링 부트와 Vuex를 활용한 실습 중심의 풀스택 웹 애플리케이션 개발

제임스 J. 예 지음 | 김현만 , 권봉혁 , 변준석 옮김

위키북스 2023년 07월 10일 출간 종이책 : 2020년 01월 21일 출간

작품소개

책소개

이 책은 실용적인 접근법으로 풀스택 웹 개발자가 되는 데 도움을 줍니다. 개발자는 프런트엔드와 백엔드 코드를 작성하는 방법을 아는 것은 물론이고, 애플리케이션에 대한 아이디어부터 시작해 UI, 기술적 설계, 구현, 테스트, 프로덕션 환경에 배포, 그리고 모니터링까지 개발 수명 주기에서 발생하는 모든 문제를 해결해야 합니다.

이 책을 통해 웹 애플리케이션을 개발하는 방법을 배우면서 스프링 5와 Vue.js 2에 익숙해질 것입니다. 초기 구조화부터 전체 배포까지, Vue.js 2와 스프링 5를 활용해 웹 애플리케이션을 개발하는 모든 단계를 처음부터 설명합니다. 각 장에서 애플리케이션의 다양한 구성 요소를 만드는 방법을 배우고, 개발 주기를 단축시킬 수 있는 프레임워크의 다양한 도구를 살펴봅니다.

이 책을 다 읽고 나면 전문적인 풀스택 웹 개발을 뒷받침하는 주요 디자인 패턴과 모범 사례를 완전히 이해하게 될 것입니다.

목차

▣ 01장: 모던 웹 애플리케이션 개발 - 이것은 신기원이다
소개
___자바 개발자의 관점에서 본 자바스크립트
___함수와 메소드
___객체와 클래스
___객체, 프로퍼티, 프로퍼티 속성
___프로토타입과 상속
___스코프와 클로저
___this 키워드
___호이스팅
ES6 기본
___블록 스코프, let, const
___클래스
___강화된 객체 리터럴
___화살표 함수
___매개변수 기본값
___나머지 매개변수
___전개 구문
___비구조화 할당
___템플릿 리터럴
___모듈
___프로미스
요약

▣ 02장: Vue.js 2 - 기대한 방식으로 동작한다
기본 개념
___Vue 인스턴스
___컴포넌트
___Vue 인스턴스 라이프 사이클
___지시자
___필터
___믹스인
___플러그인
뒷받침하는 기술
___반응형 시스템
요약

▣ 03장: 스프링 5 - 작업에 적합한 기술 스택
스프링 제어의 역전(IoC)과 의존성 주입(DI)
___스프링 컨테이너 구동
___어노테이션 기반의 설정
스프링 MVC
___자바 EE 서블릿
___DispatcherServlet
___뷰(Views)
___필터
스프링 JDBC와 JPA
___JDBC 드라이버
___스프링 JDBC
___하이버네이트
스프링 AOP
___관심사
___애스펙트
___조인 포인트
___어드바이스
___포인트컷
___AOP 프락시
___위빙
___@SecurityCheck
___AOP 실행 흐름
스프링 트랜잭션 관리
___PlatformTransactionManager
___선언적 트랜잭션 관리
스프링 부트
___스타터
___Autoconfiguration
조합하기
___코드 합치기
___API 추가하기
___HTTP 클라이언트 - axios
___패키지 app.messages

▣ 04장: TaskAgile - 트렐로와 유사한 작업 관리 도구
애자일 방식으로 요구 사항 관리하기
___요구 사항 단계
___애자일 프로젝트에서 요구 사항 작성하기
효과적인 사용자 스토리 작성하기
___사용자 스토리 작성하기 팁
___TaskAgile 사용자 스토리
와이어프레임 작성하기
애자일 이해하기
___애자일 선언문
풀스택 개발자 스킬 세트
___요구 사항 분석하기
___의사소통
___와이어프레임 작성하기
___데이터 모델링
___API 설계하기
___프런트엔드 코딩하기
___백엔드 코딩하기
___단위 테스트 및 자동화 테스트
___지속적인 통합
___서버 모니터링 및 아키텍처 이해
요약

▣ 05장: 데이터 모델링 - 애플리케이션의 기반 설계하기
데이터 모델링 소개
___데이터 모델링 단계와 산출물
___데이터 모델링에서 자주 사용하는 전문 용어
데이터 모델링의 목적
___완전성
___중복 최소화
___확장성
___일관성
ER 다이어그램을 활용한 개념적 데이터 모델링
___크로즈 풋 표기법
___명명 규약
___TaskAgile 개념적 데이터 모델
___서브 타입과 수퍼 타입
논리적 데이터 모델링
RDBMS의 물리적 데이터 모델링
___명명 규약
몽고DB의 물리적 데이터 모델링
요약

▣ 06장: 코드 설계 - 안정성과 확장성을 고려해 설계하기
애자일 코드 설계
___코드 설계란 무엇인가?
___코드 설계의 단계
___악마는 디테일에 있다
___나쁜 설계의 증상
___애자일 코드 설계 실천 방법
디자인 원칙과 디자인 패턴
___SOLID 디자인 원칙
TaskAgile 코드 설계
___계층형 아키텍처
___헥사고날 아키텍처
요약

▣ 07장: RESTful API 설계 - 프런트엔드와 백엔드 간의 소통 언어 구축하기
RESTful API 특징
___REST 아키텍처의 제약 사항
___RESTful 인터페이스 제약 사항
___독선적인 RESTful API
RESTful API 설계 절차
___요구 사항 찾기
___리소스 식별하기
___API 세부 사항 구체화하기
스프링 MVC에서 RESTful API 구현
___MVC 어노테이션
___스프링 HATEOAS
___스프링 REST Docs
RESTful API 활용하기
___HTTP 클라이언트
___서버 측면에서 활용하기
RESTful API 테스팅
___메시지 앱의 단위 테스트
요약

▣ 08장: 애플리케이션 뼈대 만들기 - 로켓처럼 빠르게 시작하기
개발 환경 구성하기
스프링 이니셜라이저로 백엔드 뼈대 생성하기
___파일 구조
___커밋과 푸시
___애플리케이션 실행하기
프런트엔드 뼈대 생성하기
___파일 구조
___정리와 재구성하기
___놓친 것은 없을까?
프런트엔드와 백엔드 연결하기
___프런트엔드와 백엔드 통신하기
vue-router 소개
___스프링 MVC 요청 매핑
마지막 수정사항
요약

▣ 09장: 폼과 검증 - 회원가입 페이지부터 시작하기
부트스트랩 4로 UI 구현하기
___부트스트랩 설치 및 활용
___회원가입 페이지 UI 구현하기
Vue.js로 회원가입 폼 구현하기
___회원가입 폼을 위한 테스트 코드 작성하기
___폼 바인딩 구현하기
___폼 제출 처리하기
___백엔드와 통신하기
프런트엔드 검증
___데이터 검증 테스트하기
___Vuelidate로 폼 데이터 검증하기
백엔드 검증
___RegistrationPayload 생성하기
___RegistrationApiController 생성하기
도메인 모델로 회원가입 구현하기
___UserService 애플리케이션 서비스 구현하기
___RegistrationManagement 구현하기
___UserRepository 구현하기
마지막 수정사항
요약

▣ 10장: 스프링 시큐리티 - 애플리케이션 보호하기
웹 애플리케이션을 보호하는 방법
___사용자 인증하기
___사용자 권한 부여하기
___공격 예방하기
스프링 시큐리티 소개
___스프링 시큐리티 핵심 개념
스프링 시큐리티 자세히 알아보기
___스프링 시큐리티 설정하기
___스프링 시큐리티 필터 체인
___스프링 시큐리티 동작 방식
___스프링 시큐리티 인증 자세히 알아보기
___스프링 시큐리티 권한 부여 자세히 알아보기
로그인 페이지 구현하기
___로그인 페이지 UI 구현하기
___PasswordEncryptorDelegate 구현하기
___백엔드에서 인증 구현하기
JavaMail로 이메일 전송하기
___MailManager와 그 관련 클래스
엔드-투-엔드 통합 테스트 수행하기
___포트 수정하기
___페이지 오브젝트 활용하기
___사용자 테스트 데이터 자동 생성하기
___특정 순서로 테스트하기
마지막 수정사항
요약

▣ 11장: 상태 관리와 국제화 - 홈페이지 구현하기
Vuex로 상태 관리하기
___전통적인 상태 관리의 단점
___오늘날의 상태 관리
___Vuex 간단히 알아보기
홈페이지 프런트엔드 구현하기
___홈페이지 UI
___홈페이지 레이아웃과 컴포넌트
___데이터 구조와 상태 관리
___백엔드 API
___홈페이지 프런트엔드 구현하기
홈페이지 백엔드 구현하기
___도메인 모델
___API 핸들러
___애플리케이션 서비스
___리파지토리와 제네릭 save() 메소드
Vue-i18n으로 국제화 지원하기
SQL 쿼리 로깅과 성능 튜닝
마지막 수정사항
요약

▣ 12장: 웹소켓을 활용한 실시간 업데이트와 플렉스박스 레이아웃 - 보드 생성하기
보드 페이지 프런트엔드 구현하기
___보드 페이지 UI
___보드 페이지 레이아웃
___드래그 앤드 드롭 구현하기
보드 페이지 백엔드 구현하기
___보드 페이지를 위한 API
___일괄적으로 위치 변경하기
웹소켓으로 실시간 업데이트 구현하기
___SockJS 소개
___스프링 웹소켓 소개
___채널 기반 통신 패턴
마지막 수정사항
요약

▣ 13장: 파일 처리와 확장성 - 카드 가지고 놀기
카드 모달 프런트엔드 구현하기
___카드 모달창 UI
___카드 모달창 레이아웃
___보드 URL과 카드 URL을 위한 라우터
___카드 제목 편집란 자동 크기 조절 구현하기
___마크다운 형식 지원 구현하기
___파일 업로드 구현하기
카드 모달 백엔드 구현하기
___카드 모달을 위한 API
___업로드된 파일 저장하기
___이미지 섬네일 생성하기
___S3에 파일 저장하기
AMQP로 활동을 비동기로 추적하기
___카드 배경 이미지와 활동 세부사항 추가하기
마지막 수정사항
요약

▣ 14장: 헬스 체크, 시스템 모니터링 - 운영 준비하기
서비스로 설치하기
스프링 프로파일
___dev 프로파일
___test 프로파일
___엔드-투-엔드 테스트 프로파일
___스테이징과 운영 프로파일
스프링 부트 액추에이터
___health 엔드 포인트
___info 엔드 포인트
___metrics 엔드 포인트
___environment 엔드 포인트
___엔드 포인트 보안
Icinga 2로 모니터링하기
마지막 수정사항
요약

▣ 15장: 젠킨스로 클라우드에 배포하기 - 지속적으로 전달하며 선적하라
지속적 전달
___등록 API 통합 테스트
___성숙도와 비용
___E2E 테스트 리팩터링하기
첫 출시 전 최종 수정
선적하기
___Dockerfile 준비하기
___Jenkinsfile 준비하기
___서버 준비하기
___젠킨스로 빌드하기
요약
참고용 사이트

출판사 서평

★ 이 책에서 다루는 내용 ★

▣ Vue, Vuex, 스프링 부트로 애플리케이션의 프런트엔드와 백엔드 연결하기
▣ 최신 웹 표준을 활용해 코드 성능과 가독성, 상호 호환성 향상시키기
▣ 스프링 시큐리티로 안전한 풀스택 웹 애플리케이션 구축하기
▣ 요구 사항 분석 및 데이터 모델 설계하기
▣ Vue.js 2와 스프링 5로 싱글 페이지 애플리케이션 개발하기
▣ 개념적, 논리적, 물리적 데이터 모델링 연습
▣ RESTful API의 설계와 구현, 보안, 테스트
▣ 애플리케이션의 신뢰도를 향상시키기 위한 테스트 케이스 추가하기
▣ 애플리케이션을 프로덕션 환경에 배포하고 모니터링하기

작가정보

저자(글) 제임스 J. 예

풀스택 엔지니어링에 특별히 관심이 있고 경험 많은 소프트웨어 엔지니어이자 아키텍처다. 6Connecx에서 엔지니어링 부사장을 맡고 있으며, 중국 쑤저우에 있는 해외 엔지니어링 팀도 관리하고 있다. 이 팀은 Virtual Experience SaaS 플랫폼 개발 전체를 담당하고 있다. 스프링 버전 2.5.x부터 사용해왔으며 Vue.js는 1.0부터 사용해왔고 앵귤러(Angular), 리액트(React), 타입스크립트(TypeScript), 파이썬(Python)을 좋아한다.

번역 김현만

전자상거래 솔루션 개발을 통해 대규모 프로젝트에 대한 경험을 쌓았으며, 이후 게임 개발자로서 MMORPG부터 모바일, PS4, VR까지 다양한 프로젝트에 참여하면서 프론트엔드부터 백엔드까지, 그리고 게임 서버 구축부터 게임 클라이언트 개발까지 다양한 개발 경험을 쌓았다. 손노리에서 CTO로 ‘화이트데이: 학교라는 이름의 미궁’과 ‘프렌즈 레이싱’ 프로젝트 등을 진행했으며, 현재는 쿠팡의 매니저로서 함께 성장해가는 팀을 만들고 있다. 옮긴 책으로는 『안드로이드 센서 프로그래밍』(길벗 2013)이 있다.

번역 권봉혁

쿠팡에서 마이크로서비스 아키텍처, 스프링을 기반으로 백엔드 웹 개발을 주로 하고 있다. 백엔드 웹 개발을 주로 하고 있지만 프런트엔드 개발에도 관심이 많다. 이것저것 경험하는 것을 좋아한다.

번역 변준석

한국외국어대학교 디지털정보공학과를 졸업하고 쿠팡 백엔드 개발자로 일하면서 FC와 셀러를 위한 프로젝트에 참여했다. 현재에 안주하지 않기 위해 노력 중이며, 동료들과 문제에 대해 함께 고민하고 해결하는 것을 좋아한다.