JS

event bubbling에서 예시로 쓴 코드에서처럼 HTML에서 script 모듈을 가져올 때 defer 옵션을 주지 않으면 JS에서 getElementById 등의 DOM과 관련된 상호작용하는 코드가 제대로 동작하지 않는다.div1, div2, div3가 undef

클로저를 알기 전에 lexical scope가 무엇인지 먼저 알아야 한다.lexical scope란 함수와 변수의 scope를 선언된 위치를 기준으로 정한다는 의미이다.이와 반대로 dynamic scope는 함수나 변수의 scope를 호출된 시점을 기준으로 정한다는 의

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.아래와 같이 코드를 짰을 경우, div3를 눌렀을 때, 'click div3' -> 'click div2' -> 'click div1' (->

JS는 싱글 스레드 기반이며 비동기적으로 동작한다.싱글 스레드이기 때문에 한 순간에 하나의 작업만 가능하지만, 비동기로 동작하기 때문에 단일 스레드임에도 불구하고 짧은 시간 동안 많은 작업을 수행할 수 있다.다만, JS 자체가 비동기 동작을 지원하는 것이 아닌, 브라우

위 사진에서 볼 수 있듯이 메모리는 크게 3가지의 life cycle을 가지고 있다.할당한 뒤에 사용되고, 사용되지 않으면 해제된다.C와 같은 저레벨 언어에서는 allocate와 release를 malloc(calloc 등)과 free를 통해서 개발자가 직접 명령해야

하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스이다.이 API가 나오기 전까지는 요청을 보낸 뒤 해당 요청에 대한 응답이 필요없다면 그냥 받지 않고 무시했다고 한다.하지만 네트워크 비용이 크거나 카카오 블로그 리뷰에 나오는 내용처럼 비동기 처리 과정에서 과거에

element에 부여된 listener를 1번만 발동시키기 위한 방법은 크게 3가지가 있지만 가장 추천되는 방법은 1번이다.이름 있는 함수 사용once 옵션 사용하기위 방법은 간편하지만 조건에 따라 listener를 삭제하고 싶을 때엔 적합한 방법이 아니다.argume

CSS로도 화려한 애니메이션(animation, transition, transform)은 충분히 구현할 수 있다.하지만 사용자의 특정 인터렉션, 예를 들면 어떤 element를 클릭한다든지, scroll 이벤트가 발생한다든지에 따라 애니메이션을 실행하고 싶다면 JS를

head with no optionhtml은 인터프리터처럼 작용해서 위에서부터 읽어내려옴. 그런데 body를 만나기 전에 script태그를 만나서 js를 가져오면 html을 보여주는 속도가 느려짐.body with no optionhtml을 먼저 보여줄 수는 있지만 j

본 글은 https://github.com/ryanmcdermott/clean-code-javascript 를 번역한 글이다.그냥 복붙 없이 내 손으로 한글자 한글자 타이핑하며 익히려고 추가한 페이지이다.참고https://738.github.io/cl

클린 코드를 공부하며 디자인 패턴에 대해서도 익숙해질 필요가 있다고 생각했다.~필기 테스트에서도 나왔고 면접에서도 공격받았던 질문...~모든 디자인 패턴을 다 작성한다기 보다는 JS에서 주로 사용되는 패턴을 먼저 정리하고자 한다(이후 방향성이 바뀔 수도 있다).목차Bu

서버에 저장되는 time 및 price와 화면에 보여지는 내용이 같지 않을 때가 많았다.화면에 보여주기 위해 항상 한 번은 가공을 해야 했고, 그 가공 과정을 매번 구글에 검색해서 알아내거나 day.js, moment.js를 이용해서 해결했다.이번에는 time에 대해서

재밌는 글을 하나 읽고 나서 인코딩/디코딩과 관련하여 간단하게나마 정리하고 싶어졌다.인코딩: 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것디코딩: 컴퓨터가 이용할 수 있는 신호를 사용자가 이해할 수 있는 문자나 기호로 만드는 것7비트로 표현

electron 개발 중 main process 리팩토링 작업을 진행했다.공통 부분 모듈화, 별도의 기능 추상화 등의 작업을 진행하던 중 export default class Class로 선언한 Class를 다른 파일에서 require로 가져오지 못해서 에러가 났고,

https://tech.inflab.com/202208-shadow-root/이 블로그에서 전역 스타일에 영향을 받지 않도록 shadow dom을 이용했다고 한다.관심을 가지고 다른 글들도 찾아보던 차에 Vue에서 많이 사용되는 태그인 template과 slo

data-\* 속성 HTML5부터 추가된 개념으로 '사용자 지정 데이터 특성'이라는 특성 클래스를 형성할 수 있다. 해당 특성을 이용해 page나 application에 private한 custom data를 저장하거나, HTML element에 custom data