본문 바로가기

분류 전체보기347

728x90
AdFit #티스토리 kakaoAdFit 광고를 붙이다. AdFit 신청 티스토리 관리 화면이 개편되면서 수익관리 메뉴가 추가되었는데, 혹시? 하는 마음으로 AdFit신청 기준인 3개월 이내 포스팅을 20개 채우고 신청해보았습니다. 신청한김에 구글 애드센스도 함께 신청해보았지만 애드센스는 광탈당했습니다 ㅠㅠ 애드고시란.. kakaoAdFit 신청일 : 2021.2.10 / 승인일시 : 2021.2.15 14:35 심사는 5일이 걸렸고 승인되었습니다. 등록일자는 2018년이었는데... 거의 2년 걸렸네요. 매체 심사는 항상 보류였는데 파란색의 승인 텍스트를 보니 감동이 밀려옵니다. 승인메일을 받고난 뒤 빠르게 광고를 달았습니다. 달 수 있는 곳은 다 달았습니다. 모바일은 목록이 무한 스크롤로 제공되기 때문에 본문 하단 광고는 사용 안함 처리하였습니다. 누적 조회.. 2021. 2. 16.
javascript #DOM reflow 시 자원 소모 최소화 방법 개념정리 DOM repaint DOM repaint는 특정 엘리먼트의 visibility를 수정하거나 배경색이나 글자색 등을 바꿀 때 일어나는 것으로, 화면에 각 HTML 엘리먼트들의 위치는 변경되지 않고, 화면에 표시되는 것이 바뀔 때 일어난다. 특히 특정 DOM 엘리먼트의 visibility를 수정하면 해당 DOM의 자식 DOM까지 하위 트리 구조 전체를 탐색해야 하므로 CPU 자원이 소모된다. DOM reflow DOM reflow는 repaint와는 다르게 DOM이 화면에 표시되는 구조가 바뀔 때, 또는 CSS 클래스가 바뀔 때 일어난다. 이는 DOM 트리가 배치되는 위치를 전체적으로 다시 계산해서 화면에 출력하는 것을 의미하며. DOM repaint보다 자원소모가 크다. repaint reflo.. 2021. 2. 14.
javascript #디자인 패턴 - 커링 패턴(currying pattern) 커링 패턴 커링(currying) 패턴은 함수를 설계할 때 인자 전체를 넘겨서 호출할 수도 있지만, 일부 인자는 먼저 입력해두고 나머지만 입력받을 수 있도록 새로운 함수를 만드는 패턴을 의미합니다. 커링 패턴은 하나의 공용 함수가 있는 경우 이를 세부적인 기능을 하는 함수로 나누고 싶을 때 유용합니다. 적용예시1. 합을 구하는 기본 함수 makeAdder() 함수로 인자를 하나 받은 뒤, 나머지 인자를 하나 받는 함수를 반환한다. 여기서 반환된 함수가 호출되면 클로저로 저장되어 있던 x와 새로 입력되어 들어온 y를 sum() 함수의 인자로 넘긴다. 그 결과 sum(x,y)의 결과가 나온다. 적용예시2. Function.prototype에 커링 패턴 함수 추가 자바스크립트는auguments 객체와 appl.. 2021. 2. 13.
javascript #디자인패턴 - 콜백 패턴(callback pattern) 콜백 패턴(callback pattern) 콜백 함수의 대표적인 사용처는 이벤트 핸들러이지만, 일반적인 자바스크립트 처리 로직 중에서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있습니다. 비동기 처리가 많은 자바스크립트에서 다양하게 응용할 수 있습니다. 특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높입니다. 적용예시 ajax() 함수를 공통으로 사용하기 위해 콜백 패턴이 사용되었습니다. 이 함수는 XMLHttpRequest가 빈번하게 일어나기 때문에 이를 효율적으로 호출하려고 정의되었습니다. 예시와 같이 XMLHttpRequest의 순서가 보장되어야 할 때가 콜백 함수를 활용하기 가장 좋은 예입니다. 특히 많.. 2021. 2. 13.
javascript #디자인패턴 - Self-invoking constructor 패턴 Self-invoking constructor 패턴 자바스크립트에서는 new 키워드를 생략하더라도 생성자 함수를 일반 함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 됩니다. 이러한 경우는 작은 오타라서 소스가 많아지면 오류 찾기가 힘듭니다. Self-invoking constructor 패턴은 이러한 실수를 고려하여 생성자를 그냥 함수로 호출할 때 스스로 new를 붙여서 호출하는 패턴입니다. ECMAScript 6에서 class 키워드가 별도로 나오면서 function 기반으로 객체지향을 개발하는 상황은 점점 줄어들고 있지만, 아직 ECMAScript 6의 class 키워드를 모든 브라우저가 100% 지원하지는 않고 있습니다. 따라서 function으로 객체지향을 구현할 때 방어적.. 2021. 2. 13.
javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern) 메모이제이션(memoization) 패턴 패턴의 이름대로 '메모'를 하는 것이 특징입니다. 메모를 하는 대상은 바로 함수 또는 객체입니다. 이 패턴의 활용 용도는 일반적인 프로그래밍 언어에서 캐시를 사용하는 것처럼 사용한다고 생각하면 됩니다. 적용예시1. 메모이제이션 패턴을 이용한 캐시 구현 특정 아이템을 검색하려고 할 때, 검색 결과를 ID 기반으로 캐시 처리하는 메모이제이션 패턴입니다. 메모이제이션 패턴의 메모를 하는 대상은 변수가 될 수도 있고 함수가 될 수도 있습니다. 아래 소스에서 검색하는 함수가 searchItem() 이라면 이 함수 자체에 cache라는 속성을 객체로 추가하고, cache에는 아이템이 있으면 캐시에 저장된 객체를 반환하고 없으면 서버로 요청합니다. Search 적용예시2. 메.. 2021. 2. 13.
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 #디자인패턴 - Init-time branching 패턴 Init-time branching 패턴 Init-time branching 패턴은 이름 그대로 초기화 단계에서 분기하여 같은 함수를 환경에 따라 다르게 정의하는 것을 의미합니다. 보통 웹페이지가 처음 열릴 때 실행된다고 해서 Init-branching 패턴이라고도 하며, 페이지가 로드될 때 실행되기 때문에 Load-branching 패턴이라고도 합니다. 브라우저 호환성을 보장해줄 때 사용하면 좋은 패턴입니다. 적용예시1. 이벤트 핸들러 호환성 지원 1. navigator.appName 으로 호환성 지원 과거에는 이렇게 처리하는 웹페이지들이 많았으나, 최근에는 이렇나 처리 방식이 적당하지 않습니다. 웹페이지들이 Internet Explorer8을 구분하기 위해 위의 소스를 이용하는 이유는 이벤트 핸들러 .. 2021. 2. 10.
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.
728x90
728x90

티스토리툴바