개발자R의 삶

Click! 이러한 html 요소들이 있다고 해보자. 보라색 부분을 클릭하면? 노란색 부분을 클릭하면? 버튼을 클릭하면? 어떻게 될까? 보라색 부분을 클릭하면 당연히 hello! 라고 알림창이 뜬다. 노란색 부분을 클릭하면 hi!가 뜨고, 이어서 hello! 가 뜬다. 분명 노란색 div에는 alert('hi!')밖에 없는데 왜 그 부모의 이벤트까지 실행되는걸까? 그게 바로 버블링이다. 이벤트가 발생한 요소부터 루트 요소에 갈 때까지 차례대로 이벤트가 실행된다. 버블링이 있기 때문에 이벤트를 발생시킨 최초의 요소와 이벤트리스너가 있는 원래 요소가 다를 때가 생긴다. 그래서 이벤트의 타겟을 가져올 때 구분해야 하는 점이 있는데.... currentTarget과 target 이다. .addEventListe..

Promise란? 비동기 작업의 최종 성곡 혹은 최종 실패를 나타내는 객체 왜 사용하는가? 비동기 메소드를 동기 메소드처럼 처리할 수 있기 때문 예를 들어 피자를 만드는 프로그램을 개발한다고 가정해보자. /** * 피자만들기 시작! * 3초 후에 피자 도우를 깔고, * 3초 후에 소스를 바르고, * 4초 후에 토핑을 올리고, * 2초 후에 치즈를 올리고, * 4초 후에 오븐에 넣고 * 1분 후에 꺼낸다. */ 이런 프로그램을 만드는데에는 두 가지 방법이 있을 것이다. 1. 콜백을 사용 2. 프로미스를 사용 콜백을 사용했을 때 setTimeout(() =>{ console.log("도우를 깔았습니다.") setTimeout(() => { console.log("소스를 발랐습니다.") setTimeout((..

우선 비동기를 설명하기 전 콜백함수를 먼저 알아야 한다. 콜백함수(Callback)란? * 다른 함수의 인자로 사용되는 함수 * 이벤트에 의해 호출되는 함수 콜백함수의 예 // 다른 함수( setTimeout() )의 인자로 사용되고 있음 setTimeout(() => { console.log("Hello world!") }, 500) function printHello() { console.log("Hello world!") } setTimeout(printHello, 500) //이벤트에 의해 호출되고 있음 CLICK! let objBtn = document.getElementById("my-btn") objBtn.addEventListener("click", () => { console.log("H..

자바스크립트 함수는 객체이다. 자바스크립트에서는 함수도 객체이기 때문에 다른 객체처럼 변수에 할당할 수 있고, 함수에 매개변수로 넘길 수도 있다. 따라서 함수도 호이스팅(Hoisting)의 대상이다. 함수를 나타내는 방법 - 함수 선언문 vs 함수표현식 1. 함수 선언문 보통 다른 언어에서 쓰는 것 처럼 쓰는 방식. 함수 선언문이 호이스팅의 대상이다. ('선언'이기 때문이라고 생각하면 이해가 쉽다.) function sayHello() { console.log("Hello world!"); } 2. 함수 표현식 변수에 (익명)함수를 할당하는 방식 함수표현식의 장점으로는 콜백으로 사용할 수 있다는 점과 클로져로 사용할 수 있다는 점이 있다. const sayHello = () => { console.log..

꽤나 중요한 내용인데 또 막상 외워지지 않는 그것. 온클릭 이벤트를 어떤 요소에 걸었을 때, 그 html 요소를 가져오고 싶을 때가 있다. 자바스크립트에는 버블링과 캡쳐링이라는 개념이 있다. 버블링은 한 요소에 이벤트가 발생하면 핸들러가 동작하고 그 다음 부모 요소의 핸들러가 동작하고.. 더이상 부모가 없을 때까지 이벤트 핸들러가 동작하는 것이다. 사실 버블링은 너무 자연스럽기 때문에 딱히 느껴지지 않기도 하다. 지금 술 계산기를 만들고 있는데, 카드를 누르면 그 요소를 가져와서 class를 추가해주고 싶다. {title} {emoji} card 클래스를 가진 요소에 on:click 함수를 걸어주었다. 하지만 사실상 emoji 클래스를 클릭하거나, title을 클릭해도 card 클래스에 걸려있는 on:c..