추가 적립 안내

바딘 프레임워크(Vaadin Framework)는 최종 사용자와 개발자를 만족시킬 수 있는 자바 프레임워크로 개발자에겐 날개를, 최종 사용자에겐 최적의 경험을 선사하는 프레임워크이다.

바딘 프레임워크는 고품질의 웹 기반 사용자 인터페이스를 쉽게 만들고 유지 관리 할 수 있도록 설계된 자바 웹 응용 프로그램 개발 프레임워크다. 바딘은 서버 측과 클라이언트 측의 두 가지 프로그래밍 모델을 지원한다. 특히 서버 중심 프로그래밍 모델이 더 강력하다. AWT, Swing 또는 SWT와 같은 기존의 자바 툴킷을 사용하여 데스크탑 응용 프로그램을 프로그래밍하는 것과 마찬가지로 웹 및 프로그래밍 사용자 인터페이스를 잊어 버릴 수 있다.

전통적인 웹 프로그래밍은 새로운 웹 기술을 배우는 데 시간을 보내는 재미있는 방법이지만, 여기서는 생산성을 높이고 애플리케이션 로직에 집중하고자 할 것이다. 서버 측 바딘 프레임 워크는 브라우저에서 사용자 인터페이스를 관리하고 브라우저와 서버간에 AJAX 통신을 관리한다. 바딘 방식을 사용하면 HTML이나 JavaScript와 같은 브라우저 기술을 직접 배우거나 처리할 필요가 없다.

이처럼 이 책은 순수한 자바 코드만을 이용 하여 웹 화면을 개발 가능 하도록 도와 주는 자바 UI 프레임워크인 바딘을 설명하기 위해서 하나의 샘플 웹 프로젝트설계를 시작으로 서버 사이드 개발 → 클라이언트 사이드 개발 → 스프링 연동 → 테스트 개발까지 크게 총 4 단계로 구성 되어 있으며 최종 동작하는 하나의 완성된 웹 프로젝트를 만들어 가는 것을 큰 주제로 삼고 있다.

이 책의 구성

제1부 서버 사이드 개발편(1장 ~ 12장)
바딘 프레임워크의 개발은 웹 화면을 구성 할 수 있는 모두 미리 개발 된 바딘의 자바 API만을 이용해서 구성요소들을 블록처럼 쌓아 가면서 화면을 만들게 된다. 이미 알고 있는 HTML, CSS, JavaScript를 바딘의 API만을 가지고 어떻게 개발 하여야 하는 지와 서버 사이드에서는 입장에서의 요청(Request), 응답(Response)에 대한 처리는 또 다시 바딘에서는 어떻게 다뤄야 되는지 가상의 세미나 웹 프로젝트를 설계 하고 여러 화면들을 만들어 가면서 알아 보게 된다.

1장. 바딘의 이해
바딘의 총 7가지 프로젝트를 알아보고 그 중에 가장 핵심이 되는 프로젝트인 바딘프레임워크에는 어떤 기능들이 있고 이런 기능들을 이용해서 어떤 사이트를 만들 수 있는지 눈으로 먼저 이해해 본다.
2장. 프로젝트 시작하기
가상의 웹 프로젝트를 만들기 위해서 먼저 프로젝트의 기능 정리와 데이터 모델링까지 설계하고 바딘 웹 프로젝트를 처음으로 만들어 본다.

3장. 처음 만들어 보는 화면(UI)
간단한 로그인 화면을 처음으로 만들어 보면서 어떤 기능들을 사용 하여야 하고 또 어떻게 디자인을 적용 할 수 있는지와 사용자의 동적인 이벤트는 다시 어떻게 처리하여야 하는지 알아 본다.

4장. 뷰(View)와 네비게이터(Navigator)의 이해
로그인이 정상적으로 처리 되었을 때 접근 되는 4개의 독립적인 화면을 개발하고 각각의 주소로 접근하는 방법과 단일 페이지 애플리케이션(Single Page Application: 최초 한번 페이지를 전체 로딩 한 이후부터는 변경이 필요한 부분만 갱신 시키는 방법)으로 개발하기 위한 필수 구성 요소에 대해 알아 본다.

