Visual Studio Code에서 Ionic 사용하기 with Vue.js

일단 나는 앱 개발자가 아니다.

공부 한 적도 없고 앱 개발에 뜻이 있지도 않다.

현재 근무 중인 회사에서 급하게 앱이 필요하다고 해서 자바+코틀린으로 구성되어져 있는 네이티브 앱을 만들었는데,

만들고 구현하는데 고생을 많이 했다.

회사 입장에서는 돈을 주고 일을 시키는 직원이지만, 나는 앱개발자로 입사한 것도 아닐 뿐더러,

한명의 개발자로써 역할을 충실히 행할 수 있는 레벨도 아니라고 생각이 드는 와중에 이런 포지션 전환까지 하고 있다는 것에 매우 불만이다.

이것을 상사에게 보고한 결과, 앱을 하이브리드 앱으로 해서 언어를 웹 언어로 앱을 만들으라 한다.

결국 의미없는 발악이라고 생각하지만 그렇게라도 진행하기 위해 찾아보던 중 Ionic이 그나마 부합한 것 같아서 선택하게 되었다.

하지만 안드로이드 네이티브와 마찬가지로 최신 정보는 별로 없어서 정리할 겸 정보공유 목적으로 글을 작성한다.

 

 

 

1. 일단 Ionic 의 설치에는 npm 을 통해서 하기 때문에 Node.JS를 설치한다.

https://nodejs.org/ko/

Node.js — 어디서든 JavaScript를 실행하세요

 

 

2.  JAVA JDK 또한 필요하기 때문에 설치 해 준다.

https://www.oracle.com/java/technologies/javase-downloads.html

Download the Latest Java LTS Free

 

필자는 이미 JAVA를 사용하고 있어서 JDK 설치 및 환경변수 설정은 되어있어서 생략하였지만, 아직 설치가 안되어있는 사람들은 설치 및 환경변수 설정을 해야한다. ( 요즘은 환경변수를 따로 설정을 안해도 IDE 단에서 따로 잘 잡는 것 같은데 배포 할 때 가끔 오류나니 미리 해주면 좋은 것 같다. )

 

 

 

3. 안드로이드 apk 로 빌드 및 가상 에뮬레이터를 위한 Android Studio 및 Android SDK 설치

https://developer.android.com/studio

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

개발만 하기 위해서는 사실 설치 안해도 되는데, 목적이 안드로이드기 때문에 빌드나 에뮬레이터를 위해 설치한다.

지금 설치 안해도 Ionic으로 프로젝트를 만들고 개발을 못하는건 아니기 때문에 추후에 설치해도 된다.

 

 

 

 

이것들을 설치 해줬다면 이제 본격적으로 Ionic 을 설치하는 법이다.

1. CMD 창을 열어서  npm install –g @ionic/cli 입력하여 ionic을 설치

그대로 명령 프롬프트를 실행시켜서 거기에 입력해준다.

 

 

여기까지만 하면 이제 아이오닉 개발을 하는데에 필요한 것들은 설치가 된 건데, IDE를 이용해서 개발하는 것이 너무 편리하기 때문에 VS CODE로 연동해서 프로젝트 생성 및 개발을 진행하는 가이드를 추가로 기술하려 한다.

 

 

 

2. VS CODE 를 실행시켜 Extension 에서 Ionic을 검색 후 다운로드.

 

 

3. 설치가 완료되었다면 다음과 같이 하단에 추가적으로 Ionic Extension이 추가될텐데 그걸 누르면 새로운 프로젝트를 만들거나 Ionic 에 대한 설정을 할 수 있다.

 

 

4. 프로젝트를 만들고 VS CODE에서 아이오닉 서버를 실행시키는 방법

 

상단에 터미널을 눌러서 실행시키고, 거기에 나오는 bash 창에 ionic serve 라는 명령어를 치면 아이오닉 프로젝트가 실행된다.

 

 

글에 주저리 주저리 말이 많지만 누군가에게 도움이 되길 바라고 기록을 남긴다.