jQuery의 $(document).ready()와 window.onload 차이점 분석
자바스크립트 기반 웹 개발에서 특정 시점에 함수를 실행하기 위해 이벤트 훅(hook)을 사용한다. 대표적인 두 가지 방식으로는 순수 JavaScript의 window.onload와 jQuery의 $(document).ready()가 있다. 두 방법 모두 페이지 로딩과 관련되지만, 동작 타이밍과 사용성 측면에서 중요한 차이가 존재한다.
1. 실행 시점의 차이
window.onload는 문서 내 모든 리소스 — HTML ...
7월 10일 18:11에 게시됨
JavaScript DOM 노드 조작 기본 원리와 실제 적용
let nodeListToArray = Array.from(targetElement.childNodes);
ES6의 Array.from() 정적 메서드를 사용하면 더 간결하게 변환할 수 있습니다. let nodeListToArray = Array.from(targetElement.childNodes);
모든 노드는 parentNode 속성을 가지며, 이는 DOM 트리에서 부모 요소를 가리킵니다. childNodes의 모든 노드는 동일한 부모 요소를 공유하므로, parentNode 속 ...
7월 6일 06:44에 게시됨
트리(Tree) 자료구조의 기본 개념과 활용
자료구조는 프로그램의 효율성과 직결되는 중요한 요소입니다. 다양한 자료구조 중에서도 트리(Tree)는 계층적 데이터를 효과적으로 표현하는 비선형 자료구조의 대표적인 예시입니다. 특히 웹 프론트엔드 개발에서 자주 접하는 DOM(Document Object Model)이 트리의 한 형태로 구현되어 있어, 트리에 대한 이해는 웹 개발자에게 필수적입니다. 이 글에서는 트리 ...
7월 5일 02:58에 게시됨
고양이 블로그 만들기
내용 목록
시작 동기
구현 방법
주요 기능 및 구현
향후 개선 사항
시작 동기
우리 집에 있는 작은 주황색 고양이는 성격이 좋아서, 그 고양이의 일상을 기록하는 간단한 블로그를 만들어 보기로 했습니다. 이를 통해 고양이와 함께하는 생활과 느낌을 기록하고자 합니다.
데모: https://unuliha.github.io/zhongqiu/index.html
소스코드: https://gitee.com/unuliha/b ...
6월 21일 18:29에 게시됨
자바스크립트 핵심 문법과 DOM 모델 활용 가이드
1. 자바스크립트 개요
자바스크립트(JavaScript)는 웹 페이지의 동적인 데이터 검증과 상호작용을 위해 고안된 클라이언트 사이드 스크립트 언어입니다. 브라우저 엔진에 의해 해석되고 실행됩니다.
타입 시스템: 자바스크립트는 변수의 타입이 동적으로 결정되는 약타입(Weakly Typed) 언어인 반면, 자바(Java)는 강타입(Strongly Typed) 언어입니다.
주요 특징: ...
6월 12일 16:02에 게시됨
prototype.js 개발 가이드
1. 프로그래밍 가이드
1.1. prototype.js란?
prototype.js는 샘 스테펜슨이 개발한 자바스크립트 라이브러리로, 표준을 준수하는 고성능의 웹 애플리케이션 개발을 위한 도구입니다. 이 라이브러리는 전통적인 클라이언트 측 기반의 인터랙티브 웹 어플리케이션 구축에 유용하며, 특히 웹 2.0 기술의 적용을 용이하게 합니다.
1.2. 관련 문서
고급 자바스크립 ...
6월 8일 17:51에 게시됨
웹사이트의 동작 원리와 기본 웹 보안 취약점 분석
웹 애플리케이션의 취약점을 분석하고 활용하기 위해서는 웹사이트가 구축되고 작동하는 기본 원리를 이해하는 것이 필수적입니다. 이 글에서는 클라이언트와 서버의 상호작용, 프론트엔드 기술 스택, 그리고 기본적인 웹 보안 취약점에 대해 다룹니다.
웹사이트의 요청 및 응답 구조
사용자가 웹 브라우저를 통해 특정 URL에 접속하면, 브라우저는 해당 페이지의 리소스 ...
6월 7일 16:22에 게시됨
JavaScript 핵심 개념과 실무 활용 요약
기본 문법
연산자
!와 !!: !는 부정 연산자, !!는 값을 불리언으로 변환합니다.
==와 ===: ==는 타입 변환 후 비교, ===는 타입과 값 모두 비교합니다.
객체와 프로토타입
모든 함수는 자동으로 prototype 속성을 가지며, 이는 프로토타입 객체를 가리킵니다. 프로토타입 객체는 기본적으로 constructor 속성을 가지고 있으며, 이는 생성자 함수를 가리킵니다. new 키워 ...
6월 4일 16:29에 게시됨
순수 JavaScript로 구현하는 AJAX 기반 지역 연동 선택 기능
데이터베이스 설계부터 프론트엔드 라이브러리 구현까지, jQuery 없이 순수 JavaScript로 AJAX 요청을 처리하는 방법을 살펴봅니다. 특히 상위 지역 선택 시 하위 지역이 자동으로 갱신되는 연동 선택 기능을 중심으로 설명합니다.
데이터베이스 스키마 설계
계층형 지역 데이터를 저장하기 위해 자기 참조 관계를 가진 테이블을 설계합니다. 상위 지역 코드(pcode)가 NU ...
6월 1일 10:32에 게시됨
웹 브라우저 DOM 에서의 노드 식별과 계층 구조 탐색
웹 문서 객체 모델 (DOM) 에서 각 요소는 고유한 타입을 가지며, 이 정보는 주로 nodeType을 통해 확인이 가능합니다. 표준 규격상 여러 가지 상수 (Entity Reference, Processing Instruction 등) 가 정의되어 있지만, 실제 브라우저 환경에서는 가장 빈번하게 사용되는 것은 'Element' 및 'Text' 형식의 노드입니다.
속성 접근과 데이터 저장 방식
개별 노드의 ...
5월 30일 02:00에 게시됨