hsunny study blog

[Angular] 컴포넌트가 누적되어 메모리에서 제거되지 않는 경우들 (즉, 메모리 누수)

헤써니 — Wed, 27 Mar 2024 00:36:20 +0900

규모가 큰 서비스에서는 메모리 해제가 중요하다. 메모리가 쌓이다보면 앱이 느려지는 문제가 발생한다.

Angular로 개발을 하면서, 메모리의 누수를 확인하기 위해 Google Development Tool 안에 있는 Memory 탭과 Performace monitor를 사용할 수 있다.

Angular의 경우 이 누수를 피하기 위해 어떤 것들을 봐야하는지 살펴보자.

1. Component 데코레이터의 provider에 직접 추가한 service가 destory 되지 않은 경우

일반적인 서비스라면 Component 단에서 서비스를 주입했다면, Component의 생명주기를 따라간다. 하지만 예외가 있다.

서비스 파일의 상단에 아래 코드를 적었다면..

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

@Injectable({
  providedIn: 'root' // ****
})
export class MyService {
  constructor() { }

  sayHello() {
    console.log('Hello, Angular!');
  }
}

MyService 클래스는 root 단에 주입한 서비스다.

이 점을 간과하고, Component에서 주입을 추가하면..

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  providers: [MyService] // ****
})
export class MyComponent {
  constructor(private myService: MyService) {
    myService.sayHello();
  }
}

Component 생명주기를 따라가지 않는다.

이로 인해 이 서비스를 주입한 Component가 계속해서 살아있고, 심지어 컴포넌트에 들어오는(Init) 수만큼 컴포넌트가 쌓이는 문제가 발생한다. 컴포넌트만 쌓이냐? 아니다. 컴포넌트에서 주입한 서비스들도 덩달아 쌓인다.

만약 인터넷이 끊겼다가 다시 연결되는 로직이 서비스에 있다면, 컴포넌트에 들어온 횟수만큼 API 통신을 하게 된다.

조심하자.

이 문제를 해결하려면,

1. root 단에서 주입하지 않거나

2. root 단에서 주입할거면, component 단에서 주입하지 않거나

둘 중에 상황에 적합한 방식을 선택해야 한다.

2. Component의 nativeElement에 접근하여, DOM을 직접 수정한 경우

Angular에서는 Renderer2 를 사용하여 DOM을 수정해주어야 한다. 그러지 않으면 Angular의 생명주기대로 관리가 되지 않는다.

만약 코드 중에 아래와 같이 class를 지우고, 혹은 추가한게 있는가?

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

//...

this.elementRef.nativeElement.classList.remove('is-selected');
this.elementRef.nativeElement.classList.add('is-selected');

그렇다면 아래와 같이 변경해보자.

import { ElementRef, Renderer2 } from '@angular/core';

//...

this.renderer.removeClass(this.elementRef.nativeElement, 'is-selected');
this.renderer.addClass(this.elementRef.nativeElement, 'is-selected');

이외에도 여러 케이스가 있지만, 최근에 경험했던 케이스들을 공유해본다.

누군가에게는 도움이 되길 바라며!

Glob을 사용해서 원하는 확장자 파일 안에 있는 문자열들을 치환하기 (+@ 정규식)

헤써니 — Sun, 19 Feb 2023 22:01:32 +0900

프로젝트 내에 특정 파일들을을 일정한 규칙이 있는 문자열로 모두 변경해야 할 때가 있다.

이때 스크립트를 작성하여 실행하면 간편한 수정이 가능하다.

누군가에게 도움일 될거라 생각하며! 작업 과정의 일부를 공유한다.

작업을 위한 선행과정으로 before, after를 구분할 수 있는 JSON 파일을 만든다.

포스팅을 위한 예시 데이터

나의 경우 before을 path 로, after를 to-be로 이름지었다.

원하는 확장자의 파일만 수정할 수 있도록 'glob' 라이브러리를 사용한다.

glob이 실제 프로젝트에 쓰인다면 package.json에 목적에 맞게 넣으면 되지만, 나의 경우에는 치환 작업만 진행할 것이라 작업을 완료하고 삭제하였다.

npm i glob

내가 변경할 내용을 담은 스크립트를 작성한다.

