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 버튼을 클릭
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로 출력한 메시지를 볼 수 있다
