[ionic] ionic 을 사용하여 프로젝트 시작하기

ionic

떽이 2021. 2. 18. 10:58

요즘 뭘하면 좋을 지 이것 저것 깨작대다가 어플을 한번 만들어 볼까 한다.

모바일 쪽은 해본 적 없지만 도전 해보자.

같이 일하는 고마우신 분께서 ionic framework 라는 프레임워크를 알려 주셨다.

일반적으로 어플을 개발할 때에는 안드로이드 어플과 ios 어플이 달라서 보통은 안드로이드 어플을 개발한다고 하는데 이 프레임워크는 하나의 소스만 있어도 안드로이드, ios 모두 배포가 가능하다고 하였다.

angular 와 react 를 사용할 수 있으며, 나는 현재 react 를 공부 중이니 node js 를 설치하고 vs code 를 오픈한다. (vs code 에서 사용 가능하다)

아이오닉은 npm 으로 설치할 수 있다.

npm install -g ionic

그 다음은 아이오닉 앱을 생성하는 것이다.

ionic start [프로젝트명] [default 프로젝트] 의 형태로 되어있다.

ionic start study_app tabs

default 프로젝트는 아래와 같으니 필요한 것을 사용하면 된다.

위의 표를 보지 않아도 ionic start-list 를 사용하면 리스트와 설명을 볼 수 있다.

아무튼 앱 생성 명령어를 치면 프레임워크를 선택해 달라고 나오는데 여기서 나는 react 를 픽했다.

앱이 생성되면 생성된 앱으로 이동하여 ionic serve 명령어를 수행하면 된다.

cd study_app
ionic serve

이러면 될 줄 알았는데 아래와 같은 오류가 발생한다.

[ERROR] react-scripts has unexpectedly closed (exit code 1).

babel-loader 버전 문젠가.. 그런데 수동으로 설치하지 말라니 일단 package-lock.json 삭제, node_modules 폴더 삭제하고 package.json 에서 dependencies 에 있는 babel-loader 버전을 바꿔 주었다.

"babel-loader": "^8.1.0",

그리고 npm install 로 설치

npm install

그리고 ionic serve 를 해주면

그랬더니 react-script 를 설치할거냐 물어보길래 일단 yes....

또 같은 에러가 발생했길래 아래의 명령어를 사용했는데..

npm ls babel-loader

뭐지.. 버전이 왜 다른가요ㅠㅠㅠ

일단 상위폴더에 있는 babel-loader 를 지워야 할 것 같다. 상위폴더로 이동

cd ..

그리고 먼저.. react-script 랑 babel-loader 를 지워주었다.

npm uninstall react-scripts babel-loader

다시 study_app 으로 돌아와서 uninstall 해준다.

cd study_app
npm uninstall react-scripts babel-loader

node_modules 폴더랑 package-lock.json 파일 지워주고 package.json 에 babel-loader 넣어줬다.

"babel-loader": "^8.1.0",

그리고 다시 install

npm install

그리고 babel-loader 버전 다시봤는데 왜 또 8.2.2 로 되어있지

버전 바꿔주자..

npm uninstall babel-loader
npm install babel-loader@8.1.0

다시 ionic serve 해주면!!!!

ㅎ?

이번엔 webpack 이 문제네..

똑같이 해결해준다.

그리고 ionic serve 를 다시 해보면~

드디어 성공!

결과 화면은 아래와 같다

앞으론 ionic 으로 어플 만들기 공부좀 해봐야겠다.