hsunny study blog

규모가 큰 서비스에서는 메모리 해제가 중요하다. 메모리가 쌓이다보면 앱이 느려지는 문제가 발생한다. Angular로 개발을 하면서, 메모리의 누수를 확인하기 위해 Google Development Tool 안에 있는 Memory 탭과 Performace monitor를 사용할 수 있다. Angular의 경우 이 누수를 피하기 위해 어떤 것들을 봐야하는지 살펴보자. 1. Component 데코레이터의 provider에 직접 추가한 service가 destory 되지 않은 경우 일반적인 서비스라면 Component 단에서 서비스를 주입했다면, Component의 생명주기를 따라간다. 하지만 예외가 있다. 서비스 파일의 상단에 아래 코드를 적었다면.. import { Injectable } from '@ang..

RxJS 7으로 가면서, toPromise() 메소드에 변경점이 생기고, 대체 메소드들이 나왔다. 어떻게 변했는지 살펴보자. 일단 toPromise() 메소드는 Observable을 Promise와 같이 동작하도록 해주는 RxJS Operator다. Observable Promise 공통점 비동기를 처리하는 방식으로, 시간이 지남에 따라 값을 방출한다. 차이점 값을 생성하지 않거나, 하나 이상의 값을 방출할 수 있다. resolve될 때, 그때의 값만 한번 방출할 수 있다. Observable이 값을 방출하지 않는 사실을 반영하기 위해, RxJS 7에서는 toPromise() 메소드의 반환 형태를 Promise에서 Promise로 변경했다. RxJS 6 toPromise(): Promise → RxJS ..

웹기반 텍스트 에디터를 만들 때 브라우저마다 다른 스펙에 대응이 어려운점, 편집 핸들링 어려운 점, 사용자마다 사용이 다양한 점 등을 해소하기 위해 나왔다고 한다. 자바스크립트 코드도 많이 써야하는데 브라우저마다 대응을 해야겠냐! 조금이라도 쉽게 할수 있도록 하자! 이런 느낌 InputEvent는 편집가능한 콘텐츠의 내용이 변경되었을 때 발생하는 이벤트다. 대표적으로 편집이 가능한 콘텐츠는 편집가능한 콘텐츠이기 때문에 contenteditable 속성이 true인 것도 물론 포함이다. contenteditable InputEvent는 UIEvent와 Event를 상속받는다. 인스턴스 속성 InputEvent.data 삽입된 글자를 반환한다. 문자가 삭제된 경우는 null이다. InputEvent.data..

웹빌드 결과물을 확인하고 싶지만, 도메인이 없을 때 사용하면 좋을 웹호스팅 서비스를 소개한다. 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 l..

자동으로 실행하는 브라우저의 동작들을 자바스크립트로 다루어야 하는 경우들이 있다. 자동으로 실행하는 브라우저 동작 - 링크를 클릭하면, 연결된 링크의 주소로 이동 - 폼 전송을 클릭했을 때, 서버에 폼이 전송 - 마우스를 클릭한채로, 글자를 드래그하면 선택 위 동작들을 막기 위한 방법으로는 2가지가 있다. 1. event 객체 사용한다. event 객체 안에 있는 preventDefault() 메서드를 사용한다. 2. 핸들러가 on에 할당되었을 경우, return false를 반환하게 해 기본 동작을 막는다. 첫번째 방식 두번째 방식 위와 같이 기본동작이 막힌 경우, event 객체 안에 있는 defaultPrevented의 값은 true이다. event.defaultPrevented 값을 사용하여, 버..

@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.inv..

이벤트 바인딩 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 이벤트를 위한 이..

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다. passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다. // Chrome 49 부터 EventListenerOptions 지원 document.addEventListener("touchstart", handler, { capture: false, // Chrome 49 once: false, // Chrome 55 passive: false // Chrome 51 }); 어떻게 향상하는걸까? 스크롤 할때 발생하는 터치 이벤트들이 브라우저에서 발생하면, 브라우저는 터치 이벤트 수신기가 스크롤을 취소할지 여부를 알 수 없으므로 항상 수신기가 끝날 때까지 기다렸다가 페이지를 스크롤한다. pas..