Angular 11 + firebase(firestore) 프로젝트 #05 여러 component 가져오기

앵귤러의 쉬운 예제를 봤으니 데이터베이스를 연결하여 진행하는 프로젝트를 해봐야 겠다.

 

Angular 프로젝트를 새로 만든다.

terminal 상에서 mkdir angular-fire 명령으로 폴더를 만들고

cd angular-fire 명령으로 폴더로 이동 후

안에 ng new angularfire 명령어로 angularfire 이라는 앵귤러 프로젝트를 생성한다

이제 앵귤러 프로젝트가 생성이 되었으니, angular-fire이라는 폴더에 와 있는 터미널 상에서 code . 명령어로 vscode 를 실행한다.

 

model view controller 의 개념을 조금 확실하게 적용해볼까 한다.

vscode 상에서 ⌘ + ` (잘 안되면 ⌃ + ⇧ + `) 명령어로 vscode 상에서의 터미널을 하단에 띄운다. 

프로젝트에서 ng g c login 명령어로 login component를 생성한다.

ng serve로 잘 만들어졌는지 확인해본다. 

ng serve -o를 하면 바로 창까지 띄워서 보여주긴 한다.

컴포넌트가 잘 생성이 되었는지 확인을 할 것이기 때문에, login 컴포넌트에서 login.component.ts 파일에서 selector 이름을 확인한다. 여기에서는 app-login으로 지정이 되어있는 것을 확인할 수 있다. 

잘 생성된건지 확인을 하려면 app.component.html로 이동 후, 난잡한 ui들을 내용을 전부 지우고 app.component.html의 내용을 다음과 같이 바꾼다.

<app-login></app-login>

html을 수정 후 ⌘ + s 로 변경 내용을 저장하면, 앵귤러는 자동으로 화면의 내용을 변경해준다. 브라우저를 켜서 localhost:4200 으로 이동하면 다음과 같은 화면을 볼 수 있다.

이전과 같은 동작을 하는 코드를 넣는 작업을 할 것이다. 하지만 다른 점이 있으니 조심히!

 

login.component.ts 파일을 수정한다

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  logedIn : boolean = false; // html에서 ngIf를 써서 조건 만족시 표출위한 변수
  id :string;   
  pwd : string;

  constructor() { }

  ngOnInit(): void {
  }

  // id필드에 admin, pw필드에 1234를 친 경우에만 vibile
  tryToLogin() : void{
    if(this.id =='admin' && this.pwd == '1234'){
      this.logedIn = true;
    }   
    console.log(this.id, this.pwd);    
    // F12눌렀을 경우 해당 콘솔에서 확인만 할게요 (실제 개발에서 이러면 맞아 죽음)
  }

}

login.component.html 파일을 수정한다.

<div>Sign In</div>
<input type="text" placeholder="id" [(ngModel)]="id"/>
<input type="text" placeholder="password"  [(ngModel)]="pwd"/>
<button (click)='tryToLogin()'>Login</button>

ㅇㅇㅇ여기까지만 했을 때에는 오류처럼 보이는 것이 있을 수 있다. ngModel 을 사용하는데 외부 라이브러리이고, 그걸 들여오기 전이라 그렇다. 삽질하면서 개발중이기에 쭉쭉 계속 하면 된다.

app.module.ts에 FormsModule이라는 것을 추가한다. imports: [ ] 에 쓰면 상단에 알아서 import가 되니 무조건 복붙을 하지말고 imports에 FormsModule을 타이핑하며 뜨는 자동완성을 선택해 상단에 import 되도록 설정한다. 이러면 오류 해결.

 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { FormsModule } from '@angular/forms';

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

 

그럼 로그인 컴포넌트는 다 된 거 같고, dashboard 하자

