2017 All Rights Reserved 초판 1쇄발행 지은이 펴낸이 펴낸곳 출판신고 주소 B 전화 / 팩스 홈페이지 www jpub kr

Size: px

Start display at page:

덕화 학
5 years ago
Views:

2 2017 All Rights Reserved 초판 1쇄발행 지은이 펴낸이 펴낸곳 출판신고 주소 B 전화 / 팩스 홈페이지 www jpub kr / 원고투고 jeipub@gmail com 독자문의 readers jpub@gmail com / 교재문의 jeipubmarketer@gmail com 편집부 / 소통 기획팀 / 회계팀 표지디자인 / 본문디자인 용지 / 인쇄 / 제본 ISBN 값 제이펍은독자여러분의아이디어와원고투고를기다리고있습니다. 책으로펴내고자하는아이디어나원고가있으신분께서는책의간단한개요와차례, 구성과저 ( 역 ) 자약력등을메일로보내주세요. jeipub@gmail.com

4 드리는말씀 이책에기재된내용을기반으로한운용결과에대해저자, 소프트웨어개발자및제공자, 제이펍출판사는일체의책임을지지않으므로양해바랍니다. 이책에기재한회사명및제품명은각회사의상표및등록명입니다. 이책에서는 TM, c, R 등의기호를생략하고있습니다. 이책에서사용하고있는실제제품버전은독자의학습시점에따라책의버전과다를수있습니다. 책의내용과관련된문의사항은저자가운영하고있는카페나출판사로연락주시기바랍니다. - 지은이 : - 출판사 : readers.jpub@gmail.com

5 머리말 ix 베타리더후기 xi SECTION 01 시작하기전에 SECTION 02 베스트푸드앱소개 SECTION 03 개발환경구성하기 MariaDB MariaDB MariaDB JDK SECTION 04 노드프로젝트살펴보기 차례 v

6 SECTION 05 안드로이드프로젝트생성하기 SECTION 06 권한화면구성하기 SECTION 07 시작화면구성하기 SECTION 08 메인화면구성하기 SECTION 09 프로필화면구성하기 SECTION 10 프로필아이콘이미지등록화면구성하기 SECTION 11 안드로이드맛집등록화면구성하기 vi 차례

7 AndroidManifest xml 166 SECTION 12 안드로이드맛집리스트화면구성하기 SECTION 13 안드로이드맛집정보화면구성하기 SECTION 14 안드로이드지도리스트화면구성하기 SECTION 15 안드로이드즐겨찾기화면구성하기 APPENDIX A 베스트푸드안드로이드코드 257 A A A.3 Application 281 A A A A A.8 AndroidManifest xml 314 A.9 build gradle 316 차례 vii

8 APPENDIX B 안드로이드 Tip & Tech, 라이브러리 318 B.1 Tip & Tech 318 B APPENDIX C 베스트푸드노드코드 360 C C APPENDIX D 노드 Tip & Tech, 모듈 372 D.1 Tip & Tech 372 D 찾아보기 405 viii 차례

9 2008 OS ios 2008 Node js Node js MariaDB Node js 1 옮긴이머리말 ix

10 한동호 x 옮긴이머리말

11 강경구 DB 김종욱 (KAIST) 박두현 ( 마블러스 ) 베타리더후기 xi

12 이아름 이요셉 Node js Express js 한홍근 ( 서울옥션블루 ) BestFood 제이펍은책에대한애정과기술에대한열정이뜨거운베타리더들로하여금출간되는모든서적에사전검증을시행하고있습니다. xii 베타리더후기

13 S E C T I O N 01 시작하기전에 1.1 이책의대상독자및선수지식 Node js MariaDB 이책의대상독자 본인의서비스를개발하고싶은독자 스타트업에서빠르게서비스를개발해야하는독자 1.1 이책의대상독자및선수지식 1

