<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/%F0%9F%9B%A1%EF%B8%8F%20Angular/%F0%9F%9B%A1%EF%B8%8F%20Angular"><span>🛡️ Angular/🛡️ Angular</span></a></p><h3>Angular 산책하기 (1) : angular-cli 설치와 appModule</h3>
                </div><p><cite>DarrenKwonDev</cite>
                  <span> 2021. 11. 22. 22:21</span>
                </p><div>
                                <p data-ke-size="size16">기본만 살펴보면 Nest.js와 상당히 비슷하다고 알 수 있따.</p>
<p data-ke-size="size16">(Nest.js아 Angluar에 영감을 받아 만들어졌지만 필자는 Nest를 먼저 맛 본 관계로...)</p>

<h4 data-ke-size="size20"><b>설치</b></h4>

<p data-ke-size="size16"><a href="https://angular.io/cli" target="_blank" rel="noopener">angular-cli</a> 설치</p>
<pre id="code_1637584321926" data-ke-language="javascript" data-ke-type="codeblock"><code>npm install -g @angular/cli</code></pre>
<p data-ke-size="size16">버전확인</p>
<pre id="code_1637584496527" data-ke-language="javascript" data-ke-type="codeblock"><code>ng version</code></pre>

<pre id="code_1637584614180" data-ke-language="javascript" data-ke-type="codeblock"><code>ng new [projectName]</code></pre>

<p data-ke-size="size16">ng generate 꼴로 필요한 코드들의 scafold를 만들어주는데 아주 유용함. 게다가 Module에 자동으로 주입까지 해 줌.</p>
<p data-ke-size="size16"><a href="https://angular.io/cli/generate" target="_blank" rel="noopener">https://angular.io/cli/generate</a></p>
<pre id="code_1637588344166" data-ke-language="html" data-ke-type="codeblock"><code>ng generate &lt;schematic&gt; [options]

ex - ng generate component header
줄여서 ng g c header

ex- n g c header/logo
header 경로 아래 logo라는 컴포넌트 생성하기</code></pre>


<h4 data-ke-size="size20"><b>구조 설명</b></h4>

<p data-ke-size="size16">react에서 &lt;div id='root'&gt;&lt;/div&gt;로 관습적으로 잡는 부분이 &lt;app-root&gt;로 되어 있음.</p>
<pre id="code_1637584747553" data-ke-language="html" data-ke-type="codeblock"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;FrontEnd&lt;/title&gt;
  &lt;base href="/"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;app-root&gt;&lt;/app-root&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p data-ke-size="size16">./main.ts</p>
<p data-ke-size="size16">entry포인트 역할을 함. 구체적으론 AppModule파일을 실행</p>
<pre id="code_1637584838749" data-ke-language="javascript" data-ke-type="codeblock"><code>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();
}

// bootstrapModule : 애플리케이션 로드
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err =&gt; console.error(err));</code></pre>

<p data-ke-size="size16">app 내부</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="234" data-origin-height="181">
    <span data-url="https://k.kakaocdn.net/dn/bHCzA0/btrlNdZ3r5P/BJRE3KqXAbNv69kKyPQQm1/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bHCzA0/btrlNdZ3r5P/BJRE3KqXAbNv69kKyPQQm1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="234" data-origin-height="181">
    </span>
    
</figure>

<p data-ke-size="size16">NgModule을 이용하여 AppModule이란 클래스를 모듈화함.</p>
<p data-ke-size="size16">* 모듈 -&gt; 독립 가능한 덩어리, 아래 글을 참고 하면 더 좋음</p>
<p data-ke-size="size16"><a href="https://programmingsummaries.tistory.com/118" target="_blank" rel="noopener">https://programmingsummaries.tistory.com/118</a></p>
<pre id="code_1637584993989" data-ke-language="javascript" data-ke-type="codeblock"><code>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AppModules는 모듈이야
@NgModule({
  // 선언값. 모듈에서 사용할 컴포넌트들이 들어감
  declarations: [AppComponent],
  // 다른 모듈 import
  imports: [BrowserModule, AppRoutingModule],
  // 서비스 로직들
  providers: [],
  // 실행할 컴포넌트 (booting)
  bootstrap: [AppComponent],
})
export class AppModule {}</code></pre>

<p data-ke-size="size16">그렇다면 AppModule이 boot하는 AppComponent는 무엇인지 app.component.ts를 살펴보자.</p>
<pre id="code_1637585560779" data-ke-language="javascript" data-ke-type="codeblock"><code>import { Component } from '@angular/core';

