2018년 4월 13일 금요일

Save-Data Client Hint

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) 플러그인 사용
    • 설치가 되면 우측 상단에 데이타 세이버가 설치 된 것을 알 수 있다.

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 지시자를 존중
    데이터를 변형하지 않고 직접 전달

2018년 3월 25일 일요일

script 태그 동작

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

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

2018년 3월 23일 금요일

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(디바운싱) 

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


2018년 3월 2일 금요일

의존성 주입(dependency injection)

의존성(dependency)

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

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

더 쉬운 예를 들어보자

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

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

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

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

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

}

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

2017년 12월 11일 월요일

Classic Asp date_format Function

언어별로 date_format 라는 함수가 있어 date값에 대해 원하는 string으로 출력해주는데 classic asp에는 없다.
그래서 다른 date_format 함수의 masking 방법을 빌려서 제작
format characterDescription
yyyy연도 4자리
yy연도 2자리
mm월 2자리
m월 1자리
dd일 2자리
d일 1자리
hh시 2자리
h시 1자리
ii분 2자리
i분 1자리
ss초 2자리
s초 1자리
WW요일
wex> 금

'/**
'**/
class DateValueObject
 private dateObj, formatValue
 
 public property let setDate(byval pDate)
  dateObj = cdate(pDate)
 end property
 
 public property get getDate()
  getDate = dateObj
 end property
 public property get getYear()
  getYear = year(dateObj)
 end property
 public property get getMonth()
  getMonth = month(dateObj)
 end property
 public property get getDay()
  getDay = day(dateObj)
 end property
 public property get getHour()
  getHour = hour(dateObj)
 end property
 public property get getMinute()
  getMinute = minute(dateObj)
 end property
 public property get getSecond()
  getSecond = second(dateObj)
 end property
 public property get getWeekDay()
  getWeekDay = Weekdayname(Weekday(dateObj)) 'left('목요일',1)
 end property
 public property get getWeekDaySimple()
  getWeekDaySimple = left(getWeekDay(),1) 'left('목요일',1)
 end property
 public property let setFormat(pFormat)
  formatValue = pFormat
 end property
 
 public property get getFormat()
  getFormat = formatValue
 end property
 private function zeroADD(byval pdate)
  dim vDate 
   vDate = pdate
   if len(vDate) = 1 then 
    zeroADD = "0" & vDate   
   else 
    zeroADD = vDate   
   end if 
 end function 
 public function dateParse()
  dim resultDate 
   resultDate = formatValue
   resultDate = replace(resultDate, "yyyy", getYear())    '연도(2017,1987)
   resultDate = replace(resultDate, "yy", right(getYear(),2))  '연도(2017,1987)
   resultDate = replace(resultDate, "mm", zeroADD(getMonth()))  '월(12,01,03)
   resultDate = replace(resultDate, "m", getMonth())    '월(12,1,3)
   resultDate = replace(resultDate, "dd", zeroADD(getDay()))  '일(12,01,03)
   resultDate = replace(resultDate, "d", getDay())     '일(12,1,3)
   resultDate = replace(resultDate, "hh", zeroADD(getHour()))  '시간(14,06,05)
   resultDate = replace(resultDate, "h", getHour())    '시간(14,6,5)
   resultDate = replace(resultDate, "ii", zeroADD(getMinute())) '분(14,06,05)
   resultDate = replace(resultDate, "i", getMinute())    '분(14,6,5)
   resultDate = replace(resultDate, "ss", zeroADD(getSecond())) '초(14,06,05)
   resultDate = replace(resultDate, "s", getSecond())    '초(14,6,5)
   resultDate = replace(resultDate, "W", getWeekDay())    '금요일
   resultDate = replace(resultDate, "w", getWeekDaySimple())  '금
   dateParse = resultDate
 end function 
 public function dateParseResult()
  dateParseResult = dateParse()
 end function 
end class
'/**
' @example   : date_format('2017-11-12 11:06:54','mm/dd/yyyy hh시 i분 s초') -> 11/12/2017 11시 6분 54초
'**/
function date_format(byval pdate, byval dateFormat)
 dim dateCl 
 set dateCl = new DateValueObject
  dateCl.setDate = pdate
  dateCl.setFormat = dateFormat
  
  date_format = dateCl.dateParseResult()
 set dateCl = nothing
end function 

2017년 11월 9일 목요일

브루스 웹스터 "사해효과"

재능 있고 효과적인 IT 엔지니어가 떠날 가능성이 가장 큰 엔지니어 - 증발하는 경우가 발생합니다
남아있는 경향이있는 것은 '잔여 물'입니다. 이는 가장 재능 있고 효과적인 IT 엔지니어입니다. 그들이 직장을 불쾌하다고 생각하더라도, 다른 곳에서 일자리를 찾을 수있는 가능성이 가장 적습니다.

http://brucefwebster.com/2008/04/11/the-wetware-crisis-the-dead-sea-effect/