Javascript | Notion

<aside> 💡 생각해보기

bind, apply, call 의 차이점은 ?
typeof 와 instanceof 를 적절히 사용하는 방법은?
JS(ES5) 는 scope 가 몇 종류나 될까?
DTO 역할을 맡은 객체 내 key value pair 를 반복문으로 확인하는 방법은 ?
확인한 내용과 eslint 혹은 tslint 와의 연관성은?

</aside>

코드 작성시 tab space는 공백 두글자로 제한.

Polyfil

모든 웹 브라우저가 ES5혹은 ES6을 지원하지않으므로 과거에는 모든 polyfil 코드를 넣고 프로토타입을 검사하여 없으면 해당 기능을 확장함- 하지만 이럴경우 사용자에게 전달되는 번들 크기가 늘어나는 단점이 있으므로 필요한것만 선택적으로 추가 - 최신 웹 브라우저에서는 거의 다 지원되기때문에 html body script태그에 polyfil.io에서 제공되는 내용을 이용하면 된다.

<html>
  <head></head>
  <body>
    <script crossorigin="anonymous" src="<https://polyfill.io/v3/polyfill.min.js?features=default%2CString.prototype.padStart>"></script>
  </body>
</html>

UA 방식에 대한 고찰

polyfill.io 는 User-Agent 정보를 바탕으로 웹브라우저가 지원하는 API 여부를 확인해서 필요한 것만 전달한다.

그 것을 체크하여 전달하는 방법에 대해서는 다음 블로그 글을 참고 한다.

Function Size

프로그램의 기능 및 동작을 담당하는 함수인 메서드의 코드 길이는 한 화면을 넘기지 않도록 한다.

한 화면의 기준은 15인치 맥북 화면이 기준이다.

즉 50라인정도의 높이를 넘긴다면 리팩토링을 고민해보는것이 좋다.