// AppComponent는 컴포넌트야
@Component({
  selector: 'app-root', // tag 이름 &lt;app-root&gt;
  templateUrl: './app.component.html', // 이 템플릿을 렌더할거야
  styleUrls: ['./app.component.scss'], // 이 스타일을 쓸거야
})
export class AppComponent {
  title = 'front-end'; // templateUrl에서 {{ title }} 꼴로 사용 가능
}</code></pre>

<h4 data-ke-size="size20"><b>기타&nbsp;</b></h4>
<p data-ke-size="size16">package.json 중 script 부분</p>
<pre id="code_1637586806628" data-ke-language="javascript" data-ke-type="codeblock"><code>"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},</code></pre>

<p data-ke-size="size16">angular.json</p>
<p data-ke-size="size16">앵귤러의 각종 설정들이 들어 있음. (생략)</p>

<p data-ke-size="size16">빌드해서 뱉어보자</p>
<p data-ke-size="size16">(wow webpack 안 짜도 되네?)</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="356" data-origin-height="240">
    <span data-url="https://k.kakaocdn.net/dn/Q6Ox1/btrlVZZQzsf/jfQgerdu5lAhUAksMDaKXk/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/Q6Ox1/btrlVZZQzsf/jfQgerdu5lAhUAksMDaKXk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="356" data-origin-height="240">
    </span>
    
</figure>


<p data-ke-size="size16">ref)</p>
<p data-ke-size="size16"><a href="https://programmingsummaries.tistory.com/118" target="_blank" rel="noopener">https://programmingsummaries.tistory.com/118</a></p>

            
            
                </div></div>

HotHandCoding

DarrenKwon

기본만 살펴보면 Nest.js와 상당히 비슷하다고 알 수 있따.
(Nest.js아 Angluar에 영감을 받아 만들어졌지만 필자는 Nest를 먼저 맛 본 관계로...)
 
설치
 
angular-cli 설치
npm install -g @angular/cli
버전확인
ng version
 
ng new [projectName]
 
ng generate 꼴로 필요한 코드들의 scafold를 만들어주는데 아주 유용함. 게다가 Module에 자동으로 주입까지 해 줌.
https://angular.io/cli/generate
ng generate <schematic> [options]
ex - ng generate component header
줄여서 ng g c header
ex- n g c header/logo
header 경로 아래 logo라는 컴포넌트 생성하기
 
 
구조 설명
 
react에서 <div id='root'></div>로 관습적으로 잡는 부분이 <app-root>로 되어 있음.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FrontEnd</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
 
./main.ts
entry포인트 역할을 함. 구체적으론 AppModule파일을 실행
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();
}
// bootstrapModule : 애플리케이션 로드
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
 
app 내부
 
NgModule을 이용하여 AppModule이란 클래스를 모듈화함.
* 모듈 -> 독립 가능한 덩어리, 아래 글을 참고 하면 더 좋음
https://programmingsummaries.tistory.com/118
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// AppModules는 모듈이야
@NgModule({
  // 선언값. 모듈에서 사용할 컴포넌트들이 들어감
  declarations: [AppComponent],
  // 다른 모듈 import
  imports: [BrowserModule, AppRoutingModule],
  // 서비스 로직들
  providers: [],
  // 실행할 컴포넌트 (booting)
  bootstrap: [AppComponent],
})
export class AppModule {}
 
그렇다면 AppModule이 boot하는 AppComponent는 무엇인지 app.component.ts를 살펴보자.
import { Component } from '@angular/core';
// AppComponent는 컴포넌트야
@Component({
  selector: 'app-root', // tag 이름 <app-root>
  templateUrl: './app.component.html', // 이 템플릿을 렌더할거야
  styleUrls: ['./app.component.scss'], // 이 스타일을 쓸거야
})
export class AppComponent {
  title = 'front-end'; // templateUrl에서 {{ title }} 꼴로 사용 가능
}
 
기타 
package.json 중 script 부분
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},
 
angular.json
앵귤러의 각종 설정들이 들어 있음. (생략)
 
빌드해서 뱉어보자
(wow webpack 안 짜도 되네?)
 
 
ref)
https://programmingsummaries.tistory.com/118

Angular 산책하기 (1) : angular-cli 설치와 appModule

댓글