Create Front-End User Profile Store W/ Angular & Typescript

저는 최근에 이 제목의 튜토리얼을 작성했습니다, Node.js 및 NoSQL 데이터베이스로 사용자 프로필 스토어 만들기는 NoSQL 데이터베이스와 관련하여 매우 인기 있는 주제이자 사용 사례이기 때문입니다. 이 튜토리얼에서는 API Node.js 사용 그리고 카우치베이스 를 사용하여 사용자, 특정 사용자와 관련된 정보를 저장하고 세션을 만료할 수 있습니다. 하지만 사용자 인터페이스가 없는 백엔드 관련 기능에 불과했습니다.

사용자 프로필 저장소 API를 사용하여 다음을 이해하고 싶었습니다. 타입스크립트와 앵귤러를 사용하여 만드는 방법, 각 API 엔드포인트와 통신하는 프로필 페이지입니다.

이 튜토리얼은 2021년 1월 7일 기준으로 다음과 같이 업데이트되었습니다. 에릭 비샤드 를 사용하여 Angular 11과 함께 작업하세요!

계속 진행하기 전에 다음 사항을 준수했다고 가정합니다. 이전 튜토리얼. 또한 다음과 같이 가정합니다. 앵귤러 CLI 설치되었습니다.

필요한 컴포넌트로 Angular 프로젝트 만들기

클라이언트 프런트엔드는 초보적인 수준이지만 처음부터 다시 만들 것입니다. 디자인 관점에서 보면 이 튜토리얼은 기능과 API 작업에 관한 것이므로 멋지게 보이지는 않을 것이지만, 멋지게 보이게 하고 더 나은 UX를 제공하려는 것은 여러분의 몫입니다.

Angular CLI에서 다음 명령을 실행합니다:

ng new couchbase-angular-blog-app

1	ng new 카우치베이스-각도-블로그-앱

위 명령은 CLI 경로에 새 프로젝트를 생성합니다. 프로젝트가 생성되면 예상되는 각 애플리케이션 페이지에 대한 컴포넌트를 만들어야 합니다.

Angular CLI로 다음을 실행합니다:

ng g component login
ng g component register
ng g component blogs
ng g component blog

ng g 컴포넌트 로그인

ng g 컴포넌트 등록

ng g 컴포넌트 블로그

각각 적절한 타입스크립트 및 HTML 파일과 함께 네 개의 Angular 사용자 프로필 컴포넌트가 만들어집니다. 로직을 추가하기 전에 아래의 각도 사용자 프로필 템플릿을 사용하여 탐색 목적으로 이들을 하나로 묶어야 합니다.

프로젝트의 src/app/app.module.ts 파일을 열고 다음을 포함하세요:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { BlogsComponent } from './blogs/blogs.component';
import { BlogComponent } from './blog/blog.component';
import { RouterModule } from '@angular/router';

let routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' }, 
  { path: 'login', component: LoginComponent }, 
  { path: 'register', component: RegisterComponent }, 
  { path: 'blogs', component: BlogsComponent }, 
  { path: 'blog', component: BlogComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    BlogsComponent,
    BlogComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule, 
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

가져오기 { 브라우저 모듈 } 에서 '@각/플랫폼-브라우저';

가져오기 { NgModule } 에서 '@angular/core';

가져오기 { 폼 모듈 } 에서 '@각형/양식';

가져오기 { HttpClientModule } 에서 '@angular/common/http';

가져오기 { 앱 컴포넌트 } 에서 './app.component';

가져오기 { 로그인 컴포넌트 } 에서 './login/login.component';

가져오기 { 등록 컴포넌트 } 에서 './register/register.component';

가져오기 { 블로그 컴포넌트 } 에서 './blogs/blogs.component';

가져오기 { 블로그 컴포넌트 } 에서 './blog/blog.component';

가져오기 { 라우터 모듈 } 에서 '@각/라우터';

let 경로 = [

{ 경로: '', redirectTo: '/로그인', 경로 일치: 'full' },

{ 경로: '로그인', 컴포넌트: 로그인 컴포넌트 },

{ 경로: '등록', 컴포넌트: 등록 컴포넌트 },

{ 경로: '블로그', 컴포넌트: 블로그 컴포넌트 },

{ 경로: 'blog', 컴포넌트: 블로그 컴포넌트 }

];

@NgModule({

선언: [

앱 컴포넌트,

로그인 컴포넌트,

등록 컴포넌트,

블로그 컴포넌트,

블로그 컴포넌트

수입: [

브라우저 모듈,

폼 모듈,

HttpClientModule,

라우터 모듈,

라우터 모듈.forRoot(경로)

공급자: [],

부트스트랩: [앱 컴포넌트]

})

내보내기 클래스 앱 모듈 { }

위의 코드는 Angular CLI로 작성되었지만 몇 가지 핵심 및 사용자 정의 모듈 임포트를 추가하고 이를 경로 를 @NgModule 블록.

탐색 기능을 활성화하려면 파일을 업데이트해야 합니다. 프로젝트의 src/app/app.component.html 파일을 열고 모든 콘텐츠를 다음으로 바꿉니다:

<router-outlet></router-outlet>

1	<라우터-아울렛></라우터-아울렛>

이 시점에서 사용자 프로필 프로젝트의 기본 구성은 각도입니다.

사용자 프로필을 생성하고 계정 정보로 로그인하는 방법을 살펴보겠습니다.

로그인 및 등록 처리

사용자에게 가장 먼저 표시되는 화면은 로그인 화면입니다. 여기서 사용자 이름과 비밀번호를 수집하여 API로 전송하고 세션 ID를 응답으로 받아 향후 애플리케이션의 모든 페이지에서 사용하는 것이 목적입니다.

프로젝트의 src/app/login/login.component.ts 파일을 열고 다음 TypeScript 코드를 포함합니다:

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router'; 

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

export class LoginComponent implements OnInit {

  public input: any;

  constructor(private http: HttpClient, private router: Router) {
    this.input = {
      'email': '',
      'password': ''
    };
  }

  ngOnInit(): void { }

  public login() {
    if (this.input.email && this.input.password) {
      let headers = new HttpHeaders({ 'content-type': 'application/json' });
      this.http.post('http://localhost:3000/login', JSON.stringify(this.input), { headers: headers })
        .subscribe(result => 
          this.router.navigate(['/blogs'], { 'queryParams': result })
        );
    }
  }

}

가져오기 { 구성 요소, OnInit } 에서 '@angular/core';

가져오기 { HttpClient, HttpHeaders } 에서 '@angular/common/http';

가져오기 { 라우터 } 에서 '@각/라우터';

@구성 요소({

선택기: '앱 로그인',

templateUl: './login.component.html',

styleUrls: ['./login.component.css']

})

내보내기 클래스 로그인 컴포넌트 구현 OnInit {

public 입력: any;

생성자(비공개 http: HttpClient, 비공개 라우터: 라우터) {

이.입력 = {

'이메일': '',

'password': ''

};

}

ngOnInit(): void { }

public 로그인() {

만약 (이.입력.이메일 && 이.입력.비밀번호) {

let 헤더 = new HttpHeaders({ '콘텐츠 유형': 'application/json' });

이.http.post('http://localhost:3000/login', JSON.문자열화(이.입력), { 헤더: 헤더 })

.구독(결과 =>

이.라우터.탐색(['/blogs'], { 'queryParams': 결과 })

);

}

위의 코드에는 몇 가지 중요한 일이 일어나고 있으므로 이를 분석해 보겠습니다.

우리의 의도는 HTML 마크업의 양식에 객체를 바인딩하는 것입니다. 이 객체는 입력 변수를 설정합니다. 에서 생성자 메서드에서 가능한 각 프로퍼티를 빈 값으로 설정하여 UI에 반영합니다.

사용자가 로그인을 결정하면 요청에 대한 적절한 헤더 정보가 설정되고 객체가 서버로 전송됩니다. 성공하면 응답은 세션 ID가 있는 객체입니다. 이를 다음 페이지에 쿼리 매개변수로 전달하겠습니다.

이 타입스크립트와 짝을 이루는 HTML 마크업은 프로젝트의 src/app/login/login.component.html 를 클릭하면 다음과 같이 표시됩니다:

여기서 언급해야 할 점은 비밀번호를 잘못 입력한 경우 사용 된 사용자 이름이나 비밀번호가 올바르지 않음을 사용자에게 알릴 수있는 방법을 만들지 않았으며 여기에서만 기능이 있으며 기본 데모를 약간 벗어난 기능이므로 해당 기능을 만들어야한다는 것입니다.

여기서 중요한 것은 [(ngModel)] 속성을 사용하여 데이터 바인딩에 사용할 수 있습니다. 또한 다음을 통해 등록 페이지로 이동하는 탐색 기능도 제공합니다. [라우터링크] 속성입니다.

그렇다면 등록 구성 요소는 어떤 모습일까요?

프로젝트의 src/app/register/register.component.ts 파일을 열고 다음 TypeScript 코드를 포함합니다:

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {

  public input: any;

  public constructor(private http: HttpClient, private router: Router) {
    this.input = {
      'firstname': '',
      'lastname': '',
      'email': '',
      'password': ''
    };
  }

  ngOnInit(): void { }

  public register() {
    if (this.input.email && this.input.password) {
      let headers = new HttpHeaders({ 'content-type': 'application/json' });
      this.http.post('http://localhost:3000/account', JSON.stringify(this.input), { headers: headers })
        .subscribe(() =>
          this.router.navigate(['/login'])
        );
    }
  }

}

가져오기 { 구성 요소, OnInit } 에서 '@angular/core';

가져오기 { HttpClient, HttpHeaders } 에서 '@angular/common/http';

가져오기 { 라우터 } 에서 '@각/라우터';

@구성 요소({

선택기: '앱-등록',

templateUl: './register.component.html',

styleUrls: ['./register.component.css']

})

내보내기 클래스 등록 컴포넌트 구현 OnInit {

public 입력: any;

public 생성자(비공개 http: HttpClient, 비공개 라우터: 라우터) {

이.입력 = {

'이름': '',

'성': '',

'이메일': '',

'password': ''

};

}

ngOnInit(): void { }

public 등록() {

만약 (이.입력.이메일 && 이.입력.비밀번호) {

let 헤더 = new HttpHeaders({ '콘텐츠 유형': 'application/json' });

이.http.post('http://localhost:3000/account', JSON.문자열화(이.입력), { 헤더: 헤더 })

.구독(() =>

이.라우터.탐색(['/로그인'])

);

}

등록 코드가 로그인 코드와 비슷하다는 것을 알 수 있습니다. 단지 양식 데이터를 수집하여 다른 API 엔드포인트로 전송할 뿐입니다.

해당 HTML은 프로젝트의 src/app/register/register.component.html 파일은 다음과 같습니다:

등록하기

이름:

성:

이메일:

비밀번호:

로그인

HTML에는 양식 요소에 [(ngModel)] 속성과 로그인 페이지로 돌아가는 링크를 추가합니다.

로그인한 후에는 세션을 사용자별 페이지로 전달한다는 점을 기억하세요. 이렇게 하면 프로필 스토어에서 사용자 정보를 가져올 수 있습니다.

프로필 스토어에서 특정 사용자에 대한 블로그 글 만들기 및 보기

로그인 후 사용자는 자신이 작성한 블로그 글 목록을 볼 수 있는 페이지로 이동합니다. 백엔드는 정의한 프로필 ID를 통해 NoSQL 문서를 연결한다는 점을 기억하세요.

블로그 글을 보려면 이전 페이지에서 전달된 세션 ID를 요청의 헤더로 설정해야 합니다. 요청의 결과가 화면에 즉시 렌더링될 수 있습니다.

프로젝트의 src/app/blogs/blogs.component.ts 파일을 열고 다음 TypeScript 코드를 포함합니다:

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-blogs',
  templateUrl: './blogs.component.html',
  styleUrls: ['./blogs.component.css']
})

export class BlogsComponent implements OnInit {

  private sid: string;
  public entries: any; 

  public constructor(
    private http: HttpClient, 
    private router: Router, 
    private route: ActivatedRoute
  ) {
    this.entries = [];
  }

  public ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.sid = params['sid'];
      let headers = new HttpHeaders({ 'authorization': 'Bearer ' + params['sid'] });
      this.http.get('http://localhost:3000/blogs', { headers: headers })
        .subscribe(result => {
          this.entries = result;
          console.log(result)
        });
    });
  }

  public create() {
    this.router.navigate(['/blog'], { 'queryParams': { 'sid': this.sid } });
  }

}

가져오기 { 구성 요소, OnInit } 에서 '@angular/core';

가져오기 { HttpClient, HttpHeaders } 에서 '@angular/common/http';

가져오기 { 라우터, 활성화된 경로 } 에서 '@각/라우터';

@구성 요소({

선택기: 'app-blogs',

templateUl: './blogs.component.html',

styleUrls: ['./blogs.component.css']

})

내보내기 클래스 블로그 컴포넌트 구현 OnInit {

비공개 sid: 문자열;

public 항목: any;

public 생성자(

비공개 http: HttpClient,

비공개 라우터: 라우터,

비공개 경로: 활성화된 경로

) {

이.항목 = [];

}

public ngOnInit() {

이.경로.쿼리 매개변수.구독(매개변수 => {

이.sid = 매개변수['sid'];

let 헤더 = new HttpHeaders({ 'authorization': '무기명 ' + 매개변수['sid'] });

이.http.get('http://localhost:3000/blogs', { 헤더: 헤더 })

.구독(결과 => {

이.항목 = 결과;

콘솔.로그(결과)

});

}

public create() {

이.라우터.탐색(['/blog'], { 'queryParams': { 'sid': 이.sid } });

}

이 파일은 로그인 및 등록을 처리하는 방식과 유사한 전략을 따릅니다.

변수의 경우, 다음과 같은 개인 변수를 만듭니다. sid 를 클릭하면 이전 페이지에서 전달된 세션이 유지됩니다. 이 페이지의 항목 변수는 API 엔드포인트에서 반환된 개별 블로그 항목의 배열이 됩니다.

페이지가 로드되면 블로그 항목이 표시되어야 합니다. 데이터를 로드하거나 요청하는 것은 절대로 좋은 생각이 아닙니다. 생성자 메서드를 사용할 수 없으므로 대신 ngOnInit 메서드를 사용합니다.

public ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.sid = params['sid'];
    let headers = new HttpHeaders({ 'authorization': 'Bearer ' + params['sid'] });
    this.http.get('http://localhost:3000/blogs', { headers: headers })
      .subscribe(result => {
        this.entries = result;
        console.log(result)
      });
  });
}

public ngOnInit() {

이.경로.쿼리 매개변수.구독(매개변수 => {

이.sid = 매개변수['sid'];

let 헤더 = new HttpHeaders({ 'authorization': '무기명 ' + 매개변수['sid'] });

이.http.get('http://localhost:3000/blogs', { 헤더: 헤더 })

.구독(결과 => {

이.항목 = 결과;

콘솔.로그(결과)

});

}

에서 ngOnInit 메서드를 사용하여 전달된 파라미터를 가져와 권한 부여 헤더를 구성할 수 있습니다. 그런 다음 헤더가 포함된 엔드포인트에 대해 요청을 합니다.

새 블로그 항목을 만들려면 새 블로그 항목에 sid 를 눌러 다음 경로로 이동합니다:

public create() {
  this.router.navigate(['/blog'], { 'queryParams': { 'sid': this.sid } });
}

public create() {

이.라우터.탐색(['/blog'], { 'queryParams': { 'sid': 이.sid } });

}

로그인 화면에서 본 것과 같은 모습입니다.

UI를 구동하는 HTML 마크업은 UI를 구동하는 타입스크립트 로직보다 더 복잡하지 않습니다. HTML은 src/app/blogs/blogs.component.html 이렇게요:

작성한 블로그

블로그 항목을 만드는 것은 이미 살펴본 것과 비슷한 로직을 가지고 있습니다. 프로젝트의 src/app/blog/blog.component.ts 파일을 열고 다음 TypeScript 코드를 포함합니다:

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})

export class BlogComponent implements OnInit {

  private sid: string;
  public input: any;

  public constructor(private http: HttpClient, private route: ActivatedRoute, private location: Location) {
    this.input = {
      'title': '',
      'content': ''
    };
  }

  public ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.sid = params['sid'];
    });
  }

  public save() {
    if (this.input.title && this.input.content) {
      let headers = new HttpHeaders({
        'content-type': 'application/json',
        'authorization': 'Bearer ' + this.sid
      });
      this.http.post('http://localhost:3000/blog', JSON.stringify(this.input), { headers: headers })
        .subscribe(() =>
          this.location.back()
        );
    }
  }

}