실행에 필요한 일부 코드들을 공유한다.

함수 구조

const path = require('path');
const fs = require('fs');
const glob = require('glob');

function convertString() {
  function explodeFolder() { } // 타겟 폴더 안에 타겟 확장자 파일을 탐색함
  
  function convertTarget() { } // 실제 변경을 진행하는 곳
  
  function generateFileIncludeAffectedFileList() { } // 변경내역을 확인하려는 목적으로 파일을 생성함
}

function getBaseFile() { } // 가장 처음에 만든 JSON 파일을 불러오기 위해 사용

function convertToRegPattern() { } // 밑에서 설명

function addWrapRegPattern() { } // 밑에서 설명

function replacePattern() { // 개인 작업 특이사항을 진행하기 위해 작성
	function replacer() { }  
}

function modifyFile() { } // 파일을 수정함**


exports.changeString = convertString; // 스크립트 실행을 위해 export

일부 과정을 상세 소개해보자면..

탐색을 시작할 경로를 지정한다.

const rootDir = path.join(__dirname, '../');

지정한 경로를 시작으로 내가 설정한 폴더 안에 있는 파일들을 탐색한다.

fs.readdirSync(rootDir) // 폴더 리스트를 배열 형태로 반환 (동기)
      .filter(folder => folder === 'projects' || folder === 'src') // projects, src 폴더만 탐색
      .forEach((value) => {
        explodeFolder(rootDir + value, version); // 폴더 내에 있는 파일을 모두 탐색
      });

explodeFolder() 메소드로 들어온 값을 확인하여, 파일인 경우 원하는 변경 작업을 진행한다.

function explodeFolder(path, version) {
  let dirList = fs.readdirSync(path);
  for (const file of dirList) {
    let pullPath = path + '/' + file;
    const isDir = fs.statSync(pullPath).isDirectory();

    if (isDir) {
      explodeFolder(pullPath, version); // 폴더인 경우 재귀
      const fileList = glob.sync(pullPath + '/' + '*.ts'); // typescript 파일들만 배열 형태로 반환
      fileList.forEach(file => convertTarget(file, version)); // 문자열 변경 진행
    }
  }
}

convertTarget() 메소드에서 문자열 변경을 진행하고, 변경사항을 반영한다.

sheetData = getBaseFile(); // 처음에 만들어둔 JSON 파일

...

function convertTarget(pullPath, version) {
  let fileContent = fs.readFileSync(pullPath, 'utf-8'); // 파일 내용 반환 (동기)

  sheetData = sheetData.reduce((acc, v, i) => {
    const regPattern = convertToRegPattern(v.path); // **
    const matchList = getMatchedString(fileContent, regPattern); // ** 변경된 파일을 요소로 포함하는 배열을 반환
   
    ...

    fileContent = replacePattern(fileContent, regPattern, version);

    acc.push(v);
    return acc;
  }, []);

  modifyFile(fileContent, pullPath); // fs.writeFileSync(filePath, fileContent);
}

Regular expression()

실제 치환작업을 위해서는 정규식을 사용했고, 작성한 정규식은 아래와 같다.

치환을 할 대상을 선정하고, 자신에게 맞게 정규식을 변경하면 된다!

function convertToRegPattern(path) {
  let fullPattern = path;
  const regex = /:[a-z]+[_]?[a-z]+/g;
  const searchRegex = '("\\s?\\+\\s?|\\$(?=\\{)\\{)[\\w.]+(\\s?\\+\\s?"|})';
  fullPattern = fullPattern.replace(regex, searchRegex);
  fullPattern = addWrapRegPattern(fullPattern);
  return new RegExp(fullPattern, 'g');
}

function addWrapRegPattern(regPattern) {
  return `(path:\\s?)?(\'|\"|\`|\})\\s?(${regPattern}[\'\"\`\{\?])`;
}

convertToRegPattern()

찾아야했던 형태

:p_target, :id, ${p.id}, ${target}, " + target + "

