"ionic serve"로 테스트하기

안녕하세요, mucun입니다.

이번 기사에서는 「ionic serve」에 대해 파고 싶습니다.
이 명령은 브라우저에서 개발 중인 앱을 테스트하는 명령입니다.

덧붙여서, 테스트의 실시 방법은 3가지가 있습니다.
　① 「ionic serve」:브라우저로 테스트하는 방법
　② 「ionic emulate」:에뮬레이터로 테스트하는 방법
　③ 「ionic run」:실기로 테스트하는 방법

이번은 ①「ionic serve」입니다.
실은, 3개의 테스트 방법 중, 종래에는 없었던 신형식이 이것으로,
기존과 비교하여 매우 효율적으로 테스트를 수행할 수 있습니다.

그럼 실시해 봅시다.
명령 프롬프트를 시작하고 "ionic2"모듈이 저장된 폴더로 이동하여
ionic serve를 입력합니다.
그러면 브라우저에서 앱이 실행됩니다.

(※전회( 그 4 )에서 작성한, 「ionic2」의 공식 샘플)

이 테스트 방법입니다만, 기동이 간편하다는 것 이외에, 몇가지 이점이 있습니다.
　①-① 「ionic2」모듈의 변경을 실시간으로 반영해 준다
　①-② 브라우저상의 디버그 기능으로, 디버그를 할 수 있다

이것도 하나씩 소개합니다.

①-① 「ionic2」모듈 변경의 실시간 반영

실제로 시도하고 확인해 봅시다.

먼저 ionic2 모듈을 엽니다.


그건 그렇고, 편집자는 무엇이든 좋지만,
내 추천은 친구가 가르쳐 준 "Visual Studio Code"입니다.
(다운로드는 여기에서('ω')노: htps //w w.ゔぃすあ lsつぢお。 코 m / 자 jp / p 로즈 cts / 코데 vs. 아 spx )

자세한 것은 다음 번 이후에 이야기를 하겠습니다만,
「ionic2」모듈에서, 주로 변경해 가는 파일은,
「(PJ 폴더)/app」하하의 모듈이 됩니다.
이번에는 초기 화면의 외형을 구성한다.
"(PJ 폴더)/app/pages/hello-ionic/hello-ionic.html"을 변경해 보겠습니다.


예를 들어,

10행

    <ion-title>Hello Ionic</ion-title>

라는 코드가 있지만,

10행

    <ion-title>Good Morning Ionic</ion-title>

로 변경하고 저장합니다.


그러면 어떨까요?
헤더 제목이 "Hello Ionic"에서 "Good Morning Ionic"으로 변경되었습니다.


이렇게 해서, 일일이 수정의 때마다 컴파일 해 수정 내용을 확인하지 않아도 되므로,
개발이 매우 효율적으로 할 수 있다는 뜻입니다.

①-② 브라우저의 디버그 기능을 사용할 수 있다

이것은 단순히, 예를 들어 'Google Cherome'에서 'F12'키를 누르면,
디버깅 기능을 사용할 수 있다는 이야기입니다.
나중에 서버와의 연계 기능 등을 구현할 때 매우 유용합니다.


이상이 「ionic serve」에서의 테스트 방법이 됩니다.

이번 기사는 여기까지입니다.
읽어 주신 분, 감사합니다. ( ;∀;)

👈【그의 4·“ionic2”의 샘플을 기동한다】 👉【그의 6・「ionic emulate」로 테스트를 한다】