저번에 시도했던 일일 기술 아티클 읽기는 한 달의 여정을 마치고 실패 했지만 이번엔 꾸준함으로 조금 더 길게 해보고싶다.

9월

• 9월 15일 : Intersection Observer API의 사용법과 활용방법
  , 스크롤 이벤트 최적화
  

  • 스크롤 이벤트가 아닌 intersection observer 를 사용하는 이유?
  • 스크롤 이벤트는 단시간에 수백번, 수천번 호출될 수 있고 동기적으로 실행되기 때문에 메인 스레드(Main Thread) 영향을 줄 수 있음 -> 스로틀이나 애니메이션 프레임 같은 후속 처리를 해줘야함.
  • 다음 끝을 계산하기 위해서 offsetTop을 계산을 하면 reflow 가 계속 일어나서 최적화에 좋지 않음
  • intersection observer 로 lazy loading 구현 플로우
    • 모든 img 태그 observing 해놓음 -> entry.isIntersecting 가 true 가 되면 src 에 img url 을 넣어준다. -> 해당 entry observing 끊음

• 9월 16일 : [JSConf Korea 2020]접근성이 떨어지는 웹사이트? 자바스크립트의 잘못은 아니랍니다.

  • 접근성 === 사용 가능성
  • 사용자가 사용할 수 없다면, 만드는 이유가 없다.
  • 웹의 힘은 보편성.
  • 시맨틱 HTML을 사용하는 이유 : 보조기술에 사용 혹은 특정 장애를 가지고 있는 사용자들이 사용할수 있는 정보를 담고있다.
  • 예시 > 키보드 tab 을 사용할수 없는 div 대신 버튼 으로 만들어서 키보드 사용자 생각하기
  • 사용흐름에서 보조기술 사용을 차단하지 않도록하는것이 중요
  • 시멘틱 태그를 왜 써야하는지 웹이라는 게 얼마나 많은 보편성을 생각하고 만들어 질 수있는지 생각해보는 글이 었습니다.

• 9월 17일
  1) babel loader & @babel preset typescript vs ts loader 간단한 정리
  2) babel-loader와 ts-loader의 빌드 결과가 다른 현상

  • .ts 파일을 컴파일해주는 방법은 두가지 방법이 있다. babel loader + babel preset typescript 와 ts loader
  • 두가지중 어떤 것을 써도 상관은 없지만 차이점은 있다.
  • babel loader 는 타입체크를 컴파일할때마다 안해줘서 컴파일이 빠르다.
  • tsloader 는 컴파일 마다 타입체크를 해줘서 컴파일이 느리다.
  • transplieOnly 라는 속성을 키면 더 빨라진다.
  • tsloader 는 HMR (hot module reloading) 을 사용할수 없다.
  • 속도가 비슷하다면, HMR 도 사용하고 폴리필도 챙길수있는 babel loader 를 사용해서 ts 를 컴파일 하려고한다.