ionic + angular 세팅

🚓 앱 개발을 하게 되다.

지금 회사에서 웹을 하다가 다음주 부터 앱을 하게 되었어요.
다행인건 단순히 navtive app이 아닌 하이브리드 앱 프레임워크 중 하나인 ionic을 하게 되었는데요.
"하이브리드 앱 프레임워크"는 웹 기술로 앱을 만들수 있게 해주는 프레임워크 입니다.
ionic은 "React,Vue,Angular"를 지원하는데요. 저희 회사는 "Angular"를 사용하고 있어요.

ionic + Angular

☔이제부터 환경세팅을 시작해볼게요. 제일 힘든게 환경세팅이니깐요

🦽 ionic을 install해주세요

npm install -g @ionic/cli

저 같은 경우 원하는 폴더 밑에서 윈도우 cmd를 켜서 설치했어요~

그 다음으로는 "Angular,React,Vue"가 존재하지만 저는 "Angular"를 선택 했어요. 왜냐면 회사에서는 "Angular"하니깐요~

🌎 다음으로 Cordova를 설치해주세요

* 제 추측상 Cordova를 설치해야 android,ios에서 돌아가게 끔 해주는것 같아요.

npm install -g codova

🌠 인제 android studio를 설치해주세요

https://developer.android.com/studio?hl=ko

⛺ java에서 환경변수 설정한 것처럼 android studio도 환경 변수 세팅이 필요해요

File > Settings를 클릭해주세요~

다음으로 sdk위치를 복사해주세요

그 다음 윈도우 환경변수 하는 곳으로 이동해주세요~

새로 만들기를 클릭해주세요

새로 만들기 후 SDK경로를 복사하여 변수값에 추가해주세요.~

다음으로 Path를 더블클릭 또는 편집버튼을 눌러주세요~

새로 만들기를 통해서

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\tools

를 추가해주세요

"그 다음 Gradle의 path를 추가해주세요. 안 그럴경우 나중에 android build할때 에러경험을 하실거에요"

일단 Gradle path를 복사해주세요~

다음으로 환경변수를 GRADLE_HOME으로 새롭게 만들어주고 Path에 경로를 %GRADLE_HOME%\bin을 추가해주세요

🏰 인제 드디어~ ionic 프로젝트를 만들겠습니다.

일단 원하는 폴더에서 cmd창을 띄운 후에 ionic start를 입력해주세요. 저는 회사에서 angular를 하기때문에 angular를 선택하였고 template은 blank를 선택하였어요.~

ionic start

세팅이 다 되면 Visual Studio Code에서 터미널을 켜서 프로젝트를 실행시켜 봅시다~

ionic serve

그러고 나면 브라우저에서 ionic을 볼 수 있을 껍니다~

🏳‍🌈 안드로이드에서 실행시켜보기를 해볼꺼에요~

일단 아래 명령어를 통해 안드로이드 플랫폼을 만들어주세요.~

ionic cordova add platform android

그러면 프로젝트에 platform 폴더밑에 android가 생길껍니다.~

안드로이드 프로젝트에 import 해줄때 꼭 android 폴더를 선택해주세요~

다음으로 android studio에서 run 시켜 주세요~

그러고 나면 폰에서 잘 뜨는것을 볼 수 있습니다.~

 

🏥 환경세팅하기가 역시 제일 어렵군요. 오늘은 환경세팅을 해보았고 다음번에는 간단한 todoList를 통해서 ionic angular 구조를 알아볼 생각입니다.~