+: 한 번 이상 나올 수 있음을 의미
\$(?=\{): 무조건 { 앞에 $가 있어야 함을 의미
\w. : 모든 문자열을 의미 (숫자 제외)
\: 특수문자의 경우 앞에 \를 붙여 특수문자임을 알려줌
- 정규식에서 사용하는 의미있는 기호($, + 등)를 특수문자 자체로 쓰기 위해서는 꼭 필요
?: 앞에 해당하는 정규식은 있어도 되고 없어도 됨을 의미
\s: 공백문자를 의미

addWrapRegPattern()

return `(path:\s?)?(\'|\"|\`|\})\s?(${regPattern}[\'\"\`\{\?])`;

()로 묶은 것: 하나의 그룹으로 취급 (순서대로 $1, $2, $3,,,)
[]: 내부에 있는 문자는 각각 대응
- 여러 케이스에 대응하기 위한 문자열을 넣을 때.. () 안에서는 or(|)이 필요하지만 [] 안에서는 필요 없음

addWrapRegPattern()에서 그룹화된 결과물은 아래와 같은 방식으로 처리하는데 사용했다.

function replacer(match, p1, p2, p3) {
  // 'path:'를 포함하는 경우 'path:'가 p1이 되고, 없는 경우 p1은 undefined
  if (p1) {
    return `${p1}${p2}${p3}`;
  } else {
    return `${p2}/v1${p3}`;
  }
}

나의 경우는 걸프를 사용하고 있어, package.json에 아래와 같이 스크립트를 추가했다.

"scripts": {
...
"change-string": "gulp changeString --gulpfile build-config/gulpfile.js"
}

npm run change-tring

이렇게 작성한 파일을 돌리면 내가 설정한 타겟들이 정규식에 맞추어 수정된다.

참고사이트

정규식을 만드는데 정말 큰 도움이 된 사이트! https://regexr.com/

Tests 활용을 많이 했다.

toPromise? firstValueFrom? lastValueFrom?

헤써니 — Sat, 4 Feb 2023 10:02:26 +0900

RxJS 7으로 가면서, toPromise() 메소드에 변경점이 생기고, 대체 메소드들이 나왔다.

어떻게 변했는지 살펴보자.

일단 toPromise() 메소드는 Observable을 Promise와 같이 동작하도록 해주는 RxJS Operator다.

	Observable	Promise
공통점	비동기를 처리하는 방식으로, 시간이 지남에 따라 값을 방출한다.
차이점	값을 생성하지 않거나, 하나 이상의 값을 방출할 수 있다.	resolve될 때, 그때의 값만 한번 방출할 수 있다.

Observable이 값을 방출하지 않는 사실을 반영하기 위해, RxJS 7에서는 toPromise() 메소드의 반환 형태를 Promise<T>에서 Promise<T | undefined>로 변경했다.

RxJS 6 toPromise(): Promise<T> → RxJS 7 toPromise(): Promise<T | undefined>

또한, 기존 toPromise() 메소드는 Observable이 시간이 지남에 따라 여러값을 생성할 수 있는 것에 대응되지 않았다. Promise로 변경될 때 첫번째 값 또는 마지막 값중에 선택해야 했다.

이 모든 문제를 해결하기 위해 Promise로 변환하기 위한 두가지 새로운 함수를 도입하였고, 이 두 함수가 lastValueFrom과 firstValueFrom 이다. toPromise() 메소드는 추후 없어질 예정

	lastValueFrom	firstValueFrom
Observable이 완료되어야 하는가?	O	X
사용하는 값	마지막 값	첫번째 값 * 값을 받고 즉시 구독을 취소한다.
완료되었을 때 값이 없으면?	reject / EmptyError 발생	reject / EmptyError 발생
Observable에 오류가 발생했으면?	reject / Error 발생
주의사항	Observable이 끝난다는 걸 확실히 알 때만 사용할 것	Observable이 적어도 하나의 값을 방출하거나, 끝난다는 것을 알 때만 사용할 것

주의사항에 어긋나는 경우, 중단된 Promise로 끝나면서, 잠재적으로 비동기 함수의 모든 상태가 메모리에 남는다.
이 상황을 막기 위해 timeout, take, takeWhie, takeUntil 등을 사용해야 한다.

완료되었을 때 값이 없는걸로 EmptyError 발생하는 것이 싫다면, 두번째 인자로 기본값을 넣어주면 된다.

import { firstValueFrom, EMPTY } from 'rxjs';

const result = await firstValueFrom(EMPTY, { defaultValue: 0 });
console.log(result);

// Expected output:
// 0

Observable이 방출된 값이 없을 때 종료되면 DefaultValue로 지정한 값이 방출되고, EmptyError가 발생하지 않는다.

참고사이트

InputEvent 알아보기

헤써니 — Fri, 3 Feb 2023 00:36:48 +0900

웹기반 텍스트 에디터를 만들 때 브라우저마다 다른 스펙에 대응이 어려운점, 편집 핸들링 어려운 점, 사용자마다 사용이 다양한 점 등을 해소하기 위해 나왔다고 한다. 자바스크립트 코드도 많이 써야하는데 브라우저마다 대응을 해야겠냐! 조금이라도 쉽게 할수 있도록 하자! 이런 느낌

InputEvent는 편집가능한 콘텐츠의 내용이 변경되었을 때 발생하는 이벤트다.

대표적으로 편집이 가능한 콘텐츠는

<input type="text" id="input-box" />
<textarea  id="text-area"></textarea>

편집가능한 콘텐츠이기 때문에 contenteditable 속성이 true인 것도 물론 포함이다.

   <p contenteditable="true">
      contenteditable
    </p>

InputEvent는 UIEvent와 Event를 상속받는다.

인스턴스 속성

InputEvent.data	삽입된 글자를 반환한다. 문자가 삭제된 경우는 null이다.
InputEvent.dataTransfer	리치텍스트나 일반 텍스트 데이터에 대한 정보를 반환한다.
InputEvent.inputType	만들어진 입력 유형을 포함한다. 삽입: insertText 삭제: deleteContentBackward 붙여넣기: insertFromPaste 굵게: formatBold 더 다양한 타입은 이곳 예제를 실행해본다.
InputEvent.isComposing	구성시작 후와 구성 종료 전에 이벤트가 시작되는 여부를 나타내는 Boolean형의 데이터를 반환한다. *글을 작성하는 현재(2023.02.03) 사파리: 실험중 사파리 on iOS: 지원안함

사용자가 입력한 값을 읽는 방법으로 많이 사용하는 것이 KeyBoardEvent 일 것인데, 만든 이의 의도처럼 InputEvent를 적극 활용한다면 더 수월하게 입력값을 다룰 수 있을 것이다. 예를 들어 mac 시스템 명령을 통한 이모지 입력... (ctrl + cmd + space ..) 이 포스팅의 계기..

참고사이트

https://w3c.github.io/input-events

Input Events

Acknowledgements Thanks to: Michael Aufreiter, Adrian Bateman, Oliver Buchtala, Robin Berjon, Enrica Casucci, Bo Cupp, Domenic Denicola, Emil Eklund, Olivier Forget, Aryeh Gregor, Marijn Haverbeke, Yoshifumi Inoue, Koji Ishii, Gary Kacmarcik, Ian Kilpatric

w3c.github.io

https://developer.mozilla.org/en-US/docs/Web/API/InputEvent

InputEvent - Web APIs | MDN

The InputEvent interface represents an event notifying the user of editable content changes.

developer.mozilla.org

Firebase 무료 웹호스팅 사용하기

헤써니 — Wed, 18 Jan 2023 00:28:37 +0900

웹빌드 결과물을 확인하고 싶지만, 도메인이 없을 때 사용하면 좋을 웹호스팅 서비스를 소개한다.

1. https://console.firebase.google.com/ (Firebase Console) 로 이동한다. 로그인 필요

2. 프로젝트를 생성한다.

3. 우측 '빌드' 하위 메뉴에 있는 Hosting을 누르고, 나오는 화면에서 '시작하기' 버튼을 누른다.

4. Firebase 호스팅 설정에 따라 진행한다.

Firebase 호스팅 설정

1. 다음 npm 명령어를 실행하여 CLI를 설치하거나 최신 CLI 버전으로 업데이트한다.

npm install -g firebase-tools

2. 웹 앱의 루트 디렉터리로 이동하거나, 루트 디렉터리를 만든 후 아래 명령어를 실행한다.

구글에 로그인

firebase login

이미 로그인을 해두었다면, 'Already logged in as {로그인한 메일주소}'가 화면에 나타날 것이고, 아니라면 구글 로그인 창이 웹으로 띄워진다.

프로젝트 시작

firebase init

프로젝트 설정에 필요한 몇가지 선택과정이 있다.

단순 호스팅만 하는 경우,

Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. 에 대한 답으로

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 를 선택하면 된다.

이후 어느 프로젝트를 사용할 것인지 선택해주면 된다.

그 이후 호스팅을 위해 어떤 폴더명을 사용할 것인지 물어보는데, 그냥 enter를 친다면, 기본 설정인 'public'폴더가 된다.

배포할 파일들을 'public'폴더에 넣어야 함

그 이후 설문 또한, 본인에게 맞게 답하면 된다.

이렇게 답을 마치면, 3개의 파일이 생성된다.

3. 웹 빌드결과물을 위에서 설정한 공개 폴더에 넣는다.

4. 앱의 루트 디렉터리에서 아래 명령어를 실행한다.

firebase deploy

배포가 완료되면 Hosting URL에 나오는 주소로 들어가서 배포된 내용을 확인할 수 있다.

프로젝트 콘솔에 들어가면 출시내역 등의 내용을 확인할 수 있다.

참고사이트

https://firebase.google.com/docs/hosting?authuser=0&hl=ko

브라우저의 기본 동작 막기

헤써니 — Sun, 15 Jan 2023 23:14:52 +0900

자동으로 실행하는 브라우저의 동작들을 자바스크립트로 다루어야 하는 경우들이 있다.

자동으로 실행하는 브라우저 동작

- 링크를 클릭하면, 연결된 링크의 주소로 이동

- 폼 전송을 클릭했을 때, 서버에 폼이 전송

- 마우스를 클릭한채로, 글자를 드래그하면 선택

위 동작들을 막기 위한 방법으로는 2가지가 있다.

1. event 객체 사용한다. event 객체 안에 있는 preventDefault() 메서드를 사용한다.

2. 핸들러가 on<event>에 할당되었을 경우, return false를 반환하게 해 기본 동작을 막는다.

<a href="/" onclick="return false">첫번째 방식</a>
<a href="/" onclick="event.preventDefault()">두번째 방식</a>

위와 같이 기본동작이 막힌 경우, event 객체 안에 있는 defaultPrevented의 값은 true이다.

event.defaultPrevented 값을 사용하여, 버블링을 막는 방법 으로 사용하는 event.stopPropagation()을 용도를 대체할 수 있다.

event.stopPropagation()은 사용하는 구간을 dead zone으로 만들기 때문에, event.defaultPrevented를 활용하는 것이 좋다.

참고사이트

[Angular] HostBinding

헤써니 — Mon, 9 May 2022 00:19:14 +0900

@angular/core 안에 존재하는 API로 DOM 속성을 호스트 바인딩 속성으로 표시하고 구성 메타데이터를 제공하는 데코레이터이다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 검사하고 바인딩이 변경되면 디렉티브의 호스트 요소를 업데이트한다.

사용

ngModel 디렉티브가 있는 DOM 요소에 valid와 invalid 속성을 설정하는 디렉티브

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control: NgModel) {}
  @HostBinding('class.valid') get valid() { return this.control.valid; }
  @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
}