14 안드로이드서비스가어떻게개발되는지궁금한독자 학생이지만기본적인앱개발을해보고싶은독자 안드로이드를학습했지만서버개발을어떻게해야하는지궁금했던독자 Node js 이책을학습하기위해필요한선수지식 자바스크립트기본문법 안드로이드기초지식 웹서버의이해 1.2 이책의구성 Node js Java MariaDB Android Studio ' 베스트푸드앱소개 개발환경구성하기 단계별로안드로이드와노드개발하기 소스코드와 Tip & Tech, 주요라이브러리 2 SECTION 01 시작하기전에

15 1.3 학습방법 개발예정서비스 그림 1-1 서비스에필요한기술 자바 (JAVA) 안드로이드 (Android) 1.3 학습방법 3

16 노드 (Node.js) 마리아디비 (MariaDB), 에스큐엘 (SQL) SQL SELECT INSERT UPDATE JOIN ORDER BY WHERE 이책의학습방법 1. 책의내용을보면서처음부터하나씩코드를작성하면서학습한다. 2. 부록 에있는베스트푸드관련소스코드를살펴본다. 3. 부록 의 Tip & Tech 와관련라이브러리를살펴본다. 책의소스및이미지다운로드방법 GitHub GitHub 4 SECTION 01 시작하기전에

17 URL app 안드로이드소스코드 ( 안드로이드스튜디오프로젝트 ) web 노드소스코드 그림 1-2 GitHub GitHub Clone or download ZIP GIT GIT 문의사항 URL 학습방법 5

18 S E C T I O N 02 베스트푸드앱소개 2.1 안드로이드앱화면및기능소개 시작화면 Splash 그림 SECTION 02 베스트푸드앱소개

왼쪽메뉴 NavigationView 맛집리스트맛집정보를보여주는화면이며, 거리순,

맛집등록맛집을직접등록할수있는화면이다. 위치를선택하고기본적인정보를등록할수있다.

19 왼쪽메뉴 NavigationView 맛집리스트맛집정보를보여주는화면이며, 거리순, 인기순, 최근순으로맛집리스트를볼수있다. 지도리스트구글맵에맛집정보를보여주는화면이며, 지도화면에서리스트형태로맛집을볼수도있다. 즐겨찾기 즐겨찾기 버튼을클릭해사용자가즐겨찾기한맛집만을볼수있는화면이다. 맛집등록맛집을직접등록할수있는화면이다. 위치를선택하고기본적인정보를등록할수있다. 프로필설정프로필사진과이름, 성별, 생일을등록할수있는화면이다. 그림 2-2 맛집리스트 그림 그림 안드로이드앱화면및기능소개 7

20 맛집정보 그림 그림 지도리스트 그림 2-7 그림 SECTION 02 베스트푸드앱소개

21 즐겨찾기 그림 2-9 맛집등록 그림 2-10 그림 2-11 그림 안드로이드앱화면및기능소개 9

22 프로필설정 그림 2-13 그림 SECTION 02 베스트푸드앱소개

23 S E C T I O N 03 개발환경구성하기 3.1 전체구성살펴보기 Android Node js Express js MariaDB SQL 그림 전체구성살펴보기 11

24 3.2 프로젝트디렉터리구성하기 C: bestfood android web DB MariaDB bestfood android MariaDB 10.2 web 그림 3-2 bestfood 3.3 MariaDB 설치하기 MariaDB MySQL 1 MariaDB URL 그림 3-3 MariaDB 12 SECTION 03 개발환경구성하기

2 OS 64 mariadb 10 2 6 winx64 msi 그림 3-4

25 2 OS 64 mariadb winx64 msi 그림 3-4 MariaDB 3 No thanks 그림 3-5 MariaDB 3.3 MariaDB 설치하기 13

26 4 C: bestfood 그림 3-6 MariaDB 5 root New root password: bestfood Confirm: bestfood UTF 8 Use UTF8 as default server's character set 그림 3-7 MariaDB root 14 SECTION 03 개발환경구성하기

27 Next Next 3.4 MariaDB 데이터베이스생성하기 1 HeidiSQL 그림 3-8 HeidiSQL 2 Unnamed bestfood bestfood Rename 그림 3-9 HeidiSQL 3.4 MariaDB 데이터베이스생성하기 15

