콘요맘떼 개발일지

[참고!] 이벤트 위임에 대해서 공부하기 위해서는 이벤트 버블링과 이벤트 캡쳐링에 대한 이해가 필요하다. 만약 관련된 지식이 없다면 이전 포스트를 먼저 읽고 오길 바란다. 이벤트 위임 (Event Delegation) 이벤트 캡쳐링과 이벤트 버블링을 활용하면 이벤트 위임이라는 강력한 이벤트 핸들링 패턴을 활용할 수 있다. 이벤트 위임은 비슷한 방식으로 작동하는 여러 가지 엘레먼트들이 존재할 때 그들의 공통 조상에 이벤트 핸들러를 부여함으로써 편리하게 이벤트를 핸들링하는 방법이다. 각각의 element에 직접적으로 이벤트 핸들러를 부여하는 것이 더 직관적이고 단순한 방법 같은데 왜 굳이 조상 엘레먼트까지 올라가야할지에 대한 의문이 생길 수 있다. 그래서 예시를 가져와봤다. 위 코드에서 box들은 정상적으로..

이벤트 버블링 (Event Bubbling) 한 아이템에 이벤트가 발생하면 해당 이벤트는 해당 아이템부터 하나씩 그 부모 요소로, 결국은 body element까지 전달된다. 만약 해당 이벤트에 대해서 부모 element 역시 이벤트 핸들러가 존재한다면 하나의 이벤트에 대해서 여러가지 요소들에 대한 이벤트 핸들러가 동작할 수 있다. 이렇게 이벤트가 가장 깊은 곳의 element부터 부모 element로 쭉쭉 거슬러올라가는 방식을 이벤트 버블링이라고 한다. 참고로 모든 이벤트가 버블링되는 것은 아니며 focus 이벤트와 같이 버블링이 적용되지 않는 이벤트들도 존재한다. (물론 거의 모든 이벤트는 버블링이 적용된다.) 위의 예시에서 '아무말'이라는 텍스트를 클릭하면 click이라는 이벤트가 span, div..

실행 컨텍스트에 대한 이해가 없으면 클로저의 개념에 대한 이해가 어려울 수 있다. 만약 실행 컨텍스트에 대한 개념이 잡혀있지 않다면 실행 컨텍스트에 대한 공부를 먼저 진행하는 것을 권한다. 렉시컬 스코프 (Lexical Scope, 어휘적 범위) 자바스크립트는 렉시컬 스코프라는 변수 유효범위를 따른다. 렉시컬 스코프에서는 함수 혹은 변수의 유효범위가 선언된 위치를 기준으로 결정된다. 이와 반대로 호출된 시점을 기준으로 유효범위가 결정되는 방식을 Dynamic Scope라고 부른다. 우리가 자주 사용하는 C, C++, Java, Javascript 등의 언어들은 모두 Lexical Scope 방식을 따르며 Dynamic Scope를 따르는 언어들은 Perl, Bash Shell, APL과 같은 들어보기도 ..

자바스크립트에서 this는 자신을 호출한 객체가 담기는 속성이며 실행 컨텍스트 내부의 this 프로퍼티에 의해 그 값이 결정된다. this의 값이 결정되는 기준은 생각보다 복잡하다. 다음은 대표적인 경우들에 this의 값이 어떻게 적용되는지에 대한 예시들이다. 1) 단독적으로 사용된 this → window 객체 2) 일반 함수 안의 this → window 객체 3) 일반 중첩 함수의 this → window 객체 ※ 만약 this가 window 객체인 경우 this.변수명으로 전역 데이터에 접근할 수 있다. 4) 이벤트 리스터의 this → 이벤트를 발생시킨 객체 (target) 5) 객체의 메소드 안에 위치한 this → 메소드를 호출한 객체 6) 생성자 안의 this → 생성자 함수가 생성하는 객..

실행 컨텍스트 (Execution Context) - 자바스크립트 코드들이 실행되기 위한 환경을 의미한다. 여기서 말하는 자바스크립트는 크게 세 가지가 존재한다. 1) 전역 코드 : 전역 영역에 존재하는 코드 2) 함수 코드 : 함수 내부에 존재하는 코드 3) eval 코드 : eval 함수로 실행되는 코드 그러나 eval 함수는 해커가 악의적으로 이용할 가능성이 있기 때문에 사용이 지양된다. 따라서 실질적으로 사용되는 코드는 전역 코드와 함수 코드라고 보면 된다. - 실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트 두 종류가 있다. - 실행 컨텍스트는 코드를 형상화하고 구분하는 추상적인 개념이지만 자바스크립트 엔진에 의해 물리적 객체 형태로 관리되며 3가지 프로퍼티를 가진다. (1) 변수객체 (Vari..

자바스크립트는 '단일 스레드'기반 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있다. 보다 정확히 표현하자면 자바스크립트 엔진은 '단일 콜 스택'을 활용하고 하나의 메인 스레드를 가진다. 그러나 자바스크립트가 돌아가는 실제 환경(브라우저, Node 등)은 여러 개의 스레드가 사용된다. 하나의 콜 스택을 활용하는 자바스크립트 엔진과 여러 스레드를 활용하는 실제 구동 환경이 서로 연동될 수 있도록 해주는 것이 바로 '이벤트 루프'이다. (이벤트 루프는 앞서 언급한 단일 메인 스레드를 관리해준다.) 자바스크립트는 이벤트 루프를 통해 비동기 방식으로 동시성을 지원한다. 참고로 이벤트 루프는 자바스크립트 엔진에서 지원되는 것이 아니라 브라우저 혹은 NodeJS에 의해 제공된다. (NodeJS는 libuv라..

자바스크립트의 원시타입에는 boolean, string, number, null, undefined, Symbol 이렇게 총 6가지가 존재한다. 그 중 Symbol은 ES6에서 새롭게 추가된 원시타입으로 변경 불가능하며 다른 값과 중복되지 않은 고유한 값을 가진다. Symbol은 Symbol 생성 함수를 통해 만들어줄 수 있으며 선택적 인자로 문자열을 넣어줄 수 있다. 이 문자는 해당 Symbol을 표현하는 description으로 활용된다. Symbol의 description은 .description을 통해 다시 확인할 수 있다. ex) const a = Symbol( ); const b = Symbol("this is symbol for b") b.description => "this is symbo..

1. 자바스크립트는 객체 기반 스크립트 언어이다. 클래스를 이용하여 호출한 후에 객체가 생성되는 자바와 달리 자바스크립트는 클래스가 필요없이 호출과 동시에 객체가 생성된다. 2. HTML은 웹의 내용을 작성하고 CSS는 그를 꾸며주며 JS는 웹의 동작을 구현한다. 3. 자바스크립트는 주로 웹 브라우저에서 사용되나 Node.js와 같은 프레임워크를 활용하면 서버 프로그래밍과 같이 브라우저 밖에서도 사용이 가능하다. 4. 현재 컴퓨터나 스마트폰 등의 대부분 웹 브라우저에는 자바스크립트 인터프리터가 포함되어 있다. 5. 자바스크립트는 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다. 컴파일 언어 - 컴파일러를 통해 고급 언어를 기계어로 변환하는 언어 - 컴파일된 후의 기계어는 실행 속도가 빠르다. - ..