바닐라 JS 로 프로그래밍을 하다보면 생기는 현상이 있다.이벤트를 다른 곳에 지정했는데 왜 상위요소가 지정되지?왜 하위요소도 전부..?event flow DOM 이벤트 흐름에는 캡처링, 타겟, 버블링 3가지가 있다. 캡처링은 이벤트가 하위요소로 전파되는 것이고타겟은 이벤트가 실제 타겟 요소에 전달되는 것그리고 버블링은 이벤트가 상위 요소로 전파되는 것이다. td 태그를 클릭하게 되면 이벤트가 최상위에서 시작해 아래로 전파. -> 캡처링이벤트가 타겟 요소에 도착해 실행 된다. -> 타겟그리고 다시 위로 전파된다. -> 버블링 위 그림의 3개의 phase 중에서 이벤트 핸들러가 실행되는 과정은 원래 target phase, bubbling phase 이나, 필요에 따라서 capture phase 와 targ..

요즘 TypeScript 가 선호된다. 왜 선호되고 장점은 무엇이고 단점은 없을까?javascript & typescript 자바스크립트는 동적 웹 페이지를 만들기 위해 고안된 언어이며 브라우저를 통해 실행된다.타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입을 제공하여 대규모 애플리케이션의 개발을 용이하게 한다. 자바스크립트와 타입스크립트는 웹 개발자에게 강력한 도구를 제공한다. 이들은 개발자가 빠르게, 안정적으로 유연하게 애플리케이션을 개발 할 수 있도록 도와준다. typescript  타입스크립트는 자바스크립트 기반의 정적 타입 문법을 추가한 언어이다.타입스크립트는 자바스크립트의 슈퍼 셋, 즉 상위 확장자로 자바스크립트 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 자바스크..

this 는 무엇일까?this this는 일반적으로 객체지향 언어에서 자기자신을 가리키는 객체, 즉 자기 자신과 굉장히 관련이 깊다.자바스크립트도 비슷할까?그렇지 않다. 자바스크립트가 조금 특별하기 때문인데,자바스크립트의 함수는 객체, 그 중에서도 일급 객체이다.일급 객체인 자바스크립트 함수는 변수나 데이터에 할당할 수 있고, 다른 함수에 인수 또는 반환값으로도 사용할 수 있다. // 1. 변수나 데이터에 저장const myFunc = func// 2. 함수의 인수로 전달function func1(func2) {}// 3. 함수의 반환값으로 사용function func1() { ... return func1} 이런 특징으로 자바스크립트의 함수는 다양한 환경에서 호출될 수 있다. func(), tes..

이전에 실행컨텍스트에 대해 다루었었다. https://muyeon95.tistory.com/317 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트 muyeon95.tistory.com 실행 컨텍스트 요약 자바스크립트 코드를 실행하는데 필요한 환경 정보, 즉 변수 객체, 스코프 체인, this 에 관한 내용 등을 담고 있는 객체이다. 실행 컨텍스트는 크게 전역 컨텍스트와 함수 컨텍스트 2가지로 나뉘며, 자바스크립트 코드 실행이 시작되면 무조건 콜 스택에 전역 컨텍스트가 먼저 쌓이고, 그 위로 함수를 호출할 때마다 함수 컨텍스트가 생성된다. 각 컨텍스트가 생성..

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고 this 값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 없는 특이한 현상이 발생한다. 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어 있다. 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드..

데이터 타입의 종류 데이터 타입은 크게 두가지가 존재한다. 기본형과 참조형이다. 기본형에는 숫자, 문자열, 불리언, null, undefined 등 이 있으며 ES6에서는 심볼이 추가되었다. 참조형은 객체가 있고, 배열, 함수, 날짜, 정규표현식 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 객체의 하위 분류에 속한다. 어떤 기준으로 기본형과 참조형을 구분할까? 일반적으로 기본형은 할당이나 연산 시 복제되고 참조형은 참조된다고 알려져 있다. 엄밀히 말하면 둘 모두 복제를 하긴한다. 다만 기본형은 값이 담긴 주소값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다르다. 기본형은 불변성을 띈다. 혼란스러울 수 있는데 기본형..