Ionic1 vs Ionic2 structure 구조

Ionic은 안드로이드, 윈도우, ios 등으로 쉽게 변환해주는 하이브리드 프레임워크인데, 기능은 좋아보이는데 미묘하게 버전과 툴별로 만들어지는 프로젝트 구조가 다르게 보인다. 또한 계속 모니터링 되는 디렉터리가 버전마다 달라 조금 헷갈리게 느껴진다.

이상하게 2로 업그레이드 되면서, 비주얼스튜디오 내에 만들어지는 프로젝트 구조가 미묘하게 다른것 같다. 접한지 이주, 아직도 어떻게 써야할지 감이 안잡힌다.

아마 템플릿 업데이트를 할때까지의 시간이 걸리는 비주얼 스튜디오보다는 비주얼 스튜디오 코드를 쓰는 편이 가벼워 보인다.

$ Ionic start tab1

$ Ionic start tab1 --v2

로 서로 다른버전으로 생성을 했을때의 디렉터리 구조. 한번씩

$ Ionic serve

로 프로젝트를 돌려본다. 동시에 돌리면 알아서 포트가 8100부터 순차적으로 할당되는것이 확인된다.

버전 1의 경우의 콘솔과 그에따른 아웃풋, 디렉터리구조

버전 2의 경우의 콘솔과 그에따른 아웃풋3, 디렉터리 구조

브라우저에는 아이콘을 굉장히 높은 확률로 찾지를 못한다.

둘다 돌려보면 신나게 잘 돌아가기는 하는데, 2에서는 2016년 9월에 출시된 타입스크립트2 버전을 적용했다. 따라서 대부분의 편집기는 비주얼 스튜디오 코드를 제외하고는 제대로 지원이 되지는 않을 것같다.

어쨌든, 2는 src구조 아래에의 프로그램을 수정하면 다시 컴파일 되는 시간이 상당히 오래걸리며, 1은 www구조 아래에 있는 자바스크립트 혹은 html을 바꾸면 바로바로 반영되기 때문에, 굳이 2가 빠르고 효용성이 있어보이지는 않는다.

다만, 타입스크립트를 이용해보고픈 마음에 계속 시도를 하고 있는데, 아직도 UI적용이라든지는 손에 잘 잡히지 않는다.

 

이제 1, 2버전 모두에 가이드 된 버튼을 about페이지에 적용해보도록 하겠다.

http://ionicframework.com/docs/

위의 사이트를 참조해서, 예쁜 버튼 하나가 추가되기를 기도하면서 조심스레 코드를 복붙해본다. ionic 도큐먼트에는 아래와 같이 쓰면 된다고 가이드 되어있다. 어느 버전인지는 안알랴주고 있다.

알았으니, 간단한 태그를 써본다.

 

 

1버전은 stable한 버전이라 그런지 아무 무리없이 아이콘이 재빠르게 하나 생기면서 웹브라우저도 리프레쉬된다.

색깔에도 문제가 없다. 1버전의 경우, www/lib/ionic 아래의 scss파일들이 컴파일되어 나온 css파일을 이용하는것으로 보인다.

 

2버전에서는 일단 serve하는곳이 맛탱이가 가있어서 다시한번 재부팅을 시도했다. 재부팅하니 밑의 아이콘은 나오는데, 이번에 추가시킨 예쁜 아이콘이라고 믿었던 아이콘은 아래와 같이 보인다.

관련된 CSS파일이 보이지 않는다.

간단한 문제였다. 새로운 기술을 익히다보면, 너무 어이없는 곳에서 시간을 많이 빼앗기곤 한다. 그냥 Ionic2에서는 CSS Component 가 새롭게 변경되었다.

2버전의 문서는 아래와 같다. 홈페이지가 굉장히 헷갈리게 되어있고, docs는 1버전 기준이기 때문에 예전걸 넣으려다 보니 바보가 된것이다.

http://ionicframework.com/docs/v2

문법은 아래와 같은 문법을 써야한다.