버블링 한 요소에 이벤트가 발생하면 최상단 조상 요소를 만날 때까지 이벤트가 위로 전파되는 현상 아래 예시코드를 실행하면 1번!, 2번! alert 창이 차례로 뜬다. 요소에 발생한 이벤트가 까지 위로 전파된 것이다. 클릭해 주세요. 이벤트가 전파되지 않게 막고 싶다면 stopPropagation을 활용할 수 있다. 클릭해 주세요. 캡쳐링 이벤트가 최상위 조상에서 시작해 아래로 전파되는 현상 우리가 자주 쓰는 addEventListener의 capture 옵션을 줘서 캡쳐링 단계에서 이벤트를 잡아낼 수 있다. removeEventListener로 이벤트를 지울 때도 capture 옵션을 똑같이 줘야 한다. // 캡쳐링 element.addEventListener("click", foo, true); //..
HTML (Hypertext Markup Language) 웹 페이지를 표시하기 위해 개발된 언어이다. 구조적인 문서를 만들 수 있는 방법을 제공한다. 브라우저는 HTML 문서를 해석해서 웹페이지로 보여주는 역할을 한다. DOCTYPE Hello World! HTML 최상단에 형태로 작성한다. 웹 브라우저에 해당 문서의 버전이나 타입을 알려주는 역할을 한다. DOCTYPE을 선언하지 않으면 브라우저는 쿼크모드로 문서를 해석한다. 💡 쿼크모드 - 브라우저 하위 호환성을 위해 존재하며 현대의 웹 표준과는 다르게 동작할 수 있다. : 문서의 제목을 정의 : 불러올 자바스크립트 파일을 정의 그 외 , 등 리소스를 연결한다. 문서의 메타데이터를 나타낸다. 인코딩 방식, 저자, 뷰포트 설정, 페이지 설명과 같은 정..
자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다. 스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다. 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가 예시 코드를 보자. const a = 1; const outer = function () { const b = 2; cons..
프로토타입의 정의 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 객체를 통해 객체의 메서드와 속성들을 상속한다. 자바스크립트에서는 객체를 생성할 때 자신의 부모 객체와 연결되는 링크를 가지게 된다. 프로토타입의 이해 프로토타입을 알아보기 위해 간단한 Person 생성자를 만들어보겠습니다. function Person(name, age) { this.name = name; this.age = age; this.sayHi = function () { console.log("HI"); }; } console.dir(Person); // 1 const person1 = new Person("heeji", 100); console.dir(person1); // 2 1의 결과 2의 결과 생성된 person1 ..
클로저의 정의 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합 - mdn 생성된 당시의 스코프체인을 기억하는 함수 함수가 선언될 때의 렉시컬 환경을 기억하는 함수 클로저의 이해 function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 함수만 봐서는 리턴된 displayName에서는 name이라는게 없기 때문에 에러가 날 것 같이 생겼다. 하지만 클로저가 형성되어 name 변수에 대한 데이터를 가지고 있기 때문에 에러가 나지 않는다. name이 있는 어휘적 환경에 대한 참조..
일급객체 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 일반적으로 적용 가능한 연산이라고 하면 다음과 같은 것들이 있다. 변수에 할당될 수 있다. 다른 함수의 인자로 전달될 수 있다. 함수에서 반환될 수 있다. 일급함수 함수를 일급 객체로 취급하는 것을 말한다. 즉, 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. 1. 변수에 값으로서 함수를 할당할 수 있다. const foo = () => { console.log("bar"); }; foo(); 예제를 보면 변수 foo에 함수를 할당한 다음 함수를 호출할 때 해당 변수를 사용하는 것을 볼 수 있다. 2. ..
SPA는 하나의 페이지를 사용하는 어플리케이션이다. 이 방식을 사용하는 것은 react, vue 등이 있습니다. 그럼 SPA가 무엇인지, 장점과 단점엔 무엇이 있는지 알아보겠습니다. Single Page Application (SPA)란? SPA와 MPA (Multi Page Application) 비교 SPA를 이해하기 위해서는 먼저 전통 방식인 MPA에 대해 알아볼 필요가 있습니다. MPA에서는 각 페이지마다 별도의 HTML이 존재합니다. 사용자가 페이지를 이동할 때마다 새로운 HTML을 서버로부터 요청하고 브라우저가 이를 파싱합니다. 장점: 페이지에 필요한 리소스들만 모아 관리하고 로드할 수 있어 효율적인 리소스 관리가 가능합니다. 단점: 느린 네트워크 환경에서는 사용자 경험이 떨어질 수 있습니다...
자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다. 그럼에도 동시에 여러 작업이 실행되는 것처럼 보이는 것은 비동기 방식을 사용하고 있기 때문입니다. 이런 비동기 처리는 이벤트 루프로 이루어집니다. 동시성? 동시성은 여러 작업이 겹쳐서 실행되는 것처럼 보이게 만드는 방식입니다. 병렬성은 실제로 여러 작업이 동시에 실행되는 것을 의미합니다. 자바스크립트 이벤트 루프는 동시성 방식입니다. 이벤트 루프 이벤트 루프는 Call Stack, Macro Task Queue (Task Queue), Micro Task Queue, render queue로 이루어져 있습니다. Call Stack 함수가 실행되어 실행 컨텍스트가 생성되고 콜스택에 쌓입니다. Macro Task Queu..
싱글스레드. 자바스크립트는 싱글 스레드 언어입니다. 스레드는 뭘까요? 스레드는 프로세스 내에서 실행되는 가장 작은 실행 단위를 말합니다. 💡 프로세스란? 프로그램이 메모리에 로드되어 CPU의 실행시간을 받은 것을 의미합니다. 싱글 스레드 방식은 스레드가 한 개란 뜻으로, 한 번에 하나의 작업만 수행할 수 있다는 특징을 가지고 있습니다. 그래서 하나의 작업이 오래 걸리면 다음 작업이 오래 대기하게 되어 전체 실행 시간이 길어지는 문제가 있습니다. 아래 예시에서 볼 수 있듯이 중간에 정말 많은 연산을 진행하는 코드가 존재한다면 end가 콘솔에 찍히기까지 시간이 오래걸릴 것입니다. console.log("start"); for (let i = 0; i < 10000000000000; i++) { // 많은 연..
repaint repaint는 레이아웃에 영향을 끼치지 않는 요소의 변화에 의해 발생하는 것입니다. DOM API를 통해 visibility를 변경하는 경우나 background-color 등이 변경되는 경우에 발생합니다. reflow (layout) reflow는 웹 페이지의 레이아웃을 다시 계산하고 요소의 크기와 위치를 다시 결정하는 것입니다. 이는 웹 페이지의 구조나 스타일이 변경 되었을 때 발생합니다. reflow가 발생하는 동작에는 어떤 것이 있을까요? 다음과 같은 것들이 있습니다. 윈도우의 크기가 변할 때 폰트가 변경될 때 컨텐츠가 변경될 때 JS에 의해 DOM이 동적으로 변화할 때 (노드 추가, 제거) 변화가 발생한 요소가 영향을 미치는 모든 노드 (자식, 부모, 조상)을 다시 계산하고 렌더..
오늘은 브라우저 주소창에 google.com을 치면 일어나는 일에 대해 공부해봤습니다. 네트워크 측면에서 바라봤을 때 일어나는 일에 중점을 두고 살펴보겠습니다. 1. 브라우저가 도메인 주소에 매치되는 IP 주소를 찾습니다. DNS 데이터는 브라우저와 인터넷의 다양한 위치에 캐싱됩니다. 브라우저의 고유한 캐시, 운영체제 캐시, 회사 네트워크 또는 ISP의 DNS 서버 캐시를 확인합니다. 만약 캐시에서 찾지 못했다면 DNS 서버가 해당 도메인을 호스팅하는 서버의 IP 주소를 찾습니다. 인터넷에 있는 여러 DNS 서버에 요청하여 검색될 때까지 재귀적 DNS 조회를 수행해 웹사이트에 대한 올바른 IP 주소를 찾을 때까지 진행됩니다. 💡 재귀적 DNS 조회란? 한 DNS 서버에서 다른 여러 DNS 서버와 통신하여..
critical rendering path란? 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변환하는 일련의 과정을 말한다. CRP를 최적화하면 첫 렌더링 시간을 향상할 수 있다. 브라우저는 서버로부터 데이터를 받아온 후, HTML을 파싱하여 DOM트리로 변환한다. 스타일시트, 스크립트, 임베드된 이미지 참조 등 외부 리소스에 대한 링크를 발견할 때마다 요청을 시작한다. 가져온 리소스가 처리될 때까지 나머지 HTML 파싱을 중단한다. 브라우저는 요청이 끝날 때까지 계속해서 HTML 구문 분석을 진행해 DOM을 구축하며 이 시점에서 CSSOM을 구성한다. DOM과 CSSOM이 완성되면 렌더트리를 구축해 표시되는 모든 컨텐츠와 스타일을 정한다. 렌더트리가 완성되면 모든 요소의 위치와 크기..
