Angular에서 쿠키 설정

1. Angular의 쿠키
2. Angular에서 쿠키 설정

이 기사에서는 Angular의 쿠키에 대해 설명합니다. 예를 들어 Angular에서 쿠키를 설정하는 방법을 소개합니다.

Angular의 쿠키

쿠키는 일반적으로 브라우저에 저장되는 작은 세부 정보 패키지이며 웹사이트는 다양한 용도로 쿠키를 사용하는 경향이 있습니다. 쿠키는 여러 요청에 걸쳐 지속되며 브라우저 세션은 쿠키를 설정하는 데 도움이 되며 일부 웹 앱에서 우수한 인증 기술이 될 수 있습니다.

우리는 인증이나 로그인 시 사용자 세부 정보 저장과 같은 많은 상황에서 중요한 데이터를 저장하기 위해 쿠키를 사용할 수 있습니다. 우리는 원할 때마다 쿠키에서 데이터를 쉽게 검색할 수 있습니다.

일반적으로 우리는 웹 서버당 20개의 쿠키만 저장할 수 있고 각 쿠키의 데이터는 4KB를 넘지 않으며 max-age 속성을 결정하는 것을 선호하는 경우 무기한 지속될 수 있습니다.

다음 명령을 사용하여 Angular에서 새 응용 프로그램을 만들어 보겠습니다.

ng new my-app

Angular에서 새 응용 프로그램을 만든 후 이 명령을 사용하여 응용 프로그램 디렉터리로 이동합니다.

cd my-app

모든 종속성이 올바르게 설치되었는지 확인하기 위해 앱을 실행해 보겠습니다.

ng serve --open

ngx-cookie-service 라이브러리를 사용하여 Angular에서 쿠키를 설정해야 합니다.

Angular에서 쿠키 설정

Angular는 웹 애플리케이션에서 쿠키를 설정하는 데 사용할 수 있는 라이브러리 ngx-cookie-service를 제공합니다. 다음 명령을 사용하여 이 라이브러리를 쉽게 설치할 수 있습니다.

npm install ngx-cookie-service --save

이 명령은 프로젝트의 node_modules 폴더에 ngx-cookie-service 라이브러리를 다운로드하여 설치하며 종속성에도 포함됩니다.

이 라이브러리를 프로젝트에 성공적으로 추가했으면 쿠키를 설정할 수 있습니다. 모듈 파일 내에서 CookieService를 가져온 다음 아래와 같이 공급자의 배열에 추가하는 것이 좋습니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

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

공급자로 추가하면 아래와 같이 app.component.ts 중 하나에서 사용할 수 있습니다.

import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private cookieService: CookieService) {}
  ngOnInit() {
    this.cookieService.set('Test', 'Hasnain');
  }

  getCookie() {
    const value: string = this.cookieService.get('Test');
    console.log(value);
  }
}

출력:

데모