ionic 시작하기 

Mac OS를 기준으로 작성되지만, window도 크게 다를 것 없다. ionic이 무엇인지 알고 싶다면, 과거에 게시글(http://fireburger.tistory.com/7)을 참고바란다. 

0. 준비사항 및 필자 개발 환경

  1. Visual Studio Code (https://code.visualstudio.com)  
  2. AngularJS 및 Typescirpt 그리고 Web 표준에 대한 간단한 사전 지식이 필요하다. 
* VS code는 미리 설치하고 따라오길 바란다. 
** ionic은 TypeScript 및 Angular로 이루어져있다. 이중 TypeSciprt는 마이크로소프트에서 만든 스크립트 언어로, JavaScript에 객체지향 및 프로그래밍적 요소를 강화시킨 언어이다. 이에 같은 마이크로소프트에서 만든 VS Code 에디터를 사용한다면 가장 효율적으로 개발을 진행할 수 있다.


1. nodeJS 다운 받기 

ionic은 npm install을 통해서 설치해야한다. 이에, ionic을 설치하기 이전에 우선적으로 nodejs를 설치해주어야 한다. 설치링크(https://nodejs.org/en/)
버전은 크게 상관이 없기에, 편한걸 받으면 된다. 본인은 17년 3월 기준 가장 최신버전을 받아서 사용했다.



2. ionic 및 Cordova 설치

이제 본격적으로 개발을 위해 ionic과 cordova를 설치하겠다. ionic에 대해서는 다들 알고 여기까지 왔을 것이라고 생각한다. 혹시 cordova에 대해 모르는 독자가 있을까 짚어보자면.. 하이브리드 앱을 만들기 위한 plugin들의 모음이라고 간단히 설명해본다. 웹에서 native 기능(카메라, gps 등)을 제공해주는 플러그인들 모음들이다. 자세한 것은 따로 공부해보자. 

우선 VS code를 실행 후 Ctrl+`(숫자 1 왼쪽에 특수문자)를 누르면 터미널 창이 하단에 뜰 것이다. 터미널창에 아래 코드를 입력하면 ionic 및 Cordova 설치가 시작될 것이다.



3. ionic 프로젝트 시작

ionic이 설치 되었으면, 이제 프로젝트를 시작해보자! 먼저 터미널 창에서 본인이 ionic 프로젝트 파일들을 저장하고 싶은 폴더로 이동한다. (리눅스 명령어를 사용하면 된다. 이동은 'cd', 현재 폴더 보는 것은 'ls', 새폴더는 'mkdir' 등.. 모른다면 구글링을 해보자).  원하는 폴더로 이동이 완료되었다면, 아래 코드를 터미널창에 입력한다. 


 
그러면 폴더가 만들어졌을 것이다. 만들어진 폴더로 이동 후
 
아래 코드를 다시 입력해 보자! ionic을 실행시키는 코드이다. 실행시키면 서버가 돌아감과 동시에 인터넷 브라우저가 켜지며, 현재까지 코딩된 사항들이 화면에 출력될 것이다.




여기까지 ionic 설치 및 프로젝트 생성까지 해보았다. 



+ Recent posts