Jerry

HTML을 렌더링하는 동안 JavaScript가 문단 2 - 이 경우  - defer: HTML 파싱이 끝난 후, 순서대로 실행 → 항상 script1.js → script2.js. - async: 다운로드가 끝난 순서대로 실행 → script2.js가 먼저 실행될 수도 있음.  속성HTML 파싱 중 JS 다운로드HTML 파싱 중단 여부JS 실행 시점실행 순서 보장 없음OO (동기 실행)파싱 중단 후 즉시OasyncOX다운로드 완료 즉시XdeferOXHTML 파싱 완료 후O              렌더링 차단을 피하려면 어떻게 해야 하나요? 렌더링 차단(Render-blocking)은 HTML 파싱 중 JS나 CSS의 로딩/실행이 파싱을 멈추는 현상입니다. 이를 피하기 위해 JS와 CSS의 로딩을 비동기..

Q. null, undefined, undeclared, NaN에 대해 설명하시오        Answernull, undefined, undeclared, NaN은 모두 자바스크립트에서 값이 없거나 잘못된 값을 나타내는 경우에 사용됩니다.null은 개발자가 의도적으로 "값이 없음"을 표현할 때 사용하며, undefined는 변수가 선언되었으나 초기화되지 않았을 때 기본값이며, undeclared는 아예 선언되지 않은 변수를 참조할 때 발생하며, ReferenceError가 발생합니다. NaN은 수학 연산이 실패했을 때 나타나는 특수한 값으로, 자기 자신과 같지 않은 유일한 값입니다.                 자바스크립트에서는 null, undefined, undeclared, NaN이 서로 다른 의..

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하는 개념이다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되며, 실행 컨텍스트는 실행할 코드의 평가 및 실행에 필요한 정보를 담고 있다.         종류전역 실행 컨텍스트(Global Execution Context)- 코드가 실행될 때 가장 먼저 생성되는 컨텍스트.- this는 브라우저 환경에서는 window, Node.js에서는 global을 가리킨다.  함수 실행 컨텍스트(Function Execution Context)- 함수가 호출될 때마다 생성되며, 독립적인 실행 컨텍스트를 갖는다.- 함수 내부의 변수, arguments 객체 등이 포함됨.  Eval 실행 컨텍스트(Eval Execution Context)- eval() 함수가..

타입스크립트(TypeScript)는 JavaScript의 상위 집합(Superset)으로, 정적 타입 시스템을 제공하는 언어 - 컴파일 타임에서 타입 검사를 수행하여 런타임 오류를 줄이고, 코드의 안정성과 가독성을 높임- ES6+ 기능을 지원하며, 클래스, 인터페이스, 제네릭 등을 활용한 객체 지향적 프로그래밍이 가능 대표적인 ES6+ 기능- let / const: 블록 스코프 변수 선언 - 화살표 함수 (Arrow Function): function 키워드 없이 간결한 함수 표현 - 템플릿 리터럴 (Template Literal): 백틱(`)을 사용한 문자열 보간 - 디스트럭처링 (Destructuring): 객체, 배열의 구조 분해 할당 - 스프레드 연산자 (Spread Operator): ...를 ..

이벤트 전파(Event Propagation)는 JavaScript에서 이벤트가 DOM 요소 계층을 따라 이동하는 방식을 설명하는 개념으로, 캡처링(Capturing) 단계, 타깃(Target) 단계, 버블링(Bubbling) 단계의 3단계로 진행됩니다.      1. 이벤트 전파의 개념과 3단계- 이벤트가 발생하면 브라우저는 특정한 흐름을 따라 이벤트를 전달 1) 캡쳐링 단계 (Capturing Phase)- 최상위 window 객체에서 시작하여 이벤트 발생 요소까지 DOM 트리를 타고 내려감- addEventListener의 세 번째 인자로 true를 전달하면 이 단계에서 이벤트 핸들러가 실행addEventListener는 이벤트 리스너를 등록하는 메서드이며, 이벤트 핸들러(event handler)..

자바스크립트의 비동기 처리 방식과 이벤트 루프의 동작 원리를 이해하기 위해서는  마이크로태스크 큐(Microtask Queue)와 태스크 큐(Task Queue, 또는 Callback Queue)의 차이를 명확하게 이해하는 것이 중요합니다!       앞서, 아래와 같이 자바스크립트에 대해 표현했습니다.JavaScript는 싱글 스레드(Single-threaded) 기반의 논 블로킹(Non-blocking) 언어로, 이벤트 기반(Event-driven), 비동기 처리(Asynchronous processing), 동시성(Concurrency)을 지원하는 동적 프로그래밍 언어     자바스크립트는 싱글 스레드 기반의 비동기 이벤트 처리 모델을 사용하는데, 이 모델에서 비동기 코드의 실행 순서를 결정하는 핵..

JavaScript는 싱글 스레드(Single-threaded) 기반의 논 블로킹(Non-blocking) 언어로, 이벤트 기반(Event-driven), 비동기 처리(Asynchronous processing), 동시성(Concurrency)을 지원하는 동적 프로그래밍 언어  동적 프로그래밍 언어(Dynamic Programming Language)는 실행 시간(runtime)에 타입을 결정하거나, 변수나 객체의 속성 등을 변경할 수 있는 프로그래밍 언어를 말합니다.   1. 싱글 스레드 기반(Singled-threaded)- JS는 기본적으로 하나의 Call Stack을 사용하여 코드를 실행하는 싱글 스레드 언어- 이 말은 한 번에 하나의 작업만 실행할 수 있음을 의미- CPU를 활용하는 연산이 길어..

오늘은 여러 종류의 브라우저 저장소들을 알아보는 시간을 가지려고 한다.브라우저에서 데이터를 저장하고 관리하는 방법은 여러가지가 존재한다.각 방식은 용도와 동작 방식, 보안 특성 면에서 차이가 존재한다.       LocalStorage- HTML Web Storage API 의 한 부분  > 브라우저에서 키-값 쌍으로 데이터를 저장할 수 있는 API의 한 부분- 동일 출처(same-origin) 내에서 지속적인 데이터 저장소  > 프로토콜(https://), 도메인(www.example.com), 포트(80, 443 등)가 모두 동일한 경우  > https://www.example.com:443/page1와 https://www.example.com:443/page2는 동일 출처  > http://www..