목차: 웹 앱 개발 로드맵

제10회: 뉴스 피드 게시 서버 IF를 웹 앱에서 호출

이번에는 이전에 작성한 뉴스 피드 게시물 IF를 프런트 엔드에서 호출해 보겠습니다.

메시지 입력 및 POST 버튼 만들기

우선 화면에 넣어 보자

긴 텍스트를 입력하는 <textarea> 태그와 <button> 태그를 추가합니다.

newsfeeds.component.html

<div id="newsfeeds">
  <textarea placeholder="message ..."></textarea><br>
  <button>POST</button>
  <ng-container *ngIf="newsfeeds && newsfeeds.newsfeeds">

버튼을 클릭했을 때의 이벤트 등록과, <textarea> 메세지를 읽을 수 있도록(듯이) 한다.

<textarea> 에 입력한 문자를 로그에 출력해, 정상적으로 잡혀 있는지 확인합니다.

newsfeeds.component.ts

export class NewsfeedsComponent implements OnInit {

  newsfeeds: Newsfeeds;
  message: string;

・・・

  onClickPost() {
    console.log(this.message);
  }
}

newsfeeds.component.html

<div id="newsfeeds">
  <textarea placeholder="message ..." [(ngModel)]="message"></textarea>
  <button (click)="onClickPost()">POST</button>

  <ng-container *ngIf="newsfeeds && newsfeeds.newsfeeds">

REST IF를 불러보기

POST IF를 만들고 화면과 연결

RestService에 새로운 POST IF를 추가하고 클릭 이벤트에서 호출해보십시오.

rest.service.ts

　・・・

  async searchNewsFeeds(): Promise<Response<Newsfeeds>> {

　  ・・・

  }

  async createNewsFeed(message: string): Promise<Response<null>> {
    return new Promise((resolve, reject) => {
      const url = environment.rest.domain + '/newsfeeds';
      const body = {
        message: message,
        createdAt: new Date()
      };
      this.httpClient.post(url, body).toPromise().then(response => {
        resolve(new Response(null));
      }).catch(error => {
        console.error(error);
        reject(error);
      });
    });
  }

  ・・・

newsfeeds.component.ts

　・・・

  async onClickPost() {
    try {
      await this.restService.createNewsFeed(this.message);
    } catch (error) {
      // TODO: display alert dialog.
    }
  }
}

동작 확인

실제로 화면에서 메시지를 입력하고 POST해 봅시다.
서버측 로그에 입력한 메시지가 출력되는 것을 확인할 수 있습니다.

POST 버튼의 활성 상태 제어

메시지가 입력되어 있지 않을 때 POST 버튼을 누르거나 서버 통신이 움직이는 것은 낭비이므로 메시지가 입력되어 있지 않을 때는 POST 버튼을 비활성이 되도록 제어합니다. 아래 수정을 추가하십시오.

newsfeeds.component.html

  <div id="post-button"><button (click)="onClickPost()" [disabled]="!message || message.length === 0">POST</button></div>

로그인 화면도 마찬가지로 ID, Password가 입력되어 있지 않을 때는 Sign in 버튼이 활성화되지 않도록 수정하십시오.

외형을 장식

마지막으로 scss로 외형을 장식하고 끝납니다.

newsfeeds.component.html

  <textarea id="post-message" placeholder="message ..." [(ngModel)]="message"></textarea><br>
  <div id="post-button"><button (click)="onClickPost()">POST</button></div>

newsfeeds.component.scss

#newsfeeds {

  ・・・

  #post-message {
    width: 100%;
    height: 60px;
    border: 0px none;
    border-radius: 5px;
    resize: none;
    box-sizing: border-box;
  }
  #post-button {
    text-align: right;
    margin-bottom: 40px;
    button {
      width: 120px;
    }
  }
}

button의 활성 상태에 따라 마우스 커서도 클릭할 수 있는 외형으로 바뀌도록 합니다.
모든 버튼에 적용하고 싶기 때문에 공통 스타일을 추가합니다.

src/styles.scss

html, body {
  height: 100%;
}

button {
  cursor: pointer;
  &:disabled {
    cursor: default;
  }
}

마지막으로

이번에는 프런트 엔드에서 뉴스 피드 게시물의 REST API를 불러 보았습니다.
다음 번부터 백엔드에 DB를 작성하겠습니다.
이번에 개발한 소스 코드는 GitHub에 들어 있습니다.