@Component({
  selector: 'app',
  template: `<input [(ngModel)]="prop">`,
})
class App {
  prop;
}

(내가 이해가 안되서 추가하는) 설명

HostBinding을 이용하여 글자를 강조하는 css를 적용해보자.

먼저, HighlightedDirective를 생성한다.

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[highlighted]',
})
export class HighlightedDirective {
//...

  @HostBinding('className')
  get cssClasses() {
    return 'highlighted';
  }
}

생성한 디렉티브는 HTML 템플릿에서 highlighted라는 이름으로 사용한다.

<p highlighted>highlighted text</p>

이 디렉티브를 사용함으로써 적용하려고 하는 css는 아래와 같다.

.highlighted {
  color: red;
}

A. Angular에서 스타일을 적용하는 방법으로는 element에 className을 주는 방법이 있다.

이를 HostBinding으로 사용한다면 아래와 같다.

//...

export class HighlightedDirective {
//...


  @HostBinding('className')  // **
  get cssClasses() { // **
    return 'highlighted'; // **
  }
}

이제 이 디렉티브를 사용하는 DOM Element들은 모두 .highlighted css 설정이 적용된다.

B. 특정 class 이름을 줄 수 있다.

highlighted를 무조건 클래스 이름으로 바인딩한다.

//...

