동기와 비동기동기는 이전의 작업이 끝나야 다음 것을 할 수 있지만, 비동기는 여러 작업을 동시에 진행할 수 있다.    자바스크립트는 동기 언어이다.자바스크립트는 한 줄을 실행하고 다음 줄을 실행하는 ‘동기 언어’이다. 그런데 setTimeout 함수처럼 비동기로 작동하는 함수가 있다. 이는 자바스크립트의 부분이 아니다. 브라우저에서 사용을 한다면 브라우저 api를 사용하는 것이고, Node에서 사용한다면 Node api를 사용하는 것. 즉! 자바스크립트는 비동기처럼 사용할 수는 있지만, 결국은 다른 것의 도움을 받아서 비동기처럼 사용할 수 있는 것!    자바스크립트 동작 과정 자바스크립트 코드를 실행하려면 자바스크립트 엔진이 필요하다. 이때 엔진은 두 가지 주요 요소로 구성된다. 메모리 힙 - 메모리..

함수 안에서 this를 사용하면 window 객체를 참조하게 된다. 이때 call, apply, bind를 사용하면 참조하는 객체를 바꿀 수 있다.   1. call 메서드call 메서드는 함수를 호출하는 함수이며, 첫 번째 인수로 값을 전달해 주면, 호출되는 함수의 this는 window 객체가 아닌 전달받은 값을 가리키게 된다. const fullName = function(){ console.log(this.firstName + " " + this.lastName);}fullName();이 상태로 출력하면 undefined가 출력된다. 왜냐하면 함수 내에서 this는 window객체를 가리키는데, 이때 window객체 내에 firstName라는 메서드가 없기 때문이다. 이런 상황에서 call 메서..

this 1. 메서드에 this 사용 시const audio = { title: 'a', play(){ console.log('play this', this); }}audio.play() 메서드에서 this를 사용하면 해당 객체를 가리킨다.    2. 함수에서 this 사용 시function playAudio(){ console.log(this);}playAudio();함수에서 this를 사용하면 window 객체를 가리킨다.     3. 생성자 함수에서 this 사용 시function Audio(title){ this.title = title; console.log(this);}const audio = new Audio('a');생성자 함수에서 this를 사용하면 빈 객체를 가리킨다. ..

id를 반환받지 않아도 지목할 수 있다. id값으로 coffee라는 값을 가진 요소를 반환받아서, 새롭게 만든 p태그를 붙이는 과정이다. 그런데 여기서 id를 그대로 붙여도 오류가 나지 않았다. 신기하게 querySelector를 주석처리하고, id값을 그대로 사용해도 출력이 되는 것을 확인할 수 있다. 왜 그런 것인가? https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties Do DOM tree elements with IDs become global properties? Working on an idea for a simple HTMLElement wrapper I stumbled..

이벤트 버블링 이벤트 버블링이란 위의 그림처럼 가장 깊게 중첩된 요소(3)에 이벤트가 발생했을 때, 이벤트가 위로 전달되는 것을 의미한다. 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면, 3번->2번->1번 핸들러 순으로 실행된다. FORM DIV P 가장 안쪽의 태그를 클릭하면 우선 p태그에 할당된 onclick 핸들러가 작동된다. 그리고 div->form 순서대로 작동한다. document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다. 즉 위의 코드를 클릭하면 3개의 alert가 뜬다. event.target과 this의 차이점 event.target은 실제 이벤트가 시작된 ‘타깃’ 요소, 즉 버블링이 진행되어도 변하지 않는다. this는 ‘현재’ 요..

카카오테크캠퍼스를 통해 CSS를 다시 처음부터 공부하고 있습니다. 덕분에 평소에 잘 모르고 사용하던 transition과 transform의 개념에 대해 더 잘 알게 되었습니다. 하지만 유독 3차원 변환 함수 자체가 많이 낯설었습니다. 2차원 변환 함수 중 하나인 translate는 여러 번 사용해 봤어도, 3차원 변환은 사용해 본 적이 없었기 때문입니다. 그래서 익숙해질 겸, 연습 겸 조금씩 두드려보다가 문득 생각나는 것이 있어서 만들어봤습니다. ★transform 개념 빠른 정리☆ 더보기 transform transform: 변환함수1 변환함수2 변환함수3 .... ; 요소의 변환 효과를 줄 수 있는 CSS 속성입니다. transform 변환 함수들 1. 2D 변환 함수 translate(x, y) ..