My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

Angular (1) Tutorial - 초기 설정

위의 튜토리얼은 https://angular.io/tutorial 을 참고하였습니다.

1) Overview

1-1. Application

data-driven application

  • displays a list of heroes
  • edits a selected hero’s detail
  • navigates among different views of heroic data

1-2. Objects

요런걸 할 예정이라고 하는데.. 뷰를 약간 공부한 입장에서도

모르는 단어들이 조금 있습니다. 나중에 차차 알아보도록 합시다!

  • Built-in angular directivies & Create Angular components
    • show & hide elements
    • display lists of hero data
    • hero details
  • One-way data binding
  • Editable fields -> two-way data binding
  • User event -> bind component
  • Select a hero form & edit hero
  • Format data with pipes (??)
  • Create a shared service to assemble the heroes (??)
  • Routing -> navigate among different views and their components

2) The Application Shell

Angular CLI를 이용해서 어플리케이션 초기상태 구축하기

  1. 환경설정
  2. new workspace 만들기
  3. 어플리케이션 서빙하기
  4. 어플리케이션에 변화를 주기

2-1. 환경설정

  1. Getting started

    • 필요사항

    • Install the Angular CLI

      npm install -g @angular/cli

  2. Create a new workspace and an initial application

    • Angular workspace

      • projets
        • 앱을 구성하는 파일들
        • 라이브러리
        • end-to-end tests

    • workspace 만들기

      ng new angular-tour-of-heroes

      ng new : initial app project를 위한 기능들을 시행하는 커맨드

      • Angular CLI (Command line interface)가 필수적인 Angular npm 패키지들과 그것을 위해 필요한 패키지를(dependencies) 설치함
      • new workspace : angular-tour-of-heroes라는 폴더가 루트폴더임
      • initial skeleton app project : angular-tour-of-heroes 폴더(src 서브폴더 안에 있음)
      • end-to-end test 프로젝트 (e2e 서브폴더 안에 있음)
      • 환경설정 파일들

  3. Serve the application

    workspace 디렉토리에 가서 어플리케이션 실행하기

    cd angular-tour-of-heroes
ng serve --open

    ng serve : 앱을 빌드하고 개발서버를 시작하는 커맨드.

    –open : http://localhost:4200/을 열어줌.

    완료되면 이런 메세지가 뜸.

    Owner@DESKTOP-NQI8S1I MINGW64 ~/angular-tour-of-heroes (master)
$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
   
Date: 2019-05-18T03:25:39.405Z
Hash: c2fd15973ba118c66fce
Time: 30808ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 9.86 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.52 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

2-2. Angular components

1

이 페이지는 아까 ng serve –open을 통해서 열었던 shell을 통해서 제공됩니다. (마치 주피터노트북처럼요.. 그래서 끄면 안됨!)

  • AppComponent라는 angular component에 의해서 컨트롤된다고함.
  • Component : fundamental building blocks of Angular applications
    • display data on the screen
    • listen for user input
    • take action based on that user input

2-3. Make changes to the application

프로젝트 내부의 src/app 폴더에서 앱에 변화를 줄 수 있음

Owner@DESKTOP-NQI8S1I MINGW64 ~/angular-tour-of-heroes/src/app (master)
$ ls
app.component.css   app.component.spec.ts  app.module.ts
app.component.html  app.component.ts

  1. app.component.ts : Class Code. TypeScript로 작성됨

    • TypeScript 은 도대체 무엇인가요??

      타입스크립트는 자바스크립트의 상위 언어중 하나입니다.

      자바스크립트가 기본적으로 타입을 표시하지 않아도 되는 점 때문에 편리하긴 하지만, 디버깅이 힘들다는 단점이 있습니다.

      왜냐하면 타입을 적지 않다 보니 Intelij같은 IDE에 값의 타입정보를 제공하지 못하며, IDE 측에서 자동으로 리팩토링, 타입 체크를 하지 않기 때문입니다.

      이런 단점을 해결하기 위해서 타입스크립트라는 언어가 생겨났고, 앵귤러는 타입스크립트를 공식언어로 사용합니다.

      자바스크립트와 대체로 비슷한데, 자바처럼 타입을 선언해야한다는 점이 다릅니다. 자세한 점은 계속 보면서 살펴봅시다!

  2. app.component.html : HTML로 작성되는 템플릿

  3. app.component.css : css코드

  • Application 타이틀 바꾸기

    처음에 app.component.ts에 들어가면

    import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
}

    이렇게 되어있는데 title = ‘Tour of Heroes’라고 바꾸면,

    app.component.html에 있는 `` 부분이 바뀌어서 렌더링된다.

      
<h1>{{ title }}</h1>

  • Add application styles

    예시) 웹 파일 만들 때 css파일 추가하듯이 하면 됩니다!

    /* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
comments powered by Disqus