가져오기 { 구성 요소, OnInit } 에서 '@angular/core';

가져오기 { HttpClient, HttpHeaders } 에서 '@angular/common/http';

가져오기 { 활성화된 경로 } 에서 '@각/라우터';

가져오기 { 위치 } 에서 '@각형/공통';

@구성 요소({

선택기: 'app-blog',

templateUl: './blog.component.html',

styleUrls: ['./blog.component.css']

})

내보내기 클래스 블로그 컴포넌트 구현 OnInit {

비공개 sid: 문자열;

public 입력: any;

public 생성자(비공개 http: HttpClient, 비공개 경로: 활성화된 경로, 비공개 위치: 위치) {

이.입력 = {

'title': '',

'content': ''

};

}

public ngOnInit() {

이.경로.쿼리 매개변수.구독(매개변수 => {

이.sid = 매개변수['sid'];

});

}

public 저장() {

만약 (이.입력.title && 이.입력.콘텐츠) {

let 헤더 = new HttpHeaders({

'콘텐츠 유형': 'application/json',

'authorization': '무기명 ' + 이.sid

});

이.http.post('http://localhost:3000/blog', JSON.문자열화(이.입력), { 헤더: 헤더 })

.구독(() =>

이.위치.뒤로()

);

}

위의 코드에서는 폼 데이터를 초기화하고 sid 이전 페이지에서 전달된 것입니다.

항목을 저장하려고 할 때 세션 ID가 포함된 적절한 헤더를 구성한 다음 양식 데이터와 함께 API로 전송합니다. 완료되면 스택을 거꾸로 탐색할 수 있습니다.

이 페이지의 UI에 대한 HTML은 src/app/blog/blog.component.html 파일에 저장합니다:

새 블로그 항목

제목

콘텐츠

일관성 유지

기본적으로 카우치베이스는 빠른 속도를 위해 노력하기 때문에 인덱스 업데이트보다 더 빨리 데이터를 반환할 수 있습니다. 이 경우 새로 생성된 데이터가 결과에서 누락될 수 있습니다.

이 문제를 해결하는 방법은 이전 튜토리얼하지만 간단히 요약하면 다음과 같습니다.

const query = `SELECT * FROM `blog` WHERE type = 'blog' AND pid = $PID;`
const options = { 
  scanConsistency: couchbase.QueryScanConsistency.RequestPlus,
  parameters: { PID: request.pid }
}
await cluster.query(query, options)
  .then((result) => {
    console.log(result.rows)
    response.send(result.rows)
  })
  .catch((e) => response.status(500).send(e))

const 쿼리 = `선택 * FROM `블로그` 어디 유형 = 'blog' AND pid = $PID;`

const 옵션 = {

스캔 일관성: 카우치베이스.쿼리 스캔 일관성.요청 플러스,

매개변수: { PID: 요청.pid }

}

기다림 클러스터.쿼리(쿼리, 옵션)

.다음((결과) => {

콘솔.로그(결과.행)

응답.보내기(결과.행)

})

.catch((e) => 응답.상태(500).보내기(e))

우리의 블로그 엔드포인트에서 스캔 일관성을 정의할 수 있으며, 이 경우 데이터를 반환하기 전에 인덱스가 업데이트될 때까지 기다리도록 지시하고 있습니다. 이것은 빠른 작업이므로 이 작업을 수행할 때 크롤링할 것이라고 생각하지 마세요. 기본값만큼 빠르지는 않을 뿐입니다.

이 시점에서 프런트엔드는 백엔드와 완벽하게 작동해야 합니다!

두 프로젝트를 함께 실행합니다.

먼저, Couchbase가 설치되어 있는지, 버킷 이름이 블로그 생성한 인덱스와 API 튜토리얼에서 만든 인덱스입니다.

다음으로 노드 REST API를 실행합니다:

node server

노드 서버

그런 다음 Angular 프로젝트를 실행합니다:

ng serve

ng serve

등록하고 로그인한 다음 블로그 글을 한두 개 작성하고 블로그 경로에 작성한 각 블로그가 표시되는지 확인합니다.

이 프로젝트를 개선할 수 있는 방법

앞서 언급했듯이 이 프로젝트는 사용자가 잘못된 비밀번호를 사용하려고 하거나 블로그 제목이 일정 글자 수를 초과하거나 API가 제대로 실행되지 않아 오류가 발생한 경우 양식 유효성 검사 및 경고 또는 알림뿐만 아니라 일부 사용자 정의 CSS 및 레이아웃을 사용할 수 있습니다.

만들기 블로그 편집 페이지와 경로, 블로그 게시물 제목의 링크가 포함된 블로그 경로/페이지.

애플리케이션을 위한 정교한 탐색 및 프레임을 만듭니다.

블로그 목록의 순서를 다시 정렬합니다. 블로그 경로/페이지 를 클릭하거나 제목 오름차순 또는 내림차순으로 블로그를 정렬하는 기능을 설정할 수 있습니다.

사용자가 소셜 로그인으로 로그인하거나 당사가 만든 이 프로젝트를 사용하여 포트폴리오 경로 및 기타 지원 페이지를 추가하여 개발자 포트폴리오의 시작점으로 사용할 수 있도록 허용하세요.

세션 ID를 처리하기 위한 Angular 서비스를 생성하여 각 탐색 이벤트마다 전달할 필요가 없도록 하세요.

결론

방금 사용자 프로필 스토어에 Angular 11과 TypeScript를 사용하여 간단한 클라이언트 프런트엔드를 만드는 방법을 살펴보았습니다. 이전 예제. 물론 모든 Angular 사용자 프로필 템플릿은 다릅니다. 이 클라이언트 프런트엔드는 모듈식 풀스택 애플리케이션이기 때문에 프런트엔드에 사용할 수 있는 여러 가지 Angular 머티리얼 사용자 프로필 페이지 예시 중 하나입니다. 즉, 백엔드는 모든 언어로, 프런트엔드는 모든 언어로 사용할 수 있습니다.

완성된 코드는 GitHub에서 확인할 수 있습니다. 카우치베이스 랩 / 카우치베이스-각형-블로그-앱 리포지토리에 저장합니다.

Node.js와 함께 Couchbase를 사용하는 방법에 대한 자세한 내용은 카우치베이스 개발자 포털.

Nic Raboy, 개발자 옹호자, Couchbase

이 문서 공유하기

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

사용자 프로필 스토어의 프런트엔드로 타입스크립트, 앵귤러 사용

필요한 컴포넌트로 Angular 프로젝트 만들기

로그인 및 등록 처리

로그인

등록하기

프로필 스토어에서 특정 사용자에 대한 블로그 글 만들기 및 보기

작성한 블로그

{{ entry.blog.title }}

새 블로그 항목

일관성 유지

이 프로젝트를 개선할 수 있는 방법

결론

받은 편지함에서 카우치베이스 블로그 업데이트 받기

작성자

게시자 Nic Raboy, 개발자 옹호자, Couchbase

댓글 남기기 응답 취소

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

카펠라 무료 사용

연락하기