Angular 개발환경 설정 및 실행

Angular 개발환경 설정

- 작심 3일의 연속이였던 Angular 를 드뎌 시작해본다.

- 시간 날때 마다 1개씩 올려야 다짐했지만 잘 될지는 ㅠㅠ

일단 지금 시점에서 Angular는 그 동안 많은 변화가 있었던 듯....

초기 런닝커브가 심하다는 이야기는 수도 없이 들었다.....

하지만 역시 직접 해보지 않고선 그걸 알 방법은 없다..

일단 빠른 가이드를 위해 Angular quickstart 페이지에 접속...

Angular : https://angular.io/guide/quickstart

역시 영어는 좀 버벅이긴 했지만 머 어차피 코드만 볼테니 ㅋㅋ

(  typescript 가 설치 되지 않았다면 설치 고고 -> 터미널> npm install -g typescript  )

1. npm install -g @angular/cli

( 앵귤러 패키지 매니저 설치 : 프로젝트 생성 자동화 툴 )

2. ng new my-app 

( 자기 컴퓨터에 my-app이라는 이름을 가진 프로젝트 폴더를 생성후 내부에 angular 기본틀을 갖추어 준다. )

3. cd my-app 

ng serve --open

( my-app으로 폴더 이동 후 프로젝트 실행 - 걍 ng serve 해도 플젝 실행은 되지만 브라우저까지 띄워서 바로 보기위해 --open 명령어를 덧붙인듯.... )

위에 것을 전부 제대로 진행하였다면 아래와 같은 그림의 형태로 보일 것이다..

이제 칼을 뽑았으니 무라도 썰어보자. 

Hello world 화면에 찍어보기....

1.  프로젝트 폴더에 보면 src/main.ts 파일을 보면 아래와 같다.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

먼소린지 모를 거시기들이 잔뜩 있다.

마지막 줄에 platformBrowserDynamic().bootstrapModule(AppModule)

부분이 이 어플리케이션을 실행시켜주는 최종 코드이다.

( import 구문들중 '@angular~ 어쩌고' 불러오는 angular코어 쪽은 나중에 살펴봐도 될 거 같다. )

bootstrapModule() 메서드가 먼가 AppModule을 실행하는 듯한 모양새이다.

AppModule가 선언된 지점을 보면 

import { AppModule } from './app/app.module';

위호출하는 파일은 app/app.module.ts 임을 알 수 있다.  ( import 구문은 es6 에서 검색해보면 알 수 있다. )

자 이제 그럼 app/app.module.ts 파일을 열어 보자.

아래와 같이 또 이상한 것들이 들어있다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

( import 구문들중 '@angular~ 어쩌고' 불러오는 angular코어 쪽은 나중에 살펴보자 )

머 다 모르겠고....아래와 같은 구문이 있다. 보면 app.component.ts를 불러오는 것을 알 수 있다.

해당 경로의 파일을 다시 타고 들어가 보자 ~( 언제까지 타고 들어갈 지는 모르겠지만 ㅋㅋ )

import { AppComponent } from './app.component';

app.component.ts파일을 열고 들어와 봤더니 아래와 같은 내용이 있다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello world~';
}

@Component({}) 구문 안을 살펴보니 selector, templeteUrl, styleUrls 등이 들어 있다.

Angular.js(1.5)를 해봐서 그런지 어색하진 않다.

예상컨데 아래와 같은 내용으로 짐작할 수 있다.

selector : html상에서 custom 태그명

templateUrl : selector로 지정한 커스텀 태그의 내용물인 순수 html 파일 경로

styleUrls: 해당 html을 꾸며주는 css 파일 경로.

그렇다면 hello world 를 찍어내기 위해선 app.component.html을 열어봐야 한다.

app.component.html을 열어보니 아래와 같은  x같은 코드들이 있다..

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
 ..........중략........................
</ul>

전부 지워버리~려고 했으나 또 소심해서 일단 주석처리 ㅋㅋㅋㅋ

하고 나서 아래와 같이 입력해 둔다.

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

그러고 나서 다시 app.component.ts파일로 돌아와 

export class AppComponent {
  title = 'Hello world~';
}

처럼 바꾸어 보자 ~

뙁~

어떤가 localhost:4200이 실행 중이라면 걍 살펴보면 hello world가 찍힘을 알 수 있다.

(실행 중이 아니면 터미널에 ng server --open )

머 이후에 또 어케 플젝을 변경시킬지는 모르겠지만 

초창기 angular2가 나왔을때는 초기 설정이 정말 멘붕이였다.

이 정도로 발전한거 보면 음...........공부하지 말고 더 기다릴까 ㅎㅎㅎㅎ