Frontend/Javascript

Javascript debounce, throttle

debounce와 throttle은 이벤트가 연속적으로 발생했을때 제어하기 위해 사용을 합니다. 간략히만 제 언어로 먼저 설명해보자면 debounce는 연속된 이벤트를 계속 뒤로 미루어 제일 나중의 이벤트를 실행시켜주고 throttle는 일정한 간격으로 연속으로 발생되는 이벤트를 실행시켜 줍니다. 예를들어 버튼을 클릭할때마다 이벤트가 발생한다고 가정해봅시다. 그러면 이벤트는 아래와 같이 발생될겁니다. 버튼 클릭 20 debounce 1 throttle 6 번 정도의 횟수로 이벤트가 발생될겁니다. 이는 물론 시간을 어떻게 설정하느냐에 따라 달라질것 입니다. 이제 상세히 코드와 함께 살펴보겠습니다. debounce debounce가 사용되는 대표적인 예시중 하나입니다. 검색어가 변경될 때마다 api를 날리면..

Javascript script async vs defer

html에서는 script 태그를 이용하여 필요한 javascript를 load 할 수 있습니다. 브라우저에서는 html을 읽다가 태그를 만나게 되면 html을 읽는 것을 멈춥니다. 이렇게 멈추게 되면 사용자에게 페이지가 보여지는 시간이 늦어지기 때문에 좋지 않을 수 있습니다. 아래 이미지의 경우 검은 부분만큼 parsing이 이루어지지 못하므로 그만큼 화면에 노출되는 것이 지연될 것입니다. script 태그의 경우 body의 최하단에 주곤 합니다. 이렇게 하면 parsing에 문제는 없지만 fetching 하는 시간 동안에는 화면이 동작을 하지 않게 됩니다. script 태그에 옵션을 주어서 위와 같은 경우를 방지하고 다양한 방식으로 사용할 수 있습니다. async와 defer 옵션을 주어서 fetch..

innerHTML, insertAdjacentHTML, textContent, innerText

최근 프로젝트를 구현하던 중 DOM 요소의 text를 바꾸는 데도 innerHTML을 쓰는 것으로 피드백을 받은적이 있습니다. 그래서 어떠한 경우에 innerHTML을 써야 하는지 비슷한 대체 기능들은 언제 사용하여야 하는지를 알아 보려 합니다. innerHTML const content = htmlString; element.innerHTML = content; 와 같은 방식으로 사용할 수 있습니다. 위의 코드를 실행하면 element 내부의 모든 자손은 제거되고 문자열 htmlString의 HTML들을 파싱하고 생성된 노드로 대체됩니다. (HTML 로 파싱되기 때문에 HTML의 양식에 맞아야 합니다) innerHTML은 보안상의 허점을 가지고 있습니다. 스크립트 태그가 추가되는 경우가 있을수 있습니다..

🔥Javascript questions

HTML 삽입 미리보기할 수 없는 소스 Explain event delegation => 이벤트 위임은 부모 DOM 요소에 이벤트 핸들러를 등록하여 자식 DOM 요소를 다루는 것을 말합니다. 자식요소에서 이벤트가 발생하고 이것이 이벤트 전파(캡처링 단계, 타깃 단계, 버블링 단계)의 버블링 단계를 통해 부모요소로 전파가 될때 이벤트 핸들러가 동작하게 됩니다. 이벤트 위임을 사용하게 되면 두가지 이점을 얻을 수 있습니다. 1. 성능을 향상 시킬수 있습니다. 만약 자식요소가 100개라면 100개 요소에 이벤트 핸들러를 등록해주어야 합니다. 이는 사용량의 저하를 초래합니다. 1. 자바스크립트에서 함수는 메모리를 잡아먹는 객체 입니다. 메모리를 많이 사용할수록 성능은 떨어집니다. 2. 이벤트 핸들러를 많이 할당..

🔥 System Design Concepts that Helped Me Get Sr Frontend Offers From Amazon & LinkedIn (번역글)

이 글은 아래의 포스트를 번역한 글입니다.(오역이 있을수 있습니다.) https://itnext.io/system-design-concepts-that-helped-me-get-sr-frontend-offers-from-amazon-linkedin-9e100f3ce7d2 🔥 System Design Concepts that Helped Me Get Sr Frontend Offers From Amazon & LinkedIn If you just started your System Design journey, the compilation of this concept will help you to kickstart with the basics. itnext.io Content Intro Client-serve..

js + cypress

상태관리 라이브러리 없이 만들어본 js 프로젝트에서 간단한 tdd를 적용해 보았습니다. 라이브러리는 cypress를 사용하였습니다. 저는 cypress를 테스트 도구로서만 알고 있었습니다. 좀 더 자세히 알아봐야겠습니다. cypress 공식문서에서는 'A complete end-to-end testing experience' 라고 소개하고 있습니다. Ent to End test가 뭘까요?? End To End test는 사용자 관점에서 테스트 하는 방법입니다. 의도하는 텍스트가 출력이 되었는지, 삭제 버튼을 누른후에 해당 컴포넌트가 삭제되었는지 등등 사용자 관점에서 테스트를 하는 방법입니다. cypress등장 이전에 테스트를 해본적은 없지만 이전에는 selenium등 가상의 브라우저를 띄워서 동작을 수행..

Frontend Interview Cheatsheet

이 글은 아래에 첨부되어 있는 글의 한글 번역입니다. 오역이 들어 있을수 있습니다. 만약 프론트엔드 면접을 준비하고 있고 프론트엔드 도메인 지식을 빠르게 refresh 하고 싶다면 이 cheatsheet는 많은 시간을 아껴줄 것입니다. 목차 Intro Web Knowledge 1.Caching 2.HTTP/2 3.Security Web Performance 1.Critical rendering Path 2.Reflow 3.preload,preconnect,prefetch,prerender 4.Rendering Performance 5.Workers 6.Image Optimization DOM 1.Elements 2.Manipulation 3.Document Fragment 4.Event delegatio..

var, let, const

var는 javascript에서 es5 이전에 등장한 변수 선언 키워드 입니다. let, const는 es6에서 등장한 변수 선언 키워드 입니다. es6 이상에서는 대부분의 책, 블로그 들에서 var를 쓰지 말라고들 합니다. 그 이유에 대해서 알아볼게요 스코프 var는 함수 레벨 스코프를 가집니다. let, const는 블록 레벨 스코프를 가집니다. // var var a = 1; { var a = 3; console.log(a) // 3 } console.log(a) // 3 // let let b = 1 // 전역변수 { let b = 2; // 지역변수 console.log(b) // 2 } console.log(b) // 1 // const const c = 1; // 전역변수 { const c ..