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 아빠{
}