export class HighlightedDirective {
//...

  @HostBinding('class.highlighted') // **
  get cssClasses() { // **
    return true; // **
  }
}

C. 아 물론 스타일을 직접 주는 것도 가능하다.

//...

export class HighlightedDirective {
//...

  @HostBinding('style.border') // **
  get cssClasses() { // **
    return '1px solid red'; // **
  }
}

D. 디렉티브를 사용하는 HTML 템플릿 내에서 프로퍼티를 바인딩함으로써 선택적으로 class 를 적용할 수도 있다.

유연하니 좋은 방법이다!

//...
export class HighlightedDirective {
  @Input('highlighted')
  isHighligted = false;
  
  constructor() {
  }

  @HostBinding('class.highlighted')
  get cssClasses() {
    return this.isHighligted;
  }
}

이제 이 디렉티브를 사용하기 위해서는 HTML 템플릿에서 프로퍼티를 바인딩 해주어야 한다.

<p [highlighted]="true">highlighted text</p>

이렇게하면 선택적으로 css를 적용할 수 있다.

알파벳 순서대로 예제를 실행해보려면 여기에서 해보면 된다.

참고사이트

https://angular.kr/api/core/HostBinding

Angular 가이드

angular.kr

https://angular-university.io/lesson/angular-host-binding

