Angular

[Angular]Angular 컴포넌트 만들어보기

이채야채 2022. 5. 30. 15:04

 

 

현대로와서는 정적인 웹 => 동적인 웹으로 고도화 됨에 따라,  Single Page

Application이 등장하고 이로인해 서버에 부담을 줄여주며 부드러운 화면구현이 가능한 CSR를 프론트엔드에서 많이 사용하고있다.

 

SPA Single Page Application의 삼대장 vue, angular, react

 

앵귤러JS는 구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크

기초셋팅하기

1. CLI 설치

 - npm install -g @angular/cli

※ 구버전 삭제방법 npm uninstall -g @angular/cli

 

2. 프로젝트 생성

 - ng new 프로젝트명

 - Would you like to add Angular routing?

  + yes

 - Which stylesheet format would you like to use? 

  + css / scss / sass / less / stylus 중 선택

 

3. 프로젝트 실행

 - ng serve

 

브라우저 url : http://localhost:4200/

 

 

리액트에 익숙해져서 npm start를 할 수 도있으나. angular에서는 구동방식이 다르다. ng라는 명령어를 시작하여 프로젝트를 시작하고 실행하며 브라우저의 localhost port번호도 다르다. 이점을 유의해서 만들어보자

 

기본구조 살펴보기

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todolist</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>

 

<body></body> 태그안에는 

<app-root></app-root> 태그가 들어가있다.

 

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.error(err));

 

앵귤러는 작성한 코드들을 바로실행하지않고

한번 컴파일 후 => 자바스크립트 파일로 만들어낸다.  브라우저에서 동적으로 하겠다는 것을 의미하긴한다.

 

서버에서도하고 다양한 환경에서 하기위해 렌더링, 컴파일 시스템이 분리되어있다.

그렇기에 

platforBrowserDynamic().bootstrapModule(AppModule)이란 말은 컴파일을 브라우저에서 동적으로한다 라는 의미다.

 

 

여기서 AppModule을 한번 눌러보자

 

app.module.ts

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

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

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

@NgModule같은경우에는 타입스크립트에서 지원해주는것

 

AppModule이라는 class를 NgModule로 장식해주겠다. 이 클래스를 모듈로 만들어주겠다. 

 

모듈은 독립가능한 기능의 상자다.

declarations: 선언값 

import: 다른모듈들

providers: 뷰가아닌 서비스 로직들

bootstrap: 처음실행할 컴포넌트

 

 

bootstrap안의 AppComponent를 눌러보면

 

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

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

AppComponent는 컴포넌트 클래스다. app-root가 바로 appcomponent!

selector: 컴포넌트의 태그네임

templateUrl: html파일을 이야기한다.

styleUrls: css값

 

결과적으로 app컴포넌트는 태그네임을 가지고있고, templateUrl, styleUrl을 가지고있는 레고조각이라고 생각하면된다.

 

 

 

이렇게 되면

index.html의 app-root에 들어가져서 appcomponent가 만들어지고 추가되면서 그려지게 되는 구조이다.

 

app내부에 hello컴포넌트를 만들어봤다.

 

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

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

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

 

만들어준 후

 

app.module.ts에 넣어주고

 

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

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

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

app.component.html에다가 이렇게 삽입해준다.

 

 

ng serve를 통해서 보면

잘 동작함을 알 수 있다. 

 

첫 앵귤러 프로젝트 시작! 이 보인다