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

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

프런트엔드와 백엔드 웹 개발에서 스프링과 Vue를 사용해 효율성을 높이자!

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

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

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

 

★ 이 책에서 다루는 내용 ★

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

제임스 J. 예 (James J. Ye)

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

김현만

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

권봉혁

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

변준석

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

  • ▣ 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 준비하기
      • 서버 준비하기
      • 젠킨스로 빌드하기
    • 요약
    • 참고용 사이트