JAN's History

이번 글에서는 JavaScript에서 DOM 요소에 접근할 때 마주치게되는 HTMLCollection과 Host Environment(호스트환경)에 대해 알아보겠습니다!🎯 1. HTMLCollection이란?HTMLCollection은 DOM API에서 제공하는 유사 배열 객체로, HTML 문서에서 여러 개의 요소를 선택할 때 사용됩니다. 주로 getElementsByTagName(), getElementsByClassName() 같은 메서드로 반환되며, HTML 요소들의 컬렉션을 담고 있습니다.특징:HTMLCollection은 실시간(live)입니다. 즉, DOM이 변경될 때, HTMLCollection도 그 변화를 즉시 반영합니다.배열과 비슷하게 생겼지만, 배열이 아닙니다. 배열의 메서드(forEa..

안녕하세요! 이번에는 JavaScript에서 DOM(Document Object Model)에 접근하는 방법에 document 객체에 대해 알아보겠습니다 :) DOM은 웹 페이지의 구조를 자바스크립트로 조작할 수 있도록 만드는 아주 중요한 개념인데요, 정적인 HTML에 동적인 JavaScript를 더해 더 풍부한 웹 페이지를 만들 수 있도록 하는 과정이라고 생각하면 더 이해가 쉬우실거에요 ㅎㅎ 예제를 통해 어떻게 직접 동작하는지 살펴보겠습니다!🙌🏼🎯 1. DOM이란?DOM은 웹 페이지의 구조를 자바스크립트가 이해할 수 있도록 문서의 각 요소를 객체로 표현한 구조입니다. HTML 문서의 모든 태그, 속성, 텍스트 등을 객체로 변환하여 JavaScript로 쉽게 접근하고 변경할 수 있게 해주는 역할을 ..

안녕하세요 여러분! 🙌🏼오늘은 jQuery를 활용해 DOM 요소에 데이터를 저장하고 조작하는 방법을 알아보겠습니다. 특히 .data(), .attr(), .prop() 메서드를 중심으로 설명해볼텐데요. 저도 코드를 짜면서 어떻게 데이터를 저장하는 것이 좋을지 고민이 많았는데 이번 기회에 한번 정리해보려고 합니다 ㅎㅎ🎯 1. .data() 메서드먼저 .data() 메서드는 임시 데이터를 요소에 저장하고 불러오기 위한 jQuery 메서드입니다! jQuery의 데이터 캐시라는 특별한 저장소를 이용하기 때문에 성능도 좋은 편이에요.//데이터 설정$('.element').data('key', 'value');//데이터 가져오기const value = $('.element').data('key');consol..

자바스크립트에서 비동기 프로그래밍은 사용자 경험을 향상시키는 중요한 개념이에요. 특히, 비동기 작업을 처리하는 방식이 발전하면서 더 나은 코드 작성이 가능해졌죠. 이번 포스팅에서는 콜백 지옥에서 시작해 프로미스, 그리고 async/await까지의 변화를 자세히 살펴보겠습니다!👍🎯 1. 콜백 지옥 (Callback Hell)콜백 지옥은 비동기 함수가 계속 중첩되면서 코드의 가독성이 떨어지고, 유지 보수가 어려워지는 문제를 말하는데요. 여러 단계의 비동기 작업이 서로 의존하게 되면 다음처럼 중첩된 콜백 함수로 이어지게 됩니다.function fetchData(callback) { setTimeout(() => { const data = "데이터"; callback(data); }, 1000..

자바스크립트에서 동기와 비동기 프로그래밍을 이해하는 것은 매우 중요한데요! 특히 자바스크립트는 단일 스레드로 동작하기 때문에, 비동기 처리를 통해 효율적으로 작업을 처리하는 것이 핵심입니다. 이제 차근차근 비동기 프로그래밍을 알아볼까요?📌 동기 프로그래밍이란?동기 프로그래밍(Synchronous Programming)은 각 작업이 순차적으로 실행되는 방식이에요. 즉, 한 작업이 끝나기 전까지는 다른 작업을 수행하지 않고 기다리는 것이죠.예시 이미지에서도 동기 프로그래밍은 주문 순서대로 순차적으로 음료가 나오는 것을 알 수 있죠? 동기 프로그래밍 예시function longWork() { const now = new Date(); const millseconds = now.getTime(); // 현..

클로저는 하위함수(내부 함수)가 상위 함수보다 더 오래 살아남아, 상위 함수 변수에 접근할 수 있는 것을 의미해요. 일반적으로 함수가 실행되고 나면 그 함수의 Execution Context는 사라지지만, 클로저가 발생하면 상위 함수의 변수나 상태가 메모리에 유지되어 내부 함수에서 계속 사용할 수 있게 됩니다!✨ 이해하기 쉽도록 차근차근 예시를 통해 설명해볼게요!📌 간단한 클로저 예시function getNumber() { var number = 5; // 상위 함수의 변수 function innerGetNumber() { // 하위 함수(내부 함수) return number; // 상위 함수의 변수에 접근 } return innerGetNumber;}const runner = getNum..

이번에는 자바스크립트의 실행 컨텍스트(Excution Context)와 스택에 대해 알아보려고 합니다. 이 개념은 자바스크립트가 코드를 어떻게 읽고 실행하는지를 이해하는 데 매우 중요하답니다 😊두 가지 HTML 코드를 실행했을 때, 자바스크립트의 실행 흐름과 생성 단계(Creation Phase)와 실행 단계(Excution Phase)의 차이점을 예제로 설명해보겠습니다!📌 1. 예제 코드 1: Execution Context Stack의 원리📑 코드 분석 - Execution Context의 생성과 실행Creation Phase(생성 단계): 자바스크립트는 코드를 읽을 때 먼저 '생성 단계'를 거쳐요. 이 단계에서 선언된 모든 함수(one, two, three)와 변수들이 메모리에 올라갑니다. 함..

이번에는 this 키워드에 대해 알아볼 거예요! this는 자바스크립트에서 조금 헷갈릴 수 있는 개념 중 하나죠. 어떻게 this가 결정되는지, 그리고 원하는 대로 this를 바꾸는 방법까지 자세히 살펴보도록 해요. 🙌🎯 1. this 키워드란?자바스크립트는 렉시컬 스코프(Lexical Scope)를 사용하기 때문에 일반적으로 상위 스코프는 정의 시점에 평가가 돼요. 하지만! this 키워드는 그렇지 않아요. 객체가 생성되는 시점에 this가 결정됩니다. 이 말은 객체나 함수가 언제 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라진다는 뜻이에요.📝 예제 코드: this의 기본 동작아래 코드에서 this는 pome 객체를 가리키고 있어요. 이처럼 메서드 내에서 this는 해당 메서드를 호출한..