JS - 점검 6(웹 페이지 렌더링 과정)

1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어진다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성한다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성한다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성한다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산한다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그린다. JavaScript와 HTML 파싱 JavaScript는 웹 브라우저에서 HTML 문서를 파싱하는 도..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 23.
• textsms

JS - 점검 5(Browser Object Model)

1. BOM이란JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델이다.BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있다.BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있다. 정리 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미합니다. 추가적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조는 최상위 객체는 window 객체와 그 하위 객체들로 이루어져 있습니다.2. Window Object 와 하위 객체들 Window Objec..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 23.
• textsms

JS - 점검 4(Document Object Model)

목차 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다. 1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다. HTML 웹 페이지 문서 입니다 위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저는 ..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 22.
• textsms

JS - 점검 2(객체와배열)

목차1. 객체에 대한 이해와 사용 객체란?프로토타입과 인스턴스프로토타입 : 객체의 속성과 메서드를 모아놓은 틀 같은 것인스턴스 : 프로토타입으로 찍어낸 객체프로토타입의 속성과 함수를 똑같이 사용객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)를 함꼐 묶어서 표현하는 자료구조 내장 객체 (Built-in Objects) 내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말한다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있다.Object: 모든 객체의 기본이 되는 객체. 다른 모든 객체는 이 객체를 상속 받음.Array: 배열을 다루는 ..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 19.
• textsms

JS - 점검 1(데이터 타입 및 연산)

목차1. 자료형에 대한 이해자료형이란 - 컴퓨터가 처리하는 자료의 형태자바스크립트 자료형의 특징느슨한 자료형 체크(weak datatype check)자바스크립트는 미리 변수의 자료형을 지정하지 않음변수를 지정하고 원하는 값을 할당만 하면 됨 숫자형정수 - 소수점이 없는 숫자 , 표현 방법에 따라 8진수, 10진수, 16진수실수 - 소수점이 있는 숫자, (! 자바스크립트에서는 정밀한 실수 계산을 못 함)부동소수점 방식으로 숫자를 표현하는 이진법의 한계 때문에 발생하는 문제입니다. 부동소수점 방식은 소수점 위치가 고정되어 있지 않고, 이진법으로 숫자를 표현하기 때문에 무한 소수의 경우 근사값으로 표현되어 오차가 발생할 수 있습니다.무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 18.
• textsms

JS - 사전 기반 지식

목차1. 기본 개념자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 스크립트 언어 중 하나이다. HTML, CSS와 함께 웹 프로그래밍을 할 수 있도록 고안되었으며, 다양한 용도로 사용된다.자바스크립트는 기본적으로 클라이언트 측에서 실행되는 스크립트 언어로, 웹 페이지를 동적으로 만들고, 사용자와 상호 작용하는 기능을 구현할 수 있다.예를 들어, HTML 요소의 속성 값을 변경하거나, 이벤트 핸들러를 등록 하여 사용자의 동작에 따라 새로운 기능을 수행하도록 할 수 있다. 또한, AJAX를 이용하여 서버와 비동기적으로 데이터를 주고받는 기능을 구현할 수도 있다.자바스크립트는 브라우저를 제어하는 데 주로 사용되지만, Node.js와 같은 서버 측 프레임워크를 이용하여 서버 측에서도 사용될 수 있다..

• format_list_bulleted JS/JavaScript 핵심
• · 2024. 7. 18.
• textsms