Angular University

angular-university.io

[Angular] 이벤트 바인딩

헤써니 — Thu, 13 Jan 2022 00:56:52 +0900

이벤트 바인딩

passive 이벤트 바인딩

Angular는 passive 이벤트 리스터를 지원한다. 아래대로 따라하면 스크롤 이벤트를 passive하게 사용가능하다.

1. src 폴더 하위에 zone-flags.ts 파일을 만든다.
2. 아래 코드를 파일에 추가한다.
(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
3. src/polyfilles.ts 파일에 zone.js 를 import 하기 전에 새로만든 파일인 zone-flag.ts 를 import 한다.
import './zone-flags';
import 'zone.js';  // Included with Angular CLI.

위 과정을 모두 마치면 scroll 이벤트를 위한 이벤트 리스너를 추가할 때, 리스너는 passive 해진다.

passive 이벤트?

https://withhsunny.tistory.com/106

EventTarget.addEventListener()의 Passive 옵션 알아보기

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다. passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다. // Chrome 49 부터 EventListenerOptions 지원 document.addEventListene..

withhsunny.tistory.com

EventEmitter로 커스텀 이벤트 만들기

디렉티브는 Angular의 EventEmmiter를 다음과 같이 사용함으로써 커스텀 이벤트를 발생시킨다.

1. 디렉티브는 EventEmitter를 만들고 프로퍼티로써 이를 노출시킨다.
2. 그런 다음 디렉티브는 EventEmitter.emit(data)를 호출하여 이벤트를 내보내고 data를 전달한다.
3. 상위 디렉티브는 이 프로퍼티를 바인딩함으로써 이벤트를 수신하고, $event 객체를 통해 데이터에 접근한다.

예제

커스텀 이벤트: deleteRequest

<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>

참고사이트

https://angular.io/guide/event-binding

Angular

angular.io

EventTarget.addEventListener()의 Passive 옵션 알아보기

헤써니 — Thu, 13 Jan 2022 00:44:26 +0900

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다.

passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다.

// Chrome 49 부터 EventListenerOptions 지원
document.addEventListener("touchstart", handler, {
  capture: false, // Chrome 49
  once: false, // Chrome 55
  passive: false // Chrome 51
});

어떻게 향상하는걸까?

스크롤 할때 발생하는 터치 이벤트들이 브라우저에서 발생하면, 브라우저는 터치 이벤트 수신기가 스크롤을 취소할지 여부를 알 수 없으므로 항상 수신기가 끝날 때까지 기다렸다가 페이지를 스크롤한다.

passive 옵션을 사용함으로써, 브라우저에게 스크롤을 기다리지 않고 즉시 스크롤해도 됨을 알리는거다.

자세히 알아보기

touchstart, touchmove 핸들러의 결과를 기다릴 필요가 있기 때문에 preventDefault()를 이용하여 부분적으로 무효화한다. 분석 결과에 따르면 웹 상의 터치 이벤트 핸들러 대다수는 실제로 preventDefault()를 호출하지 않으므로 브라우저는 불필요한 스크롤을 차단하는 경우가 있다.

예를 들어, 안드로이드용 크롬에서는 스크롤을 차단하는 터치 이벤트의 80%가 실제로 이를 막지 못한다. 이러한 이벤트의 10%는 스크롤 시작에 100ms 이상의 지연을 추가하며, 스크롤의 1%에서 최소 500ms의 치명적인 지연이 발생한다.

이 문제는 터치 이벤트 뿐만 아니라 휠 이벤트에서도 동일한 문제가 발생한다.

이를 해결하기 위해 passive 옵션을 사용한다.

사용 가능한 버전

Chrome 51+, Firefox 49+ 부터 세번째 인자를 useCapture 속성을 포함한 객체로 사용할 수 있도록 변경되었다. (이외는 boolean)
Chrome 51+ 업데이트사항 보러가기 - https://developers.google.com/web/updates/2016/06/passive-event-listeners
passive 옵션을 권장하는 경우, 콘솔에 경고로 뜬다.
Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

참고사이트

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

GitHub - WICG/EventListenerOptions: An extension to the DOM event pattern to allow authors to disable support for preventDefault

An extension to the DOM event pattern to allow authors to disable support for preventDefault - GitHub - WICG/EventListenerOptions: An extension to the DOM event pattern to allow authors to disable ...

github.com

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든

developer.mozilla.org

[Angular] 파이프- Pipes

헤써니 — Mon, 22 Nov 2021 23:39:01 +0900

문자열, 통화, 일자와 같은 데이터를 원하는 형태로 바꾸기 위하여 파이프를 사용한다.

Angula는 기본 파이프를 제공하며 이외에 데이터를 변환하는 로직이 별도로 필요하면 커스텀 파이프를 만들어서 사용할 수 있다.

템플릿에 파이프 사용하기

1. 문자열 바인딩 문법({{}}) 안에 작성한다.

2. 표현식의 오른쪽에 파이프(|)를 적고 파이프 이름을 적는다.

<!-- AsyncPipe 사용 예 -->
<span>Wait for it... {{ greeting | async }}</span>

파라미터와 체이닝 파이프로 데이터를 변경하기

파라미터 사용

파이프의 결과물을 조정하기 위해 추가적인 파라미터를 사용할 수 있다. 추가적인 파라미터를 사용하기 위해서는 콜론(:)을 붙여서 전달할 값을 작성하면 된다.

아래 예제는 CurrencyPipe 를 사용하는 예이다.

CurrencyPipe

- locale 구성을 결정하는 locale 규칙에 따라 숫자를 통화 문자열로 변환하는 파이프

- {{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

**locale: 사용자의 언어, 국가뿐 아니라 사용자 인터페이스에서 사용자가 선호하는 사항을 지정하는 매개 변수의 모임

{{ amount | currency:'EUR' }}

위와 같이 작성하면 amount에 있는 숫자가 유로 단위로 표시된다.

2개 이상의 파라미터를 전달할 때에는 콜론(:)을 이어 붙이면 된다.

{{ amount | currency:'EUR':'Euros '}}

파라미터를 반드시 지정해야 하는 경우가 있다. 한 예로는 Angular에서 기본적으로 제공하는 SlicePipe가 있다.

{{ slice:1:5 }}

파이프 체이닝

하나를 통과한 결과를 다른 파이프로 전달하는 방식으로 체이닝이 가능하다.

{{ birthday | date | uppercase}}

커스텀 파이프 만들기

클래스에 @Pipe 데코레이터를 지정하고 필요한 내용을 메타데이터에 작성하면 클래스를 파이프로 만들 수 있다.

파이프 클래스 이름은 일반적인 스타일로 UpperCamelCase로 작성한다.
메타데이터 name에 해당하는 문자열은 camelCalse로 작성한다. (name에 하이픈을 사용하지 말 것)

새롭게 만들 파이프는 NgModule 메타데이터의 declarations 필드에 등록해야 한다.

파이프에 바인딩된 데이터 변화 감지

변화를 감지하는 방식

파이프가 변화를 감지하는 방식을 알기 전에 어떤 때에 Angular 변화 감지가 일어나는지 확인해보자.

Angular 변화감지

키입력 등의 event, 타이머, 서버 응답과 같은 DOM 이벤트가 발생할 때마다 변화 감지 동작을 실행하고, 바인딩된 데이터가 변경되었는지 검사함

Angular의 변화감지 때마다 파이프가 계속 실행되면 앱 성능을 저하할 수 있다. 따라서 Angular의 변화감지와는 조금 다른 변화 감지를 사용한다.

변경 탐지

순수한(pure) 파이프

파이프가 변경을 탐지하는 기본 옵션은 pure이다.

pure인 경우에 탐지하는 변경은 아래와 같다.

기본 자료형의 값의 변경
객체 참조 변경

순수한(pure) 파이프는 순수함수로 구현해야 한다. 순수한 파이프를 사용하면 Angular는 객체 안에서 발생한 변화를 무시한다. 이로 인해 순수한 파이프에 배열을 인자로 전달하면 예상한대로 파이프가 실행되지 않는다.

이유: Angular change detector가 배열의 항목이 변경된 것을 감지하지 않아 파이프도 실행되지 않음

해결: 배열을 참조하는 객체를 바꾸기

위의 해결방식으로 풀고 싶지 않다면, 객체안에 변경된 내용을 감지하기 위해서는 impure 를 선언하여 파이프를 사용해야 한다.

순수하지 않은(impure) 파이프

순수하지 않은 파이프는 Angular 변화 감지가 동작하는 시점마다 실행된다. 순수하지 않은 파이프를 정의하려면 pure 플래그에 false 값을 지정하면 된다.

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})

순수하지 않은 파이프 안에서 무거운 로직을 실행하면 앱 성능이 급격하게 저하될 수 있다.

옵저버블에서 데이터 추출하기

Angular가 제공하는 AsyncPipe를 사용해서 파이프 인자를 옵저버블로 지정할 수 있다.

특징

옵저버블을 자동으로 구독하고 데이터를 추출하여 파이프 로직을 실행함
추출한 데이터를 템플릿에 바인딩함
옵저버블이 종료되었을 때 메모리 누수를 방지하기 위해 옵저버블 구독을 해지함

위 특징들로 AsyncPipe를 사용해서 옵저버블을 편리하게 다룰 수 있다.

AsyncPipe는 옵저버블 객체를 처리할 수 있도록 순수하지 않은 파이프로 구현되었다.

HTTP 요청 캐싱하기

Angular에서 서버통신에 사용하는 HttpClient 서비스가 제공하는 HttpClient.get() 과 같은 함수는 서버로부터 받은 데이터를 옵저버블 형태로 반환한다.

따라서 앞서 알아본 AsyncPipe의 방식을 활용하면 HTTP 요청을 보내고 캐싱하는 파이프를 만들 수 있다.

옵저버블의 객체를 처리하기 위해서는 순수하지 않은 파이프를 사용하고, 이는 컴포넌트 변화감지 로직이 동작할 때마다 실행되기 때문에 불필요하게 실행될 수 있다. 이때 성능이 저하되는 것을 피하기 위해 서버로 요청하는 URL이 변경될 때마 파이프 로직을 실행하고 서버에서 받은 응답을 캐싱하는 방법을 사용하는 것이 좋다.

자세한 내용은 공식문서에서 확인하자.

파이프 및 우선순위

파이프 연산자는 삼항연산자(?:)보다 높은 우선순위를 가진다.

이는 a ? b : c | x 의 구문이 a ? b : ( c | x ) 로 해석된다는 말이다.

삼항연산자의 결과에 파이프를 적용하고 싶다면 전체 식을 괄호로 바꾸어야 한다.

(a ? b : c) | x

참고사이트

로케일 - 위키백과, 우리 모두의 백과사전

ko.wikipedia.org

https://angular.kr/guide/pipes

Angular 가이드

angular.kr