Alex Han: Coding Explorer

Web API는 브라우저가 제공하는 객체, 메서드, 속성들의 집합으로, JavaScript가 웹 브라우저와 상호작용할 수 있게 해준다. • DOM 조작, 이벤트 처리, 네트워크 요청, 멀티미디어 재생 등 다양한 작업을 수행할 수 있다. • JavaScript의 핵심 기능은 아니지만 브라우저 환경에서 사용할 수 있는 확장된 기능이다. DOM이란 무엇인가? [HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)웹 브라우저는 사용자가 입력한 URL을 기반으로 웹 페이지를 요청하고, 받아온 데이터를 해석하여 화면에 렌더링하는 역할을 한다.이 과정에서 파싱(Parsing), 렌더링(Rendering), DOM(Document Object Model)jyhan0625.ti..

0. 먼저 읽어보기비동기 간단히 알아보기 [JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)JavaScript는 싱글 스레드(Single Thread) 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있다. 그러나 비동기(Asynchronous) 처리를 통해 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 실행하jyhan0625.tistory.com 비동기의 작동원리에 대해 자세히 알아보기 [JS] 비동기가 가장 아랫단에서 어떻게 작동하는가?0. 먼저 읽어보기비동기에 대해 막연하게 이해해보기 [JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)JavaScript는 싱글 스레드(Single Thread) 기반의 언어로, 한..

0. 먼저 읽어보기비동기에 대해 막연하게 이해해보기 [JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)JavaScript는 싱글 스레드(Single Thread) 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있다. 그러나 비동기(Asynchronous) 처리를 통해 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 실행하jyhan0625.tistory.com 자바스크립트의 기본 구조 이해해보기 [JS] Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more원문 Understanding Javascript Function Executions — Call Sta..

웹사이트를 이용할 때 댓글을 달거나 좋아요를 누르면 페이지가 새로고침되지 않고도 바로 반영되는 것을 본 적이 있을 것이다. 이는 마치 마법처럼 느껴질 수 있지만, 사실 그 뒤에는 AJAX와 브라우저 렌더링의 강력한 메커니즘이 숨어 있다.   AJAX는 어떻게 동작하는가?AJAX(Asynchronous JavaScript and XML)는 서버와 비동기적으로 데이터를 주고받는 기술이다. AJAX가 등장하기 전에는 새로운 데이터를 받아오기 위해 페이지 전체를 다시 로드해야 했다. 예를 들어 댓글을 달 때마다 페이지가 새로고침되면서 작성 중이던 내용이 사라지거나 스크롤 위치가 초기화되었다. 그러나 AJAX 덕분에 페이지 일부만 수정하고 새로고침 없이 데이터를 업데이트할 수 있게 되었다.  AJAX가 동적으로 ..

Ajax는 웹 페이지를 동적으로 업데이트하기 위한 기술로, 비동기식으로 서버와 데이터를 주고받을 수 있도록 해준다. Ajax의 주요 목적은 웹 페이지를 전체적으로 새로 고침하지 않고도 부분적인 업데이트를 가능하게 하여, 사용자 경험을 향상시키는 것이다. Ajax의 주요 요소 1. Asynchronous (비동기성): • 웹 페이지와 서버 간의 데이터 전송이 비동기적으로 이루어지므로, 서버에서 응답을 기다리는 동안 웹 페이지는 사용자와 상호작용을 계속할 수 있다. 2. JavaScript: • Ajax 요청을 만들고, 서버로부터 받은 데이터를 처리하는 데 JavaScript를 사용한다. 3. XML (Extensible Markup Language): • 초기 Ajax에서는 XML 형식이 주로 사용되었지만..

