본문 바로가기

속깊은자바스크립트4

728x90
javascript #디자인패턴 - Self-defining function 패턴 Self-defining function 패턴 앞서 살펴본 Init-time branching 패턴은 처음 웹페이지 초기화 단계에서 컴퓨팅 자원을 소모하여 향후 어떠한 방법으로 함수가 호출될 지 결정하는 것이었다면, Self-defining function 패턴은 위의 함수가 최초 실행되는 시기에 이것을 결정하여 설정하게 됩니다. 이렇게 Init-time branching 패턴의 초기화 시기를 조절하기 위한 상황 이외에도 함수 실행 전 초기화가 필요할 때 호출됩니다. Self-defining function 패턴의 또 다른 사용 방법은 바로 함수가 한 번만 호출되어야할 때, 특히 XMLHttpRequest 등으로 서버에 요청을 보낼 때 사용하면 편리합니다. 예시1 - Self-defining functi.. 2021. 2. 12.
javascript #디자인패턴 - 함수 기반 데커레이터 패턴(decorator pattern) 프락시 패턴에서 살펴봤던 래퍼 기능을 데커레이터 패턴과 함께 사용하면, 해당 함수가 호출되기 전에 여러 가지 함수가 호출될 수 있도록 응용할 수 있습니다. 이렇게 응용할 수 있는 상황은 각 함수의 모니터링 기능을 넣고자 할 때입니다. 구현 함수 호출 전 시각과 이후의 시각을 출력하여 각 함수의 처리 시간을 유추할 수 있도록 합니다. 결과 실행 결과를 보면 각 함수에서 호출이 시작되고 끝나는 데 걸리는 시간을 알 수 있습니다. 이러한 모니터링 도구를 변형하여 사용자의 사용 패턴이나 각 자바스크립트 함수의 호출 시간을 기록하여 컴퓨팅 자원을 분산하거나 병목을 분산하여 사용자 경험을 높일 수 있는 자료로 활용할 수 있습니다. 이전글 2021/02/10 - [Study Note/Javascript] - java.. 2021. 2. 10.
javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern) 하나의 객체에 여러 가지 기능들을 추가함으로써 기존의 객체에 추가로 꾸며진 객체를 만들어낼 수 있습니다. 데커레이터 패턴을 이용해 각기 다른 부품으로 이루어진 컴퓨터의 가격을 알아봅니다. 구현 결과 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 이전글 2021/02/10 - [Study Note/Javascript] - javascript #폼 검증을 위한 데커레이터 패턴 적용 javascript #폼 검증을 위한 데커레이터 패턴 적용 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 simuing.tistory.com 2021. 2. 10.
javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern) 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 객체에 추가 기능들을 자유롭게 추가하는 패턴입니다. 데커레이터 패턴을 유용하게 이용할 수 있는 곳은 바로 검증 도구입니다. 구현 (폼 검증을 위한 데커레이터 패턴 실용 예) First name: Last name: Age: Gender: Male Female 결과 필수 항목을 모두 기입하지 않은 경우 유효성체크를 통과하지 못한 경우 필수 항목을 모두 기입한 경우 # 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 참고할만한 문서 : ui.toast.com/weekly-pick/ko_20200102 2021. 2. 10.