02 - optional chaining operator https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining API에서 어떤 object를 가져올 때 매우 유용하다. const me = { name: 'simmy', profile: { email: '@gmail.com' } } console.log(me.profile.email); // @gmail.com const someone = { name: 'who', } console.log(someone.profile.email); // Uncaught TypeError: Cannot read propert..
01 Nullish coalescing operator (??) 연산자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator null 병합 연산자는 ||와 &&처럼 논리연산자다. ?? 연산자는 ||와 마찬가지로 기본값을 줄 때 유용하다. 다만, ||은 0, 과 빈 문자열 등을 포함한 falsy한 값을 방지하고, ??은 오직 nullish한 값을 방지한다. let name; console.log('hello', name); // undefined console.log('hello', name || '시명'); // '시명' ..
padStart and padEnd padStart MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart padEnd MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd String.prototype.padStart() 날짜나 시간 등을 만들 때 유용하다. 예를 들어 let hours = 12; let minutes = 3; let seconds = 15; console.log(`${hours}h:${minutes}m:${seconds}s`); //..
애니메이션 최적화 (Reflow, Repainting) 참고 Jank(쟁크) 현상 일반적으로 모니터의 주사율은 1초당 60개(60FPS 60프레임 ) 화면을 보여준다. 이에 맞춰 브라우져도 1초에 60개를 보여주려 한다 이때 브라우져가 60개를 못보여주고 1초에 20개, 30개 정도만 보여준다면 애니메이션은 버벅거리게 되는데, 이 현상을 Jank(쟁크) 현상이라고 한다. 그럼 어떤 상황에서 브라우져는 1초에 60개를 못 그릴까? 브라우져 렌더링 과정 브라우저가 화면을 렌더링하는 과정은 아래와 같다. HTML + CSS + JS 다운로드 -> DOM + CSSOM 변환 -> Render Tree 생성 -> Layout -> Paint -> CompositeDOM은 HTML 요소를 tree 구조로 만든 것이..