28 23 bestfood 그림 bestfood 그림 SECTION 03 개발환경구성하기

29 25 그림 SQL 그림 MariaDB 데이터베이스생성하기 17

30 3.5 MariaDB 테이블생성하기 4 bestfood_info bestfood_info_image bestfood_keep bestfood_member 그림 3-14 맛집정보테이블 (bestfood_info) bestfood_info member_seq name tel address latitude longitude description keep_cnt reg_date seq AUTO_INCREMENT 18 SECTION 03 개발환경구성하기

31 그림 3-15 bestfood_info bestfood_info create heidisql bestfood_info 테이블생성문 CREATE TABLE IF NOT EXISTS bestfood_info ( seq int(11) NOT NULL AUTO_INCREMENT, member_seq int(11) NOT NULL, name varchar(20) NOT NULL, tel varchar(20) NOT NULL, address varchar(50) NOT NULL, latitude double NOT NULL, longitude double NOT NULL, description varchar(500) NOT NULL, keep_cnt int(11) NOT NULL DEFAULT '0', reg_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (seq) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 맛집이미지정보테이블 (bestfood_info_image) bestfood_info_image info_seq filename image_memo reg_date 그림 3-16 bestfood_info_image 3.5 MariaDB 테이블생성하기 19

32 bestfood_info_image create bestfood_info_image 테이블생성문 CREATE TABLE IF NOT EXISTS bestfood_info_image ( seq int(11) NOT NULL AUTO_INCREMENT, info_seq int(11) NOT NULL, filename varchar(30) NOT NULL, image_memo varchar(100) NOT NULL, reg_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (seq) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 즐겨찾기테이블 (bestfood_keep) bestfood_keep member_ seq info_seq reg_date bestfood_keep 그림 3-17 bestfood_keep bestfood_ keep create bestfood_keep 테이블생성문 CREATE TABLE IF NOT EXISTS bestfood_info_image ( seq int(11) NOT NULL AUTO_INCREMENT, info_seq int(11) NOT NULL, filename varchar(30) NOT NULL, image_memo varchar(100) NOT NULL, reg_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (seq) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 20 SECTION 03 개발환경구성하기

33 회원정보테이블 (bestfood_member) phone name sextype birthday member_icon_filename reg_date 그림 3-18 bestfood_member bestfood_ member create bestfood_member 테이블생성문 CREATE TABLE IF NOT EXISTS bestfood_member ( seq int(11) NOT NULL AUTO_INCREMENT, phone varchar(30) NOT NULL, name varchar(30) DEFAULT NULL, sextype varchar(10) DEFAULT NULL, birthday varchar(30) DEFAULT NULL, member_icon_filename varchar(50) DEFAULT NULL, reg_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (seq) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 3.6 노드설치하기 1 URL 노드설치하기 21

34 2 v LTS 그림 그림 그림 그림 그림 SECTION 03 개발환경구성하기

35 그림 그림 그림 노드환경구성하기 npm express generator [ ] 375 npm npm install [ 모듈명 ] -g g global express generator nodemon 3.7 노드환경구성하기 23

36 npm install [ 모듈명 ] - - save save package json npm install package json package json 1 ConEmu bestfood 7 cmd 10 Windows cmd ConEmu ConEmu [ ] 377 C: bestfood> 2 express generator C: bestfood>npm install express-generator g express generator express h ejs C: bestfood>express -h Usage: express [options] [dir] Options: -h, --help output usage information --version output the version number -e, --ejs add ejs engine support --pug add pug engine support --hbs add handlebars engine support -H, --hogan add hogan.js engine support -v, --view <engine> add view <engine> support (ejs hbs hjs jade pug twig 24 SECTION 03 개발환경구성하기

37 vash) (defaults to jade) -c, --css <engine> add stylesheet <engine> support (less stylus compass sass)(defaults to plain css) --git add.gitignore -f, --force force on non-empty directory 3 bestfood ejs e C: bestfood>express -e web warning: option `- -ejs' has been renamed to `- -view=ejs' create : web create : web/package.json create : web/app.js create : web/public/images create : web/public/stylesheets create : web/public/stylesheets/style.css create : web/public/javascripts create : web/public create : web/routes create : web/routes/index.js create : web/routes/users.js create : web/views create : web/views/index.ejs create : web/views/error.ejs create : web/bin create : web/bin/www install dependencies: > cd web && npm install run the app: > SET DEBUG=web:* & npm start express generator package json c: bestfood web package json { "name": "web", "version": "0.0.0", "private": true, "scripts": { 3.7 노드환경구성하기 25

38 "start": "node./bin/www" }, "dependencies": { "body-parser": "~1.17.1", "cookie-parser": "~1.4.3", "debug": "~2.6.3", "ejs": "~2.5.6", "express": "~4.15.2", "morgan": "~1.8.1", "serve-favicon": "~2.4.2" } } 4 C: bestfood web public images -> img javascripts -> js stylesheets -> css 5 package json npm install package json web C: bestfood web>npm install 6 save package json package json formidable mysql mysql MariaDB MariaDB MySQL mysql C: bestfood web>npm install formidable mysql - -save web@0.0.0 C: bestfood web +- - formidable@1.1.1 `- - mysql@ bignumber.js@ readable-stream@ core-util-is@ inherits@ isarray@ SECTION 03 개발환경구성하기

39 `- - string_decoder@ `- - sqlstring@ 노드실행하기 Nginx Nginx 노드서버실행하기 npm start CTRL + C C: bestfood web>npm start > web@0.0.0 start C: bestfood web > node./bin/www N O T E nodemon npm start로노드를실행하면소스코드를수정한것이반영되지않는다. 그래서이런경우를위한여러모듈이있는데, 그중에서간단히사용할수있는게노드몬이다. 설치 : npm install nodemon g ( 어떤프로젝트에서도사용할수있게하기위해전역으로설치한다 ) 프로젝트디렉터리에서 nodemon이라고실행하면된다. 그러면소스코드가수정될경우수정을감지하고다시시작되는것을확인할수있다. 따라서우리는소스코드를변경할때마다서버를재시작해야하는번거로움을줄일수있다. 다음은 nodemon을실행한화면이다. C: bestfood web>nodemon [nodemon] [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node./bin/www` 3.8 노드실행하기 27

40 결과확인하기 localhost localhost 그림 3-27 ip C: bestfood web bin www 3.9 자바 JDK 설치하기 OS JDK URL JDK URL html N O T E OpenJDK 안드로이드스튜디오 2.2 버전부터는 OpenJDK 8이함께설치된다. 그래서자바를별도로설치해서사용할수도있고함께설치된 JDK를사용할수도있다. 별도로설치하고싶지않다면프로젝트에서 File Project Structure SDK Location 에있는 Use embedded JDK 를체크하면된다. 이렇게할경우, 이장에서설명하는 3.9 자바 JDK 설치하기 내용은건너뛰어도된다. 28 SECTION 03 개발환경구성하기

41 21 Accept License Agreement OS 그림 3-28 JDK 64 jdk 8u131 windows x64 exe 2 그림 3-29 JDK 3.9 자바 JDK 설치하기 29

42 23 그림 JDK 그림 SECTION 03 개발환경구성하기

43 3.10 안드로이드스튜디오설치하기 21 URL 그림 그림 그림 안드로이드스튜디오설치하기 31

Spring Boot/JDBC JdbcTemplate/CRUD 예제

Spring Boot/JDBC JdbcTemplate/CRUD 예제 오라클자바커뮤니티 (ojc.asia, ojcedu.com) Spring Boot, Gradle 과오픈소스인 MariaDB 를이용해서 EMP 테이블을만들고 JdbcTemplate, SimpleJdbcTemplate 을이용하여 CRUD 기능을구현해보자. 마리아 DB 설치는다음 URL 에서확인하자.