[2일째] 초보자가 만드는 앱 개발 ~Typescript를 쓰기 위해 Vim의 준비와 HelloWorld~

2일차(Vim 환경설정 및 HelloWorld 표시)

우선, Typescript를 만지기 때문에, 제대로 신택스 하이라이트 해 주지 않으면 사용하기 어렵고 어쩔 수 없습니다.

Neobundle에서 신택스 하이라이트 모듈을 넣으십시오.

Neobundle

let g:syntastic_typescript_tsc_args = "--experimentalDecorators --target ES5"
NeoBundle 'leafgarland/typescript-vim'

이 두 줄을 쓰면 다음에 Vim을 열 때 설치가 실행됩니다.

이제 HelloWorld를 보여 드리겠습니다.

HelloWorld 쓰기

먼저 이전에 만든 프로젝트 구성을 살펴보겠습니다.

▸ hooks/                       
▸ node_modules/                
▸ platforms/                   
▸ plugins/                     
▸ resources/                   
▾ src/                         
  ▾ app/                       
      app.component.ts         
      app.html                 
      app.module.ts            
      app.scss                 
      main.ts                  
  ▾ assets/                    
    ▾ icon/                    
        favicon.ico            
  ▾ pages/                     
    ▾ about/                   
        about.html             
        about.scss             
        about.ts
    ▾ contact/
        contact.html
        contact.scss
        contact.ts
    ▾ home/
        home.html
        home.scss
        home.ts
    ▾ tabs/
        tabs.html
        tabs.ts
  ▾ theme/
      variables.scss
    index.html
    manifest.json
    service-worker.js
▸ www/
  config.xml
  ionic.config.json
  package-lock.json
  package.json
  README.md
  tsconfig.json
  tslint.json

이런 느낌입니다.



이것 밑에 있는 아이콘세가 「about」 「contact」 「Home」의 각각의 페이지를 구성하고 있는 것 같네요.

이제 Home에 HelloWorld를 추가해 보겠습니다.

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Hello World</h2>
  <p> 
    hello hello
  </p>
</ion-content> 

그래! 좋은 느낌입니다!
그럼 다음부터 실제로 앱을 만드는 단계로 들어갑니다.