Softcon_하재권_Only javascript의 하이브리드 앱서버 ѫ기
- 2. 토요일에도 개발을 하는 나란 놈…
- 3. 그리고 발표하는 나란 놈… 하재권 | 개발자 그리고 취준생 경희대학교 컴퓨터공학 10학번 Acm-icpc 본선 진출 실패 삼성 소프트웨어 멤버쉽 탈락 hazxz@naver.com https://github.com/HaJaeKwon
- 5. 하이브리드 앱이란 ?
- 6. 하이브리드 앱이란 ?
- 7. 웹 앱 스마트폰으로 볼 수 있는 모바일 웹 사이트 웹 기술로 최대한 네이티브 앱 처럼 구현한 것 하드웨어 제어 불가능 설치하지 않아도 주소나 링크를 통해 접속 가능 스토어 등록 불필요 따라서 사용자가 업데이트 할 필요도 없다
- 8. 웹 앱 스마트폰에 최적화된 언어, SDK를 사용 플랫폼 별로 개발이 필요 언어에 대한 이해가 충분히 필요 개발기간이 길고 비용이 많이 든다
- 9. 웹 앱 두가지의 장점을 적절히 가짐 웹을 품은 네이티브 중요 로직들은 웹 기술로 빠르게 개발 하드웨어, 스토어 등록은 네이티브 처럼
- 10. 하이브리드 vs 네이티브
- 11. 그래서 어떻게 개발하는데 ?
- 12. 이렇게 개발하면 된다 Fuse
- 13. 이렇게 개발하면 된다 Fuse는 퍼포먼스와 애니메이션에 중점을 둔 크로스 플랫폼 앱 개발 도구
- 14. 이렇게 개발하면 된다 Fuse는 C#에서 .Net을 제거한 HTML과 유사한 Uno라는 마크업 언어를 사용
- 15. 이렇게 개발하면 된다 Ionic는 AngularJS를 근간에 두고 하드웨어 제어는 Cordova API를 사용
- 16. 이렇게 개발하면 된다 React Native는 React.js를 사용하고 결과물이 네이티브
- 17. 이렇게 개발하면 된다 하지만 안드로이드에서는 ProgressBar IOS에서는 ActivityIndicator 카카오 톡, 네이버 지도, 드롭 박스 등의 외부 기능 사용이 어려울지도..
- 21. 무엇을 만들고자 했나?
- 22. 이런 프로젝트입니다
- 23. 기반 기술 NPM + AngularJS + Cordova
- 24. 기반 기술 NPM + AngularJS + Cordova
- 25. Node Package Manager NodeJS에서 사용되는 모듈을 패키지로 모아놓은 것 Linux의 apt-get CentOS의 yum NodeJS 설치하면 자동으로 설치 된다.
- 26. AngularJS 구글에서 개발 자바스크립트 프레임워크 MVC 패턴 개발 양방향 데이터 바인딩 의존성 주입(DI) 직관적인 API
- 27. AngularJS 구글에서 개발 자바스크립트 프레임워크 MVC 패턴 개발 양방향 데이터 바인딩 의존성 주입(DI) 직관적인 API
- 28. AngularJS – 양방향 데이터 바인딩 Scope에 데이터를 넣어두면 View는 항상 데이터를 표현할 때 Scope를 참고한다.
- 29. Cordova 하드웨어( 진동, 카메라, 파일 시스템, 블루투스, 와이파이 등)제어 API
- 30. Cordova AngularJS에서 Cordova API를 사용하여 하드웨어를 제어하기 위해서는 ngCordova라는 모듈을 import 하여 사용
- 31. Cordova 카메라를 사용할꺼면 npm을 사용하던 것 처럼 cordova 명령어를 통해 plugin을 추가할 수 있다
- 32. Cordova 그 후 AngularJS의 Controller 부분에서 $cordovaCamera 모듈을 불러오면 내장된 함수를 사용할 수 있다
- 34. 초기 프로젝트 종류
- 35. npm install –g ionic cordova ionic start myApp tabs cd myApp ionic serve --lab 참 쉽죠 ?
- 38. ionic list
- 39. ionic 에서 리스트 만드는 법 www/templates/tab-chats.html ion-list 태그로 간단하게 만들 수 있다
- 40. android 에서 리스트 만드는 법 adapter 클래스 생성과 adapter의 getView 메소드 구현이 필수 xml도 작성해야 된다
- 41. View와 controller 연결 방법 www/js/app.js
- 42. View와 controller 연결 방법 www/js/controllers.js view에서 쓰고 싶은 data나 함수를 $scope에 달아서 작성하면 끝
- 43. 기반 기술
- 44. Nodejs Nodejs는 구글 크롬의 자바스크립트엔진 V8에 기반해 만들어진 서버 사이드 플랫폼 비동기 I/O 처리 빠른 속도 싱글 쓰레드 / 뛰어난 확장성 라이선스
- 45. Nodejs
- 46. Nodejs
- 47. Expressjs Nodejs만 가지고 앱을 만든다면…
- 48. Expressjs Nodejs만 가지고 앱을 만든다면… Http 요청 본문 파싱 쿠키 파싱 세션 관리 URL 경로와 Http 요청 메서드를 기반으로 한 복잡한 if 조건을 통한 라우팅 구성 데이터 타입을 토대로 한 적절한 응답 헤더 결정
- 49. Expressjs 한번이면 괜찮지만 Nodejs앱 만들 때 마다 해야 된다면 ?
- 51. Expressjs Expressjs는 이러한 문제를 해결 해주고 웹 앱에 MVC 형태의 구조를 제공한다.
- 52. Expressjs npm install –g express-generator express –f . npm install
- 53. Expressjs 초기 디렉토리 구조를 잡아준다 간단한 로직은 app.js에 바로 작성해도 된다. 하지만 routes, view를 나누어 작성할 수도 있다.
- 54. Expressjs Express 설정에 필요한 모듈, 의 존성을 package.json에서 확인, 추가 할 수 있고 Npm install 로 설치할 수 있다
- 57. Mongo DB
- 58. Mongo DB NoSQL ?
- 59. Mongo DB Not only SQL
- 60. Mongo DB 관계형 DB가 아니다 고정된 스키마가 없고 JOIN도 없다 JSON 데이터를 다루기 쉽기 때문에 Nodejs와 잘 어울림
- 61. 개발 / 테스트 도구
- 62. 개발 / 테스트 도구 앞의 내용들은 사실 블로그, 책 찾아보면 다 나오는 내용들..
- 63. 개발 도구 – Cloud9 IDE
- 64. 개발 도구 – Cloud9 IDE 소규모 프로그래밍, 학교 숙제
- 65. 개발 도구 – Cloud9 IDE 소규모 프로그래밍, 학교 숙제 노트북 없을 때
- 66. 개발 도구 – Cloud9 IDE 소규모 프로그래밍, 학교 숙제 노트북 없을 때 PC방에서 프로그래밍 하고 싶을 때
- 67. 개발 도구 – Cloud9 IDE Github 계정 연동 가입 가능
- 68. 개발 도구 – Cloud9 IDE
- 69. 개발 도구 – Cloud9 IDE
- 70. 개발은 이렇게 하고…
- 71. 개발은 이렇게 하고… 그럼 테스트는 ?
- 72. 예전이라면 이렇게 …
- 73. 테스트 도구 - Postman
- 74. 개발 프로세스 Cloud9의 이점 – 서버가 필요없다 터미널에서 npm start 해주면 어디서든지 https://{project name}-{user name}.c9users.io/ 로 바로 접속 가능
- 75. 개발 프로세스 Cloud9의 이점 – 서버가 필요없다 터미널에서 npm start 해주면 어디서든지 https://{project name}-{user name}.c9users.io/ 로 바로 접속 가능 npm start 하고 Postman으로 바로 테스트
- 76. 개발 프로세스 모바일에서든, 웹에서든 상관없다 소규모, 단기적 프로젝트에 딱 맞다 Cloud9에서 프로젝트 다운로드 받는 것도 가능
- 77. 오늘의 목표 Cloud9에서 Expressjs를 이용해서 Nodejs 앱을 만들고 Nodejs에서 mongoDB를 연결한 뒤 데이터 삽입, 검색과 관련된 Rest API를 만들고 실행 Postman으로 테스트 Ionic에서 list에 데이터 불러오기까지
- 78. 참고자료 Fuse 소개 : http://www.slideshare.net/EungShikKim/fuse-48974587 Ionic으로 모바일 앱 만들기 : http://www.slideshare.net/ssusercf5d12/ionic-1 Ionic 설치 : https://ionicframework.com/docs/v2/getting-started/installation/ Ionic UI component : http://ionicframework.com/docs/components/ AngularJS를 소개합니다 : http://www.nextree.co.kr/p3241/ 리액트 네이티브로 시작하는 앱 개발 : https://realm.io/kr/news/react-native/ React Native vs Ionic: A Side-by-Side Comparison : https://www.codementor.io/fmcorz/tutorials/react-native-vs-ionic-du1087rsw Express.js란 무엇인가? : http://wikibook.co.kr/article/what-is-expressjs/ Nodejs 강좌 : https://velopert.com/133 Nodejs 강좌 : http://blog.naver.com/PostList.nhn?blogId=azure0777&from=postList&categoryNo=18
- 79. 실습 내용 – ionic 앱 만들기 nodeJS설치 : https://nodejs.org/en/ 에서 LTS버젼으로 받아 설치, npm도 자동으로 설치 된다. 명령 프롬프트 창(cmd창)을 키시고 node --version, npm --version 으로 설치를 확인할 수 있다. npm install –g ionic cordova로 ionic와 cordova를 설치한다 (cordova가 필요없다면 ionic만 해도 된다) ionic start App tabs 명령어로 ionic 프로젝트 생성
- 80. 실습 내용 – ionic 앱 만들기 ng-repeat 속성을 이용한 동적 html을 작성
- 81. 실습 내용 – ionic 앱 만들기 연결된 Controller에서 scope에 데이터를 추가
- 82. 실습 내용 – ionic 앱 만들기 Ionic serve --lab 명령어로 브라우저에서 테스트 가능
- 83. 실습 내용 – nodejs 앱 만들기 Cloud9 홈페이지 접속 : https://c9.io/ 회원 가입 후 로그인 Create a new workspace 로 새 프로젝트 생성
- 84. 실습 내용 – nodejs 앱 만들기 프로젝트 이름을 정하고 template은 Blank로 설정
- 85. 실습 내용 – nodejs 앱 만들기 npm install –g express-generator express –f . npm install
- 86. 실습 내용 – nodejs 앱 만들기 조회해볼 데이터를 app.js 파일에 간단하게 생성
- 87. 실습 내용 – nodejs 앱 만들기 GET 메소드이기에 app.get 함수를 호출하고 첫번째 파라미터로 url 경로, 두번째 파라미터로 함수 로직을 다음과 같이 작성
- 88. 실습 내용 – nodejs 앱 만들기 터미널에 npm start를 입력하고 상단의 Run을 눌러 주소를 확인 가능
- 89. 실습 내용 – nodejs 앱 만들기 POSTMAN으로 테스트 GET 메소드로 맞추고 주소를 적고 Send 버튼을 클릭
- 90. 실습 내용 – nodejs 앱 만들기 1개만 가져오는 api도 잘 작동
- 91. 실습 내용 – nodejs 앱 만들기 POST 메소드로 데이터 INSERT도 가능
- 92. 실습 내용 – nodejs 앱 만들기 POSTMAN에서 메소드를 POST로 설정 Body 탭에서 작성 폼을 raw – JSON 으로 설정, json 데이터 작성
- 93. 실습 내용 – nodejs 앱 만들기 다시 모든 데이터를 가져와보면 아이템이 하나 더 추가된 것을 확인 가능 이런 방법을 통해 DB에 INSERT, SELECT 가 가능
- 94. 실습 내용 – ionic과 nodejs 연결 서버에서 arts 데이터를 받아와 앱에 보여주는 과정 우선 controlle에서 $http 추가 http 통신의 Get메소드를 통해 서버 api에 접근, 코드 변경 후에는 저장
- 95. 실습 내용 – ionic과 nodejs 연결 서버에서 CORS 문제가 발생 하기 때문에 서버에 다음과 같은 코드를 추가 반드시 수정된 파일을 저장하고 서버를 종료했다가 다시 실행 !! (ctrl + s (저장) -> (터미널에서) ctrl + c (서버 종료) -> (터미널에서) npm start (서버 실행)
- 96. 실습 내용 – ionic과 nodejs 연결 서버에서 보내준 3개의 data를 표현하는 것을 확인 가능 크롬의 경우 ctrl + shift + i 를 누르면 console.log로 출력한 메시지를 볼 수 있다
- 97. THANK YOU !