Save-Data Client Hint

ilya grigorik은 Client Hint라 하여 웹사이트에서 코드를 구현시에 그에 더 맞게 구현할 수 있도록 헤더 값 등을 통하여 제공해주어야 한다 제안하였다(Client Hint Draft)

그 중 일부 Save-Data(데이터 절약모드 상태) 클라이언트(헤더 값) 힌트를 이용하면 헤더를 통해 선택적으로 컨텐츠를 제공 할 수 있다.

Save-Data 기능 ON

• 직접 Header 값에서 Save-Data : On 이라 제공
• 아래 기기들에서 여러가지 모드 설정을 하면 Save-Data 헤더값에 On을 제공한다

1. Chrome49+(PC) 브라우저 데이타세이버(Data Saver) 플러그인 사용

• Chrome에서 데이터세이버 설치
• https://chrome.google.com/webstore/detail/data-saver/pfmgfdlgomnbgkofeojodiodmgpgmkac

• 설치가 되면 우측 상단에 데이타 세이버가 설치 된 것을 알 수 있다.

2. 안드로이드 Chrome에서 데이터 절약모드 사용

- 태블릿 혹은 스마트폰에서 Chrome 열기 - 오른쪽 상단 설정 클릭 - 고급에서 데이터 절약모드 선택

3. Opera 35+ 에서 Opera Turbo Mode 사용 시

4. Yandex 16.2+ 에서 Turbo Mode 사용 시

Data-Saver ??

데이터 절약 모드를 사용하면 웹 리소스가 구글 서버를 거쳐 압축이 이루어져서 데이터를 절약할 수 있다. 현재 안드로이드, 크롬에서만 사용 가능하며, apple에서도 추가 할 예정

출처 : Data-Saver의 동작과정
(https://developer.chrome.com/multidevice/data-compression)

•  이를 이용하여 데이터 절약을 원하는 사람들에게 adaptive하게 리소스를 전달 할 수 있음

Data-Saver 특징

• 암호화 되지 않은 상태에서 proxy 동작 후 https 대상에 https로 전달함
• 프록시를 통하기 때문에 ip는 X-Forwarded-For 헤더값을 통함
• 사이트 소유자의 콘텐츠 옵트아웃(Opt-out : 당사자가 자신의 데이터를 수집을 허용하지 않는다고 명시)에 대해서는 Cache-Control: no-transform 지시자를 존중
  데이터를 변형하지 않고 직접 전달

script 태그 동작

<script>
클라이언트 자바스크립트에 대해 정의할 때 사용

사용방법
- 태그사이에 statement를 기입하거나 src를 통해 외부 자원을 갖고 오는 방법이 있다.
  -> 외부자원 즉 src 속성을 이용하여 갖고 올 경우, 태그 사이 문은 동작 하지 않음
      (https://www.w3schools.com/tags/tag_script.asp)
- 스크립트를 이용 할 수 없을 경우 noscript를 태그를 이용하여 자바스크립트에서 표현 하고자 하는 요소를 등록해야 함
- async 요소를 이용하면 비동기 적으로 외부 스크립트를 가져올 수 있다.
- defer 요소를 이용하면 페이지 구문 분석이 끝난 후 스크립트 요소를 가져 올 수 있다.
- async, defer요소가 없을 경우 스크립트는 즉시 실행

throttling(쓰로틀링)

throttling(쓰로틀링) 

- 함수, 메서드 등 일정 시간 전에 호출 시 호출이 안되고, 해당 시간이 지나야 처리가 되는 기능
- ajax와 같이 자주 호출 되는 함수들에 사용
- 반복되서 사용되는 api 특히 비용이 들어갈 경우 더욱 쓰로틀링이 필요해 보인다.

Code

-------------------------------------------------------------------------------------------------
<a id="throttling" href="#aa" >throttling</a>
<script>

document.querySelector("#throttling").onclick = throttling(function(e){
       console.log("throttling");
},1000);

// 1초 뒤에 호출 동작
function throttling(fn, delay){
    let isRunning = false, timeoutFn, nextTime = 0;
    return (...args)=>{
        isRunning = (Date.now() - nextTime  > delay);
        if(isRunning){
            let _this = this;
            timeoutFn = setTimeout(function(){
                fn.call(_this, ...args);
            },delay);   
            nextTime = Date.now();
        }
       
    }
}
</script>

debouncing(디바운싱)

debouncing(디바운싱) 

- 연속적인 호출의 메서드, 함수들에 대해 맨 마지막에 호출한 한번의 함수만 실행 하는 것 
- 저장버튼 일 경우 마지막에 누른 한번만 동작 하도록 처리

의존성 주입(dependency injection)

의존성(dependency)

- 한국어로 일단 풀이를 해보자

 => 의존하다 : 부족한 주체가 도움을 받다. 그래서 도움을 받는 무언가를 신뢰하다.
이러한 뜻을 갖고 있다.

더 쉬운 예를 들어보자

-> 나는 귀차니즘이 심해서 아침을 안먹는다. 그래서 엄마가 항상 아침을 차려준다.
==> 이는 나는 엄마에게 "아침밥을 먹다"이라는 목적을 달성하기 위한 의존적이게 된다.
하지만 나는 아침밥이라는 목적을 달성시켜줄 수 있는것은 엄마만이 될 수 있는것은 아니다.
아빠가 차려줄 수도 있고 누나가 차려줄 수도 있다.

이러한 의존성을 갖는 클래스(아침밥을 먹다)가 외부의 도움을 받아서 달성, 혹은 변할수 있는 행위(엄마, 아빠, 누나)를 주입(injection) 이라고 한다.

의사코드로 이를 구성해보면

class 아침밥먹다 {  //의존성을 갖는 클래스

    public funciton set차려주는사람(대상){ //주입method
        Person target = new 대상();
        this.차려주는사람 = target;
    }

}

class 엄마{
}
class 누나{
}
class 아빠{
}