게으른 나에게

NodeJS + Babel 개요NodeJS 등장 이후, 자바스크립트는 웹을 넘어 범용 언어로 발전그 중심엔 자바스크립트를 자바스크립트로 컴파일하는 기술(ex. Babel)이 있었고, 이로 인해 과거와 전혀 다른 방식의 JS가 탄생이는 TypeScript와도 유사한 구조를 가지며, 둘 다 최종적으로 JavaScript 코드로 변환된다는 공통점 존재JavaScript웹의 표준 스크립트 언어주로 클라이언트 측에서 작동폼 검사, 애니메이션, 이벤트 처리 등 대화형 기능 제공멀티스레딩/멀티프로세싱 미지원✅ 장점범용성: 대부분의 브라우저에서 실행 가능유연성: 동적 타이핑으로 자유로운 개발 가능풍부한 생태계: 라이브러리와 커뮤니티가 매우 큼❎ 단점타입 오류 발견 어려움: 동적 타이핑으로 인해 컴파일 시 오류 확인 어..

“이벤트 전파 방식은 이벤트가 발생한 요소에서부터 시작하여 부모 요소로 전파되는 과정을 이해하는 데 중요”  이벤트 버블링이벤트가 발생한 요소에서 시작 → 상위 부모 요소로 전파되는 방식가장 깊은 요소에서 시작하여 부모 요소를 거슬러 올라가며 각 요소에 할당된 이벤트 핸들러가 실행 특징FORM DIV P 요소를 클릭하면 다음 순서로 이벤트 핸들러가 실행 요소의 핸들러 실행부모 요소의 핸들러 실행최상위 요소의 핸들러 실행이러한 이벤트 전파 방식은 대부분의 이벤트에 적용이를 통해 상위 요소에서도 하위 요소에서 발생한 이벤트를 감지하고 처리 가능    이벤트 캡처링이벤트가 최상위 부모 요소에서 → 시작하여 이벤트가 발생한 요소까지 전파되는 방식이벤트가 상위 요소에서 하위 요소로 내려가며 각 요소..

this 용법함수의 호출 방식과 정의된 위치에 따라 참조하는 객체가 달라짐자신이 속한 객체를 가리키는 변수 사용 사례전역 범위에서의 this전역 컨텍스트에서 this는 전역 객체를 가리킴브라우저 환경에서는 window 객체가 이에 해당console.log(this === window); 일반 함수에서의 this함수 내부에서의 this는 호출 방식에 따라 달라짐비엄격 모드에서는 전역 객체엄격 모드에서는 undefinedfunction showThis() { console.log(this);}showThis(); // 비엄격 모드: window 객체, 엄격 모드: undefined 객체의 메서드에서의 this해당 메서드 내부의 this는 그 메서드가 속한 객체를 가리킴const obj = { value:..

클로저(Closure)클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합함수가 생성될 당시의 외부 변수를 기억하고, 그 함수가 실행될 때에도 해당 변수에 접근할 수 있는 기능‼️ 클로저 = 함수 + 렉시컬 스코프 원리자바스크립트에서는 함수가 생성될 때, 해당 함수는 자신이 선언된 위치의 렉시컬 환경을 기억이를 통해 내부 함수는 외부 함수의 변수에 접근 가능외부 함수의 실행이 종료된 이후에도 내부 함수가 해당 변수에 접근 가능특징상태 유지클로저를 사용하면 함수가 생성될 때의 환경을 기억하여, 호출될 때마다 이전 상태를 유지상태를 유지해야 하는 다양한 상황에서 유용하게 활용 됨정보 은닉클로저를 통해 외부에서 직접 접근할 수 없는 변수를 만들 수 있음데이터의 캡슐화와 은..

호이스팅호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언문이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 의미 var 키워드선언 단계가 호이스팅되어 스코프의 최상단으로 이동초기화는 호이스팅되지 않음, 선언 전에 해당 변수에 접근하면 undefined 값을 반환console.log(a); // 출력: undefinedvar a = 5;console.log(a); // 출력: 5→ 코드 내부적 해석var a;console.log(a); // 출력: undefineda = 5;console.log(a); // 출력: 5 let 및 const 키워드호이스팅되지만, 초기화 전에 해당 변수에 접근하면 ReferenceError가 발생이는 “Temporal Dead..

Reflow웹페이지 요소의 크기 또는 위치가 변할 때, 변경된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정크기 관련 속성: width, height, padding, margin, border-width위치 관련 속성: position, top, left레이아웃 관련 속성: display, flex폰트 관련 속성: font-size, font-weight리플로우는 보통 CPU를 활용해 연산 Repaint요소의 시각적 표현(색상, 테두리 등)이 변할 때, 변경된 시각적 표현을 다시 계산하여 렌더 트리에 반영하는 과정색상 관련 속성: color, background-color테두리 관련 속성: border-color, border-radius리페인트는 보통 GPU를 활용하여 처리 Reflow VS R..

브라우저 렌더링 원리웹 브라우저는 HTML, CSS, JavaScript가 조화를 이루며 작동.이처럼 각 요소가 올바르게 동작하도록 하려면, 브라우저가 이 코드들을 어떤 순서로 해석하고 처리하는지, 즉 렌더링 순서를 이해하는 것이 중요.이를 통해 더 최적화된 코드를 작성 가능 브라우저 렌더링 단계 개념HTML 파싱 및 DOM 트리 생성서버로부터 받은 HTML 파일을 브라우저가 해석(파싱)해야 함 → HTML 파일은 문자열로 이루어져 브라우저 이해 불가능파싱을 통해 HTML 파일 해석 → 페이지의 구조와 내용을 표현하는 DOM Tree로 변환하는 단계.이 트리는 각 HTML 태그와 텍스트 노드를 계층 구조로 나타냄.CSS 파싱 및 CSSOM 트리 생성HTML 문서에 포함되거나 외부에서 불러온 CSS 파일을..