⌃ + ⇧ + ` 해서 vscode상의 터미널을 하나 더 띄워준다

ng g c dashboard 실행해서 dashboard라는 컴포넌트를 하나 더 만들자 

 

요놈도 마찬가지로 dashboard  폴더에서 dashboard.component.ts 파일에서 selector 이름을 확인후, 그 이름을 app.component.html 의 가장 마지막 부분에 넣어서 잘 돌아가는지 확인을 하자.

app.component.html

<app-login></app-login>
<app-dashboard></app-dashboard>

잘 들어간 것을 확인했는데, 우리는 ui가 이런걸 원치 않는다. 로그인을 완료를 하면 로구인을 하는 저 ui는 사라져야 한다. 조지자.

app.component.ts파일을 수정한다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularfire';
  // 이 변수들로 보였다 안보였다 조정을 할 것이다
  loginVisible = true;  
  boardVisible = false;
}

app.component.html 파일을 수정한다

<app-login *ngIf="loginVisible"></app-login>
<app-dashboard *ngIf="boardVisible"></app-dashboard>

아까 app.component.html에 가져왔던 두 컴포넌트를 하나는 보이게 , 하나는 안 보이는 상태이다. 로그인 성공 전 까지는 대쉬보드 안보이게 할 거임 (true, false 했으니까)

 

login.component.ts 파일에 @Input() 을 추가할거임.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  @Input() logedIn : boolean = false; // html에서 ngIf를 써서 조건 만족시 표출위한 변수
  id :string;   
  pwd : string;

  constructor() { }

  ngOnInit(): void {
  }

  // id필드에 admin, pw필드에 1234를 친 경우에만 vibile
  tryToLogin() : void{
    if(this.id =='admin' && this.pwd == '1234'){
      this.logedIn = true;
    }   
    console.log(this.id, this.pwd);    
    // F12눌렀을 경우 해당 콘솔에서 확인만 할게요 (실제 개발에서 이러면 맞아 죽음)
  }
}

export 의 logedin 을 @Input() 을 달아준 것이다. 이제 이거는 데코레이터 라고 하는 것이다.

#데코레이터 : Angular가 정의한 기능을 파일에 주는 것이다.

(전에 보았던 *ngIfm *ngFor 은 구조지시자 라고 불리우는 것이다.)

 

알겠으니까 일단 보자 되는지.

app.component.html 에 적용을 해보자

<app-login *ngIf="loginVisible" [logedIn] = 'loginVisible'></app-login>
<app-dashboard *ngIf="boardVisible"></app-dashboard>

일단 적용한건데 뭐 이렇게 할 때에 안보이게 뭐 이런걸 아직 설정을 안하긴 함. 그럼 설정 하러 가볼까

 

login.component.ts 수정

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  @Input() logedIn : boolean; // 보내는걸 받을거야 여기서
  // app.component.html 파일에서 [logedIn] = 'loginVisible' 한 부분 받는 놈이라고
  @Output() sendMyEvent : EventEmitter<any> = new EventEmitter(); // 얘가 보내는 놈이야

  id :string;   
  pwd : string;

  constructor() { }

  ngOnInit(): void {
  }

  // id필드에 admin, pw필드에 1234를 친 경우에만 vibile
  tryToLogin() : void{
    if(this.id =='admin' && this.pwd == '1234'){
      this.logedIn = true;
    }else{
      this.logedIn = false;
    }
    console.log(this.id, this.pwd, this.logedIn);
    this.sendMyEvent.emit(this.logedIn);
  }
}

@Output 데코레이터는 컴포넌트 외부로 전달할 때 사용하는 기능임.

EventEmitter의 클래스의 emit 기능으로 원하는  데이터를 보낼 수 있음.

 

app.component.ts 수정

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularfire';
  // 이 변수들로 보였다 안보였다 조정을 할 것이다
  loginVisible = true;  
  boardVisible = false;

  getEventLogin(event){
    console.log(event);
    if(event == true){
      this.loginVisible = false;  // true 가 오면 로그인은 안보이고
      this.boardVisible = true;   // 보드가 보이게끔
    }
  }    
}

getEventLogin(event) 라는 함수를 만들어서 일단 콘솔로 찍어보기로 . (브라우저에서 F12 눌렀을대 보이는거)

이러고 일단 localhost:4200 페이지 어떻게 돌아가는지 함 빨리 보자

 

id나 pwd 하나라도 틀리면 아무 변화 없다가, admin 1234 라고 올바르게 넣는 순간 바로 로그인은 사라지고 대쉬보드가 뙇!

 

 

mvc 개념으로 접근을 하자.

많은 컴포넌트들이 있어. 컴포넌트들은 각자의 selector 가 있다. 이런 model 개념으로 볼 수 있는 컴포넌트들도 있지만

컴포넌트 자체를 controller 의 용도로 사용을 할 수 있다. 

 

이전 포스터에서 봤을 때에 가장 먼저 실행되는 모듈, 컴포넌트가 있었다. 그 녀석들이 controller의 목적으로 사용이 될 수 있는 것이다.  app.module.ts에 보면 selector을 사용해서 많은 component들을 가져오는걸 볼 수 있다. 근데 막가져오면 다 보이겠지? 그래서 app.component.ts에서 변수를 두고 app.component.html에는 ngIf  를 줘서 뭐가 보일지 말지 정하는거지.