5장. 메뉴를 이용한 동적 뷰(View) 전환
기본적인 메인 화면과 왼쪽 메뉴 리스트를 만들고 사용자 권한에 맞는 메뉴를 노출하는 방법과 메뉴가 클릭 되었을 경우 동적으로 해당 화면을 변경 시키는 단일 페이지 애플리케이션 방식의 웹 사이트로 구성해 본다.

6장. 스타일 직접 다루기
로그인 화면에 배경 이미지를 스타일로 직접 추가해 보고 반응형 웹까지 지원 하고자 할 때는 또 어떻게 개발 하여야 하는지 스타일을 직접 다루는 방법에 대해서 알아 보도록 하자. 또한 회사나 프로젝트의 성격에 맞는 색상과 폰트로 변경하고자 할 때 바딘을 또 다시 어떻게 이용하여야 하는지 알아 본다.

7장. 데이터 컨트롤과 파일 다루기
폼을 만들고 팝업으로 띄워 수정 하는 화면을 만들고 여기에 이미지까지 업로드 하는 기능을 추가 시켜 처음으로 데이터 스토어와 연계하여 CRUD를 처리하는 방법에 대해 접근해 본다.

8장. 테이블(Table)로 처리하는 CRUD
배열 데이터 객체를 처리하는 바딘의 테이블 기능을 이용하여 이전 장에서 미리 개발 되었던 폼 화면과의 연동을 통해서 CRUD를 처리해 본다.

9장. 그리드(Table)로 처리하는 CRUD
배열 데이터 객체를 처리하는 바딘의 테이블과 그리드 기능을 어떤 경우에 어떻게 사용 하여야 되는지 알아 보고 이번에는 그리드 기능을 이용해서 CRUD를 처리 하면서 테이블과 그리드에 대한 특이점과 장단점에 대해서 알아 본다.

10장. 멀티 컴포넌트를 다루는 복잡한 화면
마지막 개발 화면인 대시보드 메인 화면을 통해서는 복잡한 여러 기능들을 하나의 화면에서 다루고 이 기능들을 동적으로 조작하고 관리하는 기법에 대해 다루게 된다.

11장. 서버 푸쉬(Push) 다루기
나의 이벤트가 또 다른 사용자의 화면에서도 동적으로 이벤트가 발생 되는 푸쉬 기능을 추가해 보면서 비동기적인 작업이 화면의 생명 주기와 어떤 관계가 있는지 알아 본다.

12장. 모바일 웹(모바일+반응형) 다루기
서버 사이드 개발편의 마지막 기능으로 모바일 웹까지 지원하는 사이트로 진화 시켜 본다.

제2부 클라이언트 사이드 개발편(13장 ~ 16장)
가상의 완성된 세미나 웹 프로젝트에 적용한 간단한 기능 하나를 직접 바딘의 API형태로 직접 커스텀하게 만들어 보면서 지금까지 사용했던 바딘의 API들이 어떻게 브라우저와 서버를 동작(Google Web Toolkit-구글웹툴킷, Remote Procedure Call-원격프로시저호출) 시키는지 비로서 알게 되고 이렇게 만든 자신만의 바딘 API를 애드온즈(Add-ons, 오픈 마켓)까지 직접 공개해 봄으로써 바딘 저장소의 공유와 참여가 가지는 바딘의 생명력에 대해서도 다시 한번 느끼게 된다.

13장. Add-ons(애드온즈) 사용하기
자신이 직접 만든 바딘 API를 누구나 공개 할 수 있는 바딘 애드온즈(Add-ons, 오픈마켓) 저장소 공간에 대해 살펴 보고, 공개된 바딘 API 기능 하나를 추가 시켜 사용해 본다.

14장. My Add-ons 프로젝트 시작하기
클라이언트 사이드 개발의 시작인 바딘 애드온즈(Add-ons) 프로젝트를 생성 하여 자신만의 바딘 API 개발을 준비해 본다.

