softcon_하재권_only javascript의 하이브리드 앱서버 도전기
TRANSCRIPT
Only Javascript의하이브리드 앱/서버 도전기
토요일에도 개발을 하는 나란 놈…
그리고 발표하는 나란 놈…
하재권 | 개발자 그리고 취준생
경희대학교 컴퓨터공학 10학번
Acm-icpc 본선 진출 실패삼성 소프트웨어 멤버쉽 탈락
[email protected]://github.com/HaJaeKwon
하이브리드 ?Hybrid ?
하이브리드 앱이란 ?
하이브리드 앱이란 ?
웹 앱
스마트폰으로 볼 수 있는 모바일 웹 사이트
웹 기술로 최대한 네이티브 앱 처럼 구현한 것
하드웨어 제어 불가능
설치하지 않아도 주소나 링크를 통해 접속 가능
스토어 등록 불필요
따라서 사용자가 업데이트 할 필요도 없다
웹 앱
스마트폰에 최적화된 언어, SDK를 사용
플랫폼 별로 개발이 필요
언어에 대한 이해가 충분히 필요
개발기간이 길고 비용이 많이 든다
웹 앱
두가지의 장점을 적절히 가짐
웹을 품은 네이티브
중요 로직들은 웹 기술로 빠르게 개발
하드웨어, 스토어 등록은 네이티브 처럼
하이브리드 vs 네이티브
그래서 어떻게 개발하는데 ?
이렇게 개발하면 된다
Fuse
이렇게 개발하면 된다
Fuse는퍼포먼스와 애니메이션에
중점을 둔크로스 플랫폼 앱 개발 도구
이렇게 개발하면 된다
Fuse는C#에서 .Net을 제거한
HTML과 유사한
Uno라는 마크업 언어를 사용
이렇게 개발하면 된다
Ionic는AngularJS를 근간에 두고
하드웨어 제어는 Cordova API를 사용
이렇게 개발하면 된다
React Native는React.js를 사용하고결과물이 네이티브
이렇게 개발하면 된다
하지만안드로이드에서는 ProgressBar
IOS에서는 ActivityIndicator
카카오 톡, 네이버 지도, 드롭 박스 등의외부 기능 사용이 어려울지도..
무엇을 만들고자 했나?
이런 프로젝트입니다
기반 기술
NPM + AngularJS + Cordova
기반 기술
NPM + AngularJS + Cordova
Node Package Manager
NodeJS에서 사용되는 모듈을패키지로 모아놓은 것
Linux의 apt-getCentOS의 yum
NodeJS 설치하면 자동으로 설치 된다.
AngularJS
구글에서 개발자바스크립트 프레임워크
MVC 패턴 개발양방향 데이터 바인딩의존성 주입(DI)직관적인 API
AngularJS
구글에서 개발자바스크립트 프레임워크
MVC 패턴 개발양방향 데이터 바인딩의존성 주입(DI)직관적인 API
AngularJS – 양방향 데이터 바인딩
Scope에 데이터를 넣어두면
View는 항상 데이터를 표현할 때 Scope를 참고한다.
Cordova
하드웨어( 진동, 카메라, 파일 시스템, 블루투스, 와이파이 등)제어 API
Cordova
AngularJS에서 Cordova API를 사용하여
하드웨어를 제어하기 위해서는
ngCordova라는 모듈을 import 하여 사용
Cordova
카메라를 사용할꺼면 npm을 사용하던 것 처럼
cordova 명령어를 통해 plugin을 추가할 수 있다
Cordova
그 후 AngularJS의
Controller 부분에서
$cordovaCamera 모듈을
불러오면
내장된 함수를 사용할 수 있다
초기 프로젝트 종류
npm install –g ionic cordova
ionic start myApp tabs
cd myApp
ionic serve --lab
참 쉽죠 ?
ionic serve --lab
ionic list
ionic 에서 리스트 만드는 법
www/templates/tab-chats.html
ion-list 태그로 간단하게 만들 수 있다
android 에서 리스트 만드는 법
adapter 클래스 생성과
adapter의 getView
메소드 구현이 필수
xml도 작성해야 된다
View와 controller 연결 방법
www/js/app.js
View와 controller 연결 방법
www/js/controllers.js
view에서 쓰고 싶은
data나 함수를 $scope에
달아서 작성하면 끝
기반 기술
Nodejs
Nodejs는 구글 크롬의 자바스크립트엔진
V8에 기반해 만들어진 서버 사이드 플랫폼
비동기 I/O 처리
빠른 속도
싱글 쓰레드 / 뛰어난 확장성
라이선스
Nodejs
Nodejs
Expressjs
Nodejs만 가지고 앱을 만든다면…
Expressjs
Nodejs만 가지고 앱을 만든다면…
Http 요청 본문 파싱
쿠키 파싱
세션 관리
URL 경로와 Http 요청 메서드를 기반으로 한 복잡한 if 조건을 통한 라우팅 구성
데이터 타입을 토대로 한 적절한 응답 헤더 결정
Expressjs
한번이면 괜찮지만 Nodejs앱 만들 때 마다 해야 된다면 ?
Expressjs
Expressjs는 이러한 문제를 해결 해주고
웹 앱에 MVC 형태의 구조를 제공한다.
Expressjs
npm install –g express-generator
express –f .
npm install
Expressjs
초기 디렉토리 구조를 잡아준다
간단한 로직은 app.js에
바로 작성해도 된다.
하지만 routes, view를
나누어 작성할 수도 있다.
Expressjs
Express 설정에 필요한 모듈, 의
존성을 package.json에서 확인,
추가 할 수 있고
Npm install 로 설치할 수 있다
Expressjs
npm install
Expressjs
node_modules 폴더에 추가된다
Mongo DB
Mongo DB
NoSQL ?
Mongo DB
Not only SQL
Mongo DB
관계형 DB가 아니다고정된 스키마가 없고
JOIN도 없다
JSON 데이터를 다루기 쉽기때문에 Nodejs와 잘 어울림
개발 / 테스트 도구
개발 / 테스트 도구
앞의 내용들은 사실
블로그, 책 찾아보면 다 나오는 내용들..
개발 도구 – Cloud9 IDE
개발 도구 – Cloud9 IDE
소규모 프로그래밍, 학교 숙제
개발 도구 – Cloud9 IDE
소규모 프로그래밍, 학교 숙제
노트북 없을 때
개발 도구 – Cloud9 IDE
소규모 프로그래밍, 학교 숙제
노트북 없을 때
PC방에서 프로그래밍 하고 싶을 때
개발 도구 – Cloud9 IDE
Github 계정 연동 가입 가능
개발 도구 – Cloud9 IDE
개발 도구 – Cloud9 IDE
개발은 이렇게 하고…
개발은 이렇게 하고…
그럼 테스트는 ?
예전이라면 이렇게 …
테스트 도구 - Postman
개발 프로세스
Cloud9의 이점 – 서버가 필요없다
터미널에서 npm start 해주면
어디서든지
https://{project name}-{user name}.c9users.io/ 로 바로 접속 가능
개발 프로세스
Cloud9의 이점 – 서버가 필요없다
터미널에서 npm start 해주면
어디서든지
https://{project name}-{user name}.c9users.io/ 로 바로 접속 가능
npm start 하고
Postman으로 바로 테스트
개발 프로세스
모바일에서든, 웹에서든 상관없다
소규모, 단기적 프로젝트에 딱 맞다
Cloud9에서 프로젝트 다운로드 받는 것도 가능
오늘의 목표
Cloud9에서 Expressjs를 이용해서 Nodejs 앱을 만들고
Nodejs에서 mongoDB를 연결한 뒤
데이터 삽입, 검색과 관련된 Rest API를 만들고 실행
Postman으로 테스트
Ionic에서 list에 데이터 불러오기까지
참고자료
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
실습 내용 – 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 프로젝트 생성
실습 내용 – ionic 앱 만들기
ng-repeat 속성을 이용한 동적 html을 작성
실습 내용 – ionic 앱 만들기
연결된 Controller에서 scope에 데이터를 추가
실습 내용 – ionic 앱 만들기
Ionic serve --lab 명령어로 브라우저에서 테스트 가능
실습 내용 – nodejs 앱 만들기
Cloud9 홈페이지 접속 : https://c9.io/회원 가입 후 로그인Create a new workspace 로 새 프로젝트 생성
실습 내용 – nodejs 앱 만들기
프로젝트 이름을 정하고 template은 Blank로 설정
실습 내용 – nodejs 앱 만들기
npm install –g express-generatorexpress –f .npm install
실습 내용 – nodejs 앱 만들기
조회해볼 데이터를 app.js 파일에 간단하게 생성
실습 내용 – nodejs 앱 만들기
GET 메소드이기에 app.get 함수를 호출하고첫번째 파라미터로 url 경로, 두번째 파라미터로 함수 로직을 다음과 같이 작성
실습 내용 – nodejs 앱 만들기
터미널에 npm start를 입력하고상단의 Run을 눌러 주소를 확인 가능
실습 내용 – nodejs 앱 만들기
POSTMAN으로 테스트GET 메소드로 맞추고 주소를 적고 Send 버튼을 클릭
실습 내용 – nodejs 앱 만들기
1개만 가져오는 api도 잘 작동
실습 내용 – nodejs 앱 만들기
POST 메소드로 데이터 INSERT도 가능
실습 내용 – nodejs 앱 만들기
POSTMAN에서 메소드를 POST로 설정Body 탭에서 작성 폼을 raw – JSON 으로 설정, json 데이터 작성
실습 내용 – nodejs 앱 만들기
다시 모든 데이터를 가져와보면 아이템이 하나 더 추가된 것을 확인 가능이런 방법을 통해 DB에 INSERT, SELECT 가 가능
실습 내용 – ionic과 nodejs 연결
서버에서 arts 데이터를 받아와 앱에 보여주는 과정우선 controlle에서 $http 추가http 통신의 Get메소드를 통해 서버 api에 접근, 코드 변경 후에는 저장
실습 내용 – ionic과 nodejs 연결
서버에서 CORS 문제가 발생 하기 때문에 서버에 다음과 같은 코드를 추가반드시 수정된 파일을 저장하고 서버를 종료했다가 다시 실행 !! (ctrl + s (저장) -> (터미널에서) ctrl + c (서버 종료) -> (터미널에서) npm start (서버 실행)
실습 내용 – ionic과 nodejs 연결
서버에서 보내준 3개의 data를 표현하는 것을 확인 가능크롬의 경우 ctrl + shift + i 를 누르면 console.log로 출력한 메시지를 볼 수 있다
THANK YOU !