JavaScript에서 이벤트(event)가 발생하면 해당 이벤트는 DOM 트리 구조를 따라 전파된다. 이때 이벤트가 전파되는 방식에는 캡처링(Capturing)과 버블링(Bubbling) 두 가지가 있다.   1. 이벤트 전파(Event Propagation)이벤트 전파는 다음과 같은 순서로 진행된다. 1) 캡처링 단계 (Capturing Phase) • 이벤트가 루트 요소에서 시작해서 이벤트 타깃(발생한 요소)까지 내려오는 단계 • 예를 들어, 클릭 이벤트가 에서 시작해 를 거쳐 까지 내려간다. • 위에서 아래로 내려오는 방식 2) 타깃 단계 (Target Phase) • 이벤트가 실제 타깃 요소에서 발생하는 단계 • 예를 들어, 을 클릭했다면 그 에서 이벤트가 실행된다. 3) 버블링 단계 (Bubb..

포커스(Focus)는 HTML 요소가 현재 키보드 입력을 받을 준비가 된 상태를 의미한다. 예를 들어, 텍스트 입력 창에 커서가 깜빡일 때나 버튼이 키보드로 선택되었을 때를 생각하면 된다.   언제 포커스가 발생할까? • 사용자가 마우스로 클릭했을 때 • Tab 키를 사용해 입력 필드나 버튼 등 포커스를 받을 수 있는 요소로 이동했을 때 • JavaScript에서 .focus() 메서드를 사용해 강제로 포커스를 부여했을 때   포커스가 가능한 요소일반적으로 다음과 같은 HTML 요소들이 포커스를 받을 수 있다.  • : 텍스트 입력, 체크박스, 라디오 버튼 등 • : 여러 줄 입력 필드 • : 버튼 • : 드롭다운 리스트 • tabindex 속성이 있는 요소: 기본적으로 포커스를 받을 수 없는 요소도 t..

JavaScript에서 이벤트(event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 다양한 사건을 의미한다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력, 페이지 로드 등이 모두 이벤트에 해당한다. 이러한 이벤트를 감지하고 적절히 반응함으로써 웹 페이지는 동적으로 작동할 수 있다.   1. Event Type (이벤트 타입)Event Type은 사용자의 행동이나 브라우저 상태 변화 등으로 인해 발생한 이벤트의 종류를 나타낸다. 올바른 이벤트 타입을 선택하면 사용자와의 상호작용을 보다 효과적으로 처리할 수 있다. 1) 마우스 이벤트(Mouse Event) • click: 마우스를 클릭할 때 발생한다. 버튼, 링크 등에서 주로 사용된다. • dblclick: 더블 클릭할 때 발생한다. • mou..

0. 먼저 읽어보기JavaScript에서 DOM(Documents Object Model)과 CSSOM(CSS Object Model)을 수정하는 방법에 대해 자세히 설명하겠습니다. DOM, CSSOM이란 무엇인가? [HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)웹 브라우저는 사용자가 입력한 URL을 기반으로 웹 페이지를 요청하고, 받아온 데이터를 해석하여 화면에 렌더링하는 역할을 한다.이 과정에서 파싱(Parsing), 렌더링(Rendering), DOM(Document Object Model)jyhan0625.tistory.com   1. DOM (Document Object Model)DOM은 HTML 문서 구조를 JavaScript 객체로 표현한 ..

window 객체는 브라우저 환경에서 최상위 전역 객체로, 웹 페이지를 제어할 수 있는 다양한 속성과 메서드를 제공한다. 전역에서 선언된 변수와 함수는 기본적으로 window 객체의 속성이 된다. 즉, JavaScript 코드에서 명시적으로 window를 사용하지 않더라도, 모든 전역 변수와 함수는 기본적으로 window 객체의 프로퍼티로 저장된다.   1. window 객체의 주요 역할  1. 전역 객체 역할JavaScript에서 전역 변수와 함수를 저장하는 컨테이너 역할을 한다. 즉, 모든 전역 변수와 함수는 window 객체의 속성으로 저장된다.var a = 10;console.log(window.a); // 10function greet() { console.log("Hello!");}windo..