15장. My Add-ons 프로젝트 개발하기
모바일 환경에서 자주 접하는 온오프(On/Off) 기능을 OnOffSwitch Add-ons라는 바딘 클라이언트 사이드 프로젝트를 통해서 직접 개발해 보면서 비로써 전체적인 바딘 프레임워크의 동작을 이해해 본다.

16장. My Add-ons 프로젝트 관리하기
개발 완료된 OnOffSwitch Add-ons 프로젝트를 패키지화 하여 바딘 애드온즈(Addons) 저장소에 직접 등록하여 공개한 후 이전의 가상의 웹 샘플 프로젝트에 다시 이 기능을 적용해 본다.

제3부 스프링 연동과 테스트 개발편(17장 ~ 19장)
웹 애플리케이션을 개발 한다면 빈번히 사용 되는 스프링 프레임워크와의 연동을 통해서 실무에서도 적용 가능한 웹 프로젝트로 전환 시키는 방법에 대해서 알아 보고 자바로만 개발 된 바딘의 웹 화면들을 어떻게 테스트 하여야 하는지 로그인 화면을 기준으로 단위 테스트와 통합 테스트까지 개발해 본다.

17장. 스프링 연동하기
바딘으로 개발 된 가상의 웹 샘플 프로젝트를 스프링 프레임워크와 연동 시켜 실무에서도 사용 가능한 웹 프로젝트의 모습으로 진화 시켜 본다.

18장. 테스트 코드 작성과 실행
로그인 화면을 가지고 테스트 코드를 어떻게 작성하고 실행 하는지 제이유닛(JUnit)을 이용한 단위 테스트 작성 방법과 셀레니움(Selenium), 테스트벤치(TestBench)를 활용한 통합 테스트 과정까지 개발해 본다.

19장. 정리하기
지금까지 알게 된 바딘의 구조와 기능들을 다시 한번 바딘 런타임 아키텍처(VaadinRuntime Architecture) 화면을 통해서 살펴보면서 최종 정리 한다.

대상 독자
이 책은 물론 자바 개발자를 위한 책이다. 그 중에서도 비즈니스 웹 애플리케이션을 개발 하면서 자바로 개발 하는 시간 보다 화면을 다루기 위한 HTML, CSS, JavaScript를 개발 하는데 더 많은 시간을 소비 하고 있다거나, 화면에서 발생 되는 JavaScript 에러를 찾는데 꽤 많은 시간을 낭비 한다거나, AngularJS나 ReactJS와 같은 따끈 따끈한 JavaScript 라이브러리 혹은 프레임워크가 요즘 들어 이해 되지 않는 자바 개발자가 주요 독자이다. 또한 로그 관리 웹, 배치 관리 웹, 서비스 관리 웹, NoSQL 관리 웹, 서버 관리 웹과 같은 비즈니스 웹 애플리케이션을 만들고는 싶으나 정작 웹 화면을 개발 한지 너무 오래 되어서 만들지 못했던 서버 사이드 개발자도 대상 독자이다.

[추천사]

"바딘 프레임워크를 사용하면 익숙한 구성 요소 기반 접근 방식을 사용하여 다른 단일 UI 프레임 워크보다 빠르게 단일 페이지 웹 응용 프로그램을 만들 수 있습니다. 복잡한 웹 기술을 잊어 버리고 자바 또는 다른 JVM 언어만 사용하십시오. 플러그인만 있으면 애플리케이션에 액세스 할 때 브라우저만 필요합니다."
-자바 개발자를 위한 단일 페이지 웹 프레임워크 #1(#1 single-page web framework for Java developers), 2014년 자바 웹 프레임워크(Java Web Framework)에 대한 Decision Maker의 안내서-

"바딘 TouchKit을 사용함으로써 우리는 CSS, JavaScipt, HTML 등과 같은 일반적인 웹 애플리케이션의 모든 까다로운 세부 사항보다는 기능에 집중할 수있었습니다. 바딘의 도움을 받아 우리는 기능적이고 직관적 인 GUI를 구축했습니다.“
- Christian Burger, PUMA SE-

"우리가 도움을 필요로 할 때마다, 바딘은 그것을 우리에게 제공해주었습니다. 그리고 인보이스 처리는 그다지 문제가되지 않았습니다. Vaadin 프레임워크를 사용하면 시장에 나와 있는 거의 모든 장치에 소프트웨어를 개발할 수 있습니다."

