자바스크립트로 할 수 있는건 너무 한정적이다. 하지만 웹 APIs 를 이용하여 다양한 것들을 할 수 있다 ! 웹 APIs 는 브라우저에서 제공하는 API이기 때문에 브라우저의 멀티쓰레딩을 이용해서 다양한 일들을 동시에 실행할...
Continue reading...javascript
Process / Thread
✏️ Process 운영체제 위에서 연속적으로 실행되고 있는 프로그램 사진 뷰어 프로그램 / 음악 프로그램 등 각각이 프로세스 메모리 위에서 서로 독립적으로 실행 독립적으로 실행되기때문에 프로세스 하나에 문제가 생긴다고해서, 다른 프로세스에 영향이...
Continue reading...this 바인딩
this 라는 것은 어떤 클래스 안에 있는 함수를 다른 함수의 콜백으로 전달할때는 그 함수가 포함되어져있는 클래스의 정보가 사라지기 때문에 바인딩이 필요하다. arrow function이 없었을 때는 bind 를 많이 썼다. arrow function을...
Continue reading...Event Prevent & Event delegation
Event Prevent Event Delegation 버블링업 되는 것을 이용하여 delegation(이벤트 위임)을 해보자 ✏️ 클릭되었을때 노란으로 바뀌는 코드를 작성해보자. 보통 li태그들을 다 querySelectorAll()로 가져와서 각 엘리멘트에 이벤트 리스너를 붙이는데, bubbling을 이용하여 ul 하나에만...
Continue reading...Capturing & Bubbling
Capturing 과 Bubbling 상기 코드에서 버튼을 클릭하면, 부모의 이벤트까지 모두 호출되는걸 확인할 수 있다. 이는 bubbling up이 되는 것이다. 버블링을 막는 방법 ? 🚫 위와 같이 버블링이 일어나지않도록 처리할 수 있다....
Continue reading...Events & Break point
Events 개념 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events 기본적으로 이벤트 핸들러를 등록할 수 있는 요소는 EventTarget 를 상속하는 모든 요소이다. 즉 모든 엘리멘트에 이벤트를 등록할 수 있다. Events 종류 https://developer.mozilla.org/en-US/docs/Web/Events 강제 이벤트 발생 특정 이벤트가 가지고...
Continue reading...ES6 Arrow function, 함수 선언 & 네이밍 룰
들어가기전에 잠깐! 🤔 함수도 역시 Object 중 하나 이기 때문에, 함수가 생성되면 그 함수의 이름 자체는 그 함수 로직이 담겨있는 주소를 가리키고 있다. 즉 함수에 이름에는 reference가 들어있고, 그 주소에 함수의...
Continue reading...‘use strict’ 를 쓰는 이유
일반적으로 js 파일을 작성시, 맨 위에 ‘use strict’ 를 선언한다. 타입스크립트를 쓸때는 전혀 고려할 필요가 없지만, 순수 바닐라 자바스크립트를 이용할때는 꼭 쓰는게 좋다. Why? 브랜든이 자바스크립트 언어를 만들때 굉장히 빨리 만들어야...
Continue reading...innerHTML vs element
위와 같이 Element를 이용하여 DOM 을 조작할 수도 있고, innerHTML을 이용하여 DOM을 조작할 수 있다. innerHTML을 이용하여 DOM을 조작하면, 상황에 따라 안에 텍스트만 변경될때마다 전체적인 html을 계속해서 업데이트하면서 layout print과정이 일어나기...
Continue reading...[jQuery] countdown function (promotion)
Here is the sample code for countdown function. HTML Countdown.js
Continue reading...