[WebApp] 웹앱 개발환경 구축하기1-ionic3 설치

시대가 시대인만큼 필요한 앱은 스스로 만들어 쓰면 뭔가 본새나잖아요?

회사 일이 바쁘긴 하지만 그래도 자기 계발할 겸 웹앱을 만들어보고자 합니다.

아직 무엇을 만들지, 정확히 정하진 않았지만 기능을 미리 익혀보면 좋을 것 같아서 포스팅을 합니다.

먼저는 웹앱 개발 환경을 구축해야겠죠?

저는 Mobile App Framework로 유명한 ionic3을 통해 하이브리드 웹앱을 만들어보고자 합니다.

* 참고로 ionic이란?

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.
출처 : 위키백과

해석해보면 2013년에 Drifty의 Max Lynch, Ben Sperry, Adam Bradley라는 분들이 하이브리드 모바일 앱 개발을 위해 개발한 완전한 오픈 소스 SDK라고 합니다. 아무튼 대단하신 분들인 것 같습니다.

 

오늘은 ionic3의 개발 환경을 설치해보겠습니다.

IDLE은 뭘 사용해도 상관 없지만 저는 베이직하게 터미널 기능도 되는 Visual Code를 사용합니다.

* 저는 MacBook을 사용합니다.

1. Node.js설치
www.nodejs.org 접속
운영체제에 맞는 nodejs LTS버전 설치
2019.12.09 기준 12.13.1 LTS가 최신임.

12.13.1 LTS를 클릭합니다.

설치가 되었습니다. 버전을 확인해볼까요?

node -v // nodejs 버전 확인 = 12.3.1

npm -v // npm 버전 확인 = 6.12.1

2. Git설치
http://git-scm.com/downloads에서 운영체제와 맞는 git을 설치한다.

Download를 클릭합니다. 그리고 설치합니다.

설치가 완료되었다면 버전을 확인합니다.

git --version

3. TypeScript 설치
sudo npm install typescript -g
tsc -v //버전 확인

 

 

 

4. Ionic CLI와 Cordova 설치
sudo npm install -g ionic cordova
cordova -v //cordova 버전 확인
ionic -v //ionic 버전 확인

cordova 버전 : 9.0.0

Ionic 버전 : 5.4.10

5. Android Studio 설치
https://developer.android.com/studio

운영체제에 맞는 프로그램을 설치하면 됩니다.

6. java jdk 설치
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
운영체제에 맞게 설치

드디어 설치 끝

다음은 아이오닉 기반 앱을 어떻게 만들 수 있는지 알아보겠습니다.