우리는 전에 만화 사이트를 만든 적이 있다. 이 만화사이트의 어플을 만들기 위해 우리는 IonicFramework을 사용하기로 한다.

Ionic홈페이지 들어가서 대충 설명을 읽어보자. 검색하면 알겠지만

WebView를 이용, AngularJS를 이용하여 JS로 만든 코드를 native코드로 바꿔준다

성능은 웹과 native의 중간정도로 생각하면 편하다. 우리가 만들 앱은 단순히 원래 있는 싸이트를 적당히 앱으로 만들고 앱에서만 할수 있는 기능(DB저장, push알림 등)을 추가한 것 이기 때문에 그렇게 성능에 대해 문제가 있지도 않을거라고 생각되기 때문에 이런식으로 만들예정이다. 만약 성능이 많이 중요하다고 생각된다면 native로 하는것을 권하고 싶다. 그러면 일단 설명에 나와있는대로 설치하고 (간단하다. npm 과 nodeJS가 설치되어 있다면 npm 으로 바로 설치가 가능하다.) 그다음 해주라는 대로 하고 실행하면 잘 실행 되는것 을 볼 수 있을 것이다. ionic serve을 이용하면 간단하게 웹에서 볼 수 있다(이걸 추천한다. 일단 대부분의 작업은 web을 통해 한다면 debug과정에서 좀 더 쉽게 할 수 있다. 그 다음 마지막에서 실기기로 확인하는게 시간도 적게 걸린다)

이제 여기에서 docs를 보며 한번 하나하나 추가해보도록 하자. 일단 무엇부터 하면 좋을까? 일단 한번 슬라이드 메뉴를 만들어 보도록 하자.사이드메뉴. 일단 ionic start ionic_manga_test sidemenu 을 통해 만들도록 하자. 그러면 sidemenu가 구현된 좋은 예가 생긴다. 이제 이걸 기본으로 조금씩 바꿔가면서 우리가 원하는 앱을 만들도록 하자. 일단 여기서 git을 commit 하도록하겠다.

이게 기본 index.html 이다. 단순히 필요한 js파일들을 불러오고 끝이다. 그리고 정작 내용부분에는 태그 밖에 없다. 이게 무엇일까? ionic serve를 통해 실행한 화면에는 분명 많은 콘텐츠가 있다. 그러면 template 폴더를 한번 봐보자. 그곳에는 많은 html 파일들이 있다. 그리고 app.js를 보면 이런것이 있다. 어디서 본 모양인다. 그렇다. 우리가 예전에 사이트를 만들면서 했던 angular-route 와 같은 모양이다. 즉 ion-nav-view는 angular에서의 ng-view와 같은 역할이다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

ionic은 url을 통해 화면 전화과 자신의 위치 확인을 한다.

이제 이것을 조금 바꾸어 보고 어떤부분을 어떻게 고치면 될지 한번 생각해 보자. 그리고 우리가 예전에 했던 사이트 만들기와 거의 비슷하기 때문에 혹시 예전의 강좌가 기억 안나시는 분은 예전것을 한번만 더 보고 오시길 바란다. 그러면 다음 #2 에서는 일단 지금 있는 이 예제를 적당히 바꾸어서 우리가 맞는 형태로 바꾸는것 부터 하도록 하자.

 

[출처] http://188.166.233.245/ionic-frameworkro-manhwa-saiteu-eopeul-mandeulgi/