In my U.S. experience, every person asks me, "Oh, this is a little bit spicy, but you came from South Korea; I'm sure you are OK. " Sure, I like spicy food really much. However, we have yet to learn about every South Korean people's taste type. In Yummirific data, we collected 3,397 people's taste preference data with 40 survey questions. Fortunately, we covered that "SPICY." Our question number 8 aligns with "SPICY." "I like spicy food." So, I analyzed 3,397 people's responded data related to basic tasty preferences, Sour, Bitter, Salty, Sweety, and "SPICY. Here are some fun facts about it.
Ionic 3를 이용한 날씨 앱 만들기
본 포스트는 Traversy Media의 동영상을 보며 직접 따라해본 내용을 정리한 글입니다.
우선 아이오닉3와 Node.js와 android studio, 가 설치되어 있어야 하며 npm 명령어와 angular.js의 지식이 어느정도 있어야합니다.
<!-- 요약 ------------------------------------------------------------ -->
(1) 개발환경 준비
1. node.js 인스톨
1. node.js 인스톨
2. android studio
3. npm install -g @angular/cli
4 npm install -g ionic@latest cordova
5. mkdir projects
6. ionic start weather tabs (탭템플릿)
7. ionic serve (해당 폴더에서)
8. 아이오닉은 어떤 IDE로 개발하면 편한가?
(2) 코딩 및 배포
8. 아이오닉은 어떤 IDE로 개발하면 편한가?
(2) 코딩 및 배포
9. 코딩 시작
10. 테스팅 : ionic cordova run android
11. 배포 : ionic cordova build --release android
<!-- 요약 ------------------------------------------------------------ -->
1. node.js 인스톨
1.1 Node.js 홈페이지
Node.js 홈페이지에서 다운로드 후 설치하시면 됩니다.
2. android studio 인스톨
2.1 Android studio 홈페이지
안드로이드 스튜디오 홈페이지에서 최신버전을 다운 받으시면 됩니다.
다운 받고 설치가 끝난 후에 가상 안드로이드 기기도 미리 세팅하시면 나중에 편합니다.
* 아이오닉은 웹 서버에서 작업한 코드를 테스팅 하며 배포 및 테스트를 안드로이드와 iOS 두 플랫폼에 동시에 할 수 있게 해주는 상당히 편한 Hybrid App Development Framework 입니다.
iOS 플랜폼에 대한 테스트 및 배포는 Mac 환경에서 해야하며, 본 포스튼 윈도우 환경을 기준으로 작성되었기 때문에 안드로이드만 적었습니다.
* 아이오닉은 웹 서버에서 작업한 코드를 테스팅 하며 배포 및 테스트를 안드로이드와 iOS 두 플랫폼에 동시에 할 수 있게 해주는 상당히 편한 Hybrid App Development Framework 입니다.
iOS 플랜폼에 대한 테스트 및 배포는 Mac 환경에서 해야하며, 본 포스튼 윈도우 환경을 기준으로 작성되었기 때문에 안드로이드만 적었습니다.
3. npm install -g @angular/cli
노드와 안드로이드 스튜디오가 설치되었다면 커맨드창을 열고 먼저 angular cli를 설치합니다.
* angular.js : AngularJS("Angular.js" 또는 "AngularJS 1.X")는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수되고 있다. 자바스크립트 구성 요소들은 크로스 플랫폼 모바일 앱을 개발하기 위해 사용되는 프레임워크인 아파치 코도바를 보완한다. 리치 인터넷 애플리케이션에 공통적으로 사용되는 구성 요소들과 더불어 클라이언트 사이드의 모델-뷰-컨트롤러(MVC)와 모델-뷰-뷰모델(MVVM) 구조를 위한 프레임워크를 제공함으로써 이러한 애플리케이션들의 개발 및 테스트를 단순화하는 것이 목적이다. 2014년에 오리지널 AngularJS 팀은 Angular 플랫폼에 대한 작업에 착수하였다. (위키백과 참고)
4. npm install -g ionic@latest cordova
다음은 ionic을 최신 버전으로(@latest) 설치하며, 이때 apache cordova도 함께 설치합니다.
* cordova : Adobe System에서 폰갭(PhoneGap)을 Apache 재단에 기부하여 명명된 오픈소스 개발 프레임워크(Open-Source Mobile Development Framework)로 Javascript, HTML, CSS를 이용하여 멀티플랫폼 크로스 모바일앱을 빠르게 만들 수 있도록 지원합니다. Ionic은 코르도바를 기반으로 GUI 및 CLI(Command Line interface) 기능을 추가한 것으로 Ionic 설치 시 cordova 설치가 선행됩니다.
* 폰갭(PhoneHap), 코르도바(Cordova), 아이오닉(Ionic)의 차이점 등을 잘 설명한 블로그이니 참고하시면 좋습니다.
5. mkdir projects
5.1 프로젝트 폴더 생성
필요한 설치가 끝나면 프로젝트 폴더를 생성합니다. 원하시는 곳에 프로젝트를 생성하면 됩니다.
>mkdir ionicProject // 아이오닉 프로젝트 폴더 생성
>cd ionicProject // 아이오닉 포로젝트 폴더
6.ionic start weather tabs
폴더까지 생성되었으면 그 다음은 간단 합니다. 프로젝트 폴더에 들어가서 아이오닉 프로젝트를 시작하면 됩니다.
ionicProject>ionic start weather tabs
start weather : 'weather' 라는 프로젝트를 생성한다.
tabs : Tab UI를 포함한다.
d:\ionicProject>ionic start weather tabs먼저 iOS와 android를 할건지 물어봅니다. Yes
√ Creating directory .\weather - done!√ Downloading and extracting tabs starter - done!
? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) // iOS와 Android를 포함할건가요? Y
√ Running command - done!
> git init
* IONIC PRO *
Supercharge your Ionic development with the Ionic Pro SDK
- Track runtime errors in real-time, back to your original TypeScript
- Push remote updates and skip the app store queue
Learn more about Ionic Pro: https://ionicframework.com/products
? Install the free Ionic Pro SDK and connect your app? (Y/n) n
아이오닉 프로 서비스를 이용할건지 물어봅니다. 이건 No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign
Next Steps:
* Go to your newly created project: cd .\weather
* Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app
여기까지 되면 끝났습니다. 이제 아이오닉 프로젝트가 생성되었습니다.
7. ionic serve (해당 폴더에서)
ionicProject\weather>ionic serve
이렇게 입력하면 ionic 프로젝트 서비스가 시작되며 8100번 포트에서 서비스가 시작 됩니다. 웹브라우저에서 localhost:8100 주소가 호출됩니다.
이제 서비스가 동작하니 앱을 만들면 됩니다.
ionic serve를 실행시킨 커맨드 창은 그대로 log가 출력됩니다.
Ctrl + C 로 로깅을 종료할 수 있으며, 종료시 ionic serve 역시 종료됩니다.
프로젝트를 다시 할경우 프로젝트 위치에서 다시 ionic serve를 실행하면 됩니다.
이제 서비스가 동작하니 앱을 만들면 됩니다.
ionic serve를 실행시킨 커맨드 창은 그대로 log가 출력됩니다.
Ctrl + C 로 로깅을 종료할 수 있으며, 종료시 ionic serve 역시 종료됩니다.
프로젝트를 다시 할경우 프로젝트 위치에서 다시 ionic serve를 실행하면 됩니다.
8. 아이오닉은 어떤 IDE로 개발하면 편한가?
아이오닉 개발 시 편한 개발환경(IDE)에 대해서 아이오닉 공식 사이트에 글이 있습니다.
공식 사이트에 따르면, Visual Studio Code(MS), Atom, WebStorm, ALM, ANgular IDE by Webclipse 등 5개의 IDE가 추천되고 있습니다.
#아이오닉 공식 사이트 Editors and IDEs
공식사이트
근데 뭐 저도 아직 아이오닉은 처음 접한 상태라서 일단 동영상에서도 사용하고 있는 VS Code로 활용하고 있습니다.
공식 사이트
공식 사이트
공식 사이트
공식 사이트에 따르면, Visual Studio Code(MS), Atom, WebStorm, ALM, ANgular IDE by Webclipse 등 5개의 IDE가 추천되고 있습니다.
#아이오닉 공식 사이트 Editors and IDEs
Visual Studio Code
VS 코드는 TypeScript와 ES6 Syntax를 잘 지원하는 가장 최신 에디터라고 합니다. 무료이고 MacOS와 윈도우, 리눅스 등 모든 환경에서 동작이 가능합니다. 또한 터미널이 UI내에 포함되어있고 가볍게 구동되는 점 등이 편한 것 같습니다.
공식사이트
근데 뭐 저도 아직 아이오닉은 처음 접한 상태라서 일단 동영상에서도 사용하고 있는 VS Code로 활용하고 있습니다.
Atom
아톰은 웹기술 기반으로 만들어진 에디터이고, ES6/TypeScript 개발의 편의성을 지원하는 많은 플러그인을 갖고 있다고 합니다. 또한 자바스크립트를 이용해서 직접 플러그인 개발도 할 수 있다고 합니다. 나중에 한번 써봐야겠군요.공식 사이트
WebStorm
WebStorm은 유료 개발도구입니다. 뭐 기능은 유료인 만큼 자동 컴파일 고급 리팩토링 등 많은 기능 들이 있는 모양입니다. 가격은 개인사용자에겐 $141 기업사용자에겐 $309 정도인데 과금 체계가 재밌군요. 첫 해에 가장 많이 내고, 총 3년에 걸쳐 비용을 내고 소유하게 되는 형태입니다.
ALM
ALM도 무료 오픈소스 IDE로 typescript 개발을 위해 개발되어진 editor라고 합니다. 크롬이 설치되어 있는 모든 컴퓨터에서 실행이 가능하고 인터넷이 연결되어 있으면 서버로 호스팅할 수 있다고 합니다. 현재 (2018년 3월 13일 기준) 아이오닉 공식 웹에서의 링크 연결은 되지 않습니다. github에 alm-tools 로 소스가 공개되어 있습니다.
공식 사이트
Angular IDE by Webclipse
앵귤러 IDE 역시 Angular와 TypeScript 개발을 위해 개발된 IDE라고 합니다.공식 사이트
Comments
Post a Comment