- Andreas Runschke, FLOWFACT AG 제품 매니저 -

"바딘을 사용하면 웹 응용 프로그램에서 고급 분석 대시 보드를 작성할 수 있습니다. 이 기술은 특히 Swing 또는 Windows Forms에서 데스크톱 응용 프로그램을 만드는 데 익숙한 경우 쉽게 배울 수 있습니다 . 바딘을 선택하고 개발 팀이 더욱 민첩하게 되었습니다. 백엔드 개발자조차도 기술에 익숙하며 일반적으로 프론트엔드 개발자에게 엄격하게 부여되는 작업을 수행할 수 있기 때문입니다. 우리 프로젝트에서 바딘은 Maven이 관리하는 더 큰 시스템의 일부인 Grails 애플리케이션에 내장되어 있습니다. 이러한 조합을 통해 정교한 사용자 인터페이스를 신속하게 생성, 편집 및 유지할 수 있습니다. "
- Michał Brzezicki, SentiOne 기술 책임자 -

제1부 : 서버 사이드 개발

CHAPTER.1 바딘의 이해
1.1 7가지 바딘 프로젝트 5
1.2 눈으로 먼저 이해하는 바딘의 기능 11
1.3 바딘 프레임워크란? 18
1.4 개발을 시작하기 전에 24

CHAPTER.2 프로젝트 시작하기
2.1 5분만에 프로젝트 만들기 30
2.2 프로젝트 빌드 구성의 이해 34
2.3 이클립스로 프로젝트 개발하기 38

CHAPTER3 처음 만들어 보는 화면(UI)
3.1 UI 화면 만들기 52
3.1.1 화면 구성하기 57
3.1.2 스타일 적용하기 61
3.1.3 이벤트 처리하기 67
3.2 기본(내장) 객체 다루기 73
3.2.1 세션(Session)과 쿠키(Cookie) 다루기 76
3.2.2 요청(Request)에 응답(Response)하기 86
3.3 Validator과 Exception 처리의 이해 90

CHAPTER4 뷰와 네비게이터의 이해
4.1 URI Location의 이해 101
4.2 뷰(View) 만들기 105
4.3 네비게이터(Navigator)의 이해 108
4.4 에러 뷰(ErrorView) 추가하기 111

CHAPTER.5 메뉴를 이용한 동적 뷰(View) 전환
5.1 메뉴 구성의 이해 116
5.2 네비게이터(Navigator) 만들기 119
5.3 네비게이터(Navigator) 적용하기 125
5.4 메뉴 만들기와 네비게이터(Navigator) 연동 128

CHAPTER.6 스타일 직접 다루기
6.1 스타일을 관리하는 .SCSS 144
6.2 반응형 웹 지원하기 152

CHAPTER.7 데이터 컨트롤과 파일 다루기
7.1 데이터 모델과 컴포넌트 바인딩의 이해 164
7.2 필드 그룹(FieldGroup)의 이해 172
7.3 폼(Form)과 서브윈도우(Sub-Window) 176
7.3.1 폼(Form) 만들기 178
7.3.2 서브윈도우 이벤트 핸들러 만들기 184
7.3.3 폼(Form)과 서브윈도우 연동하기 188
7.4 파일 업로드 처리의 이해 194
7.4.1 이미지 업로더 만들기 195
7.4.2 폼(Form)과 이미지 업로더 연동하기 200

CHAPTER.8 테이블로 처리하는 CRUD
8.1 테이블의 이해 212
8.2 테이블 만들기 213
8.3 테이블 데이터 바인딩 216
8.4 테이블 컬럼 추가와 스타일 제어 220
8.5 테이블과 폼을 이용한 CRUD 225

CHAPTER.9 그리드로 처리하는 CRUD
9.1 그리드의 이해 234
9.2 그리드 만들기 242
9.3 그리드 데이터 바인딩 246
9.4 그리드 편집 속성 제어 249
9.4 그리드 처리하는 CRUD 253

CHAPTER.10 멀티 컴포넌트를 다루는 복잡한 화면
10.1 복잡한 화면 구성의 이해 264
10.2 복잡한 화면의 레이아웃 다루기 273
10.3 복잡한 화면의 이벤트 연결하기 283
10.4 복잡한 화면의 데이터 간결하게 표현하기 295

CHAPTER.11 서버 푸쉬 다루기
11.1 푸쉬(Push) 설정 308
11.2 메시지 브로드 캐스팅 312

CHAPTER.12 모바일 웹(모바일+반응형) 다루기
12.1 복잡한 반응형 웹 스타일 처리하기 320
12.2 요청(Request)에 뷰포트(Viewport)로 응답하기 328
12.3 요청(Request)된 웹 브라우저 정보 얻기 332

제2부 : 클라이언트 사이드 개발

CHAPTER.13 Add-ons(애드온즈) 사용하기
13.1 Add-ons(애드온즈) 찾아보기 340
13.2 Add-ons(애드온즈) 적용하기 343

CHAPTER.14 My Add-ons 프로젝트 시작하기
14.1 OnOffSwitch 프로젝트 만들기 350
14.2 OnOffSwitch 프로젝트 이클립스로 개발하기 355
14.3 OnOffSwitch 프로젝트 실행환경 359
14.4 OnOffSwitch 프로토타입 만들기 364

CHAPTER.15 My Add-ons 프로젝트 개발하기
15.1 OnOffSwitch 위젯(Widget) 개발하기 370
15.2 OnOffSwitch RPC 연결하기 378
15.3 OnOffSwitch 이벤트 핸들링 387
15.3.1 공유 상태(Shared State)와 값(Value) 388
15.3.2 이벤트 처리하기 397

CHAPTER.16 My Add-ons 프로젝트 관리하기
16.1 OnOffSwitch My Add-ons 등록하기 406
16.2 OnOffSwitch My Add-ons 적용하기 410

제3부 : 스프링 연동과 테스트 개발

CHAPTER.17 스프링 연동하기
17.1 스프링 환경 설정하기 418
17.2 새롭게 추가된 Stereotype Annotation의 이해 422
17.3 새롭게 추가된 Stereotype Annotation의 적용 433

CHAPTER.18 테스트 코드 작성과 실행
18.1 JUnit을 이용한 단위 테스트 446
18.2 테스트 벤치와 셀레니움을 활용한 통합 테스트 458
18.3 메이븐 통합 테스트 빌드 환경 471

CHAPTER.19 정리하기
19.1 뒤늦게 이해하는 런타임 아키텍처 477
19.2 새롭게 맞이하는 바딘8 483
19.2.1 바딘8의 대표적인 개선사항 484
19.2.2 바딘8 마이그레이션 툴 사용하기 492

부록
1. 추천 무료 애드온즈 499
2. 웹 컴포넌트의 이해 504
3. GWT 직접 사용해 보기 512
4. RPC 직접 구현해 보기 517
5. 전자정부프레임워크 연동하기 523

서문 중에서

바딘의 공식 개발자 가이드 문서는API 기능에 대해 대략 700 페이지가 넘는 친절한 설명과 다양한 주제로 부족함 없는 많은 내용을 담고 있다. 하지만 하나의 완성된 실무적인 웹 애플리케이션 서버를 개발하기 위해서는 바딘의 API 기능들을 어떻게 배치하고, 조합하고, 활용하고 개발 하여야 하는지가 어쩌면 많은 개발자들이 좀 더 알고 싶은 내용이기 때문에 이 책에서는 바딘의 API 기능들을 단편적으로 소개 하기 보다는 현장에서 필요로 하는 적정한 수준의 컨텐츠를 기반으로 하나의 샘플 웹 프로젝트를 키워 나가면서 그때 그때 필요한 바딘의 API들을 사용해 보면서 최종 하나의 완성된 웹 애플리케이션을 만들어 보는 과정에 대한 Growing(키워나가는)~이라는 주제로 책을 쓰고자 노력 하였고 책의 샘플 웹 프로젝트 개발 코드의 커밋 히스토리가 책의 목차가 될 수 있도록 노력 하였다. (중략)