lshjju 님의 블로그

데이터를 담는 세 가지 방법인 var, let, const의 차이점과 특징에 대해 심도 있게 알아보겠습니다.자바스크립트의 발전 과정에 따라 변수를 선언하는 방식이 변해왔으며, 각 방식은 고유한 성격을 가지고 있습니다.1. var (전통적인 변수 선언 방식)ES6(2015년) 이전에 사용되던 유일한 변수 선언 방식입니다. 유연하지만 코드의 규모가 커지면 예측하기 어려운 오류를 발생시킬 위험이 큽니다.함수 레벨 스코프: 오직 함수 내부에서 선언되었을 때만 지역 변수로 인정됩니다. if나 for문 안에서 선언해도 밖에서 접근이 가능합니다.재선언 가능: 같은 이름의 변수를 여러 번 선언해도 에러가 나지 않아 실수로 값을 덮어쓸 수 있습니다.호이스팅: 변수 선언 전에도 호출이 가능하며 undefined를 반환합니..

프로그램의 안정성과 흐름을 결정짓는 **변수 스코프(Scope)**와 **호이스팅(Hoisting)**에 대해 알아보겠습니다.1. 변수 스코프 (Variable Scope)스코프란 '변수가 영향을 미치는 범위'를 의미합니다.변수가 어디에서 선언되었느냐에 따라 접근할 수 있는 영역이 달라집니다.① 전역 스코프 (Global Scope)함수나 블록 바깥에서 선언된 변수로, 코드 전체 어디서든 접근할 수 있습니다.② 지역 스코프 (Local Scope)특정 범위 안에서만 유효한 변수입니다.함수 스코프: 함수 내부에서 선언된 변수는 그 함수 안에서만 쓸 수 있습니다.블록 스코프: if, for, while 등 중괄호 { } 안에서 선언된 변수는 그 블록 안에서만 쓸 수 있습니다. (let, const만 해당)?..

자바스크립트의 심장이자 모든 데이터를 담는 그릇인 **객체(Object)**에 대해 알아보겠습니다.자바스크립트에서 객체는 실생활의 사물을 프로그래밍 언어로 표현한 것과 같습니다.📘 1. 자바스크립트 객체의 개념**객체(Object)**는 연관된 데이터(상태)와 기능(동작)을 하나로 묶어 관리하는 데이터 구조입니다.비유: '자동차'라는 객체가 있다면, 자동차의 색상이나 모델명은 데이터가 되고, 주행하거나 멈추는 기능은 동작이 됩니다.구조: 중괄호 { }를 사용하여 표현하며, 키(Key): 값(Value)의 쌍으로 이루어져 있습니다.📘 2. 프로퍼티(Property)와 메서드(Method)객체 내부를 구성하는 두 가지 핵심 요소입니다.프로퍼티(Property): 객체의 상태를 나타내는 값입니다. (변수와..

프로그래밍의 효율을 극대하게 높여주는 **내장 객체(Built-in Objects)**에 대해 알아보겠습니다.내장 객체는 자바스크립트 엔진에 이미 포함되어 있어, 우리가 별도의 설치 없이 언제든 꺼내 쓸 수 있는 강력한 도구 상자와 같습니다.📘 1. Array 객체 (배열을 다루는 객체)데이터를 순서대로 나열하여 저장하고 관리할 때 사용합니다. 자바스크립트에서 가장 빈번하게 사용되는 객체 중 하나입니다.주요 메서드:push() / pop(): 배열의 맨 뒤에 요소를 추가하거나 제거합니다.shift() / unshift(): 배열의 맨 앞에 요소를 추가하거나 제거합니다.forEach(): 배열의 각 요소를 순회하며 함수를 실행합니다.map(): 배열의 요소를 변경하여 새로운 배열을 만듭니다.filter(..

브라우저 객체 모델 (BOM)**브라우저 객체 모델(BOM, Browser Object Model)**은 자바스크립트가 웹 브라우저의 기능들에 접근하고 제어할 수 있게 도와주는 객체들의 집합입니다.문서 내용 자체를 다루는 DOM과 달리, BOM은 브라우저 창의 크기, 주소창의 경로, 방문 기록, 사용자의 기기 정보 등 브라우저 그 자체를 제어하는 데 집중합니다.1. window 객체BOM의 최상위 객체로, 브라우저 창 그 자체를 나타냅니다. 자바스크립트의 모든 전역 변수와 함수는 사실 이 window 객체의 프로퍼티와 메서드입니다.📋 window 객체의 주요 속성과 메서드구분이름설명속성innerWidth / innerHeight브라우저 창의 안쪽 너비와 높이 (뷰포트 크기)속성localStorage /..

자바스크립트의 핵심이자 웹 페이지를 동적으로 변화시키는 마법의 지팡이, **DOM(Document Object Model, 문서 객체 모델)**에 대해 알아보겠습니다. https://eyabc.github.io/Doc/dev/core-javascript/Browser_DOM_Tree.html#node-type https://velog.io/@moon_dev/JavaScript-DOM-%ED%8A%B8%EB%A6%AC%EC%99%80-%EB%85%B8%EB%93%9C%EC%9D%98-%EA%B0%9C%EB%85%90📘 DOM(문서 객체 모델)의 정의DOM은 웹 브라우저가 HTML 문서를 읽어 들인 후, 이를 자바스크립트와 같은 프로그래밍 언어가 이해하고 조작할 수 있도록 객체(Object) 형태로 만든..

웹 페이지의 특정 부분을 바꾸려면 먼저 그 부분을 '선택'해야 합니다.자바스크립트에서 DOM 요소에 접근하고 그 내용을 수정하는 대표적인 방법들을 정리해 드릴게요.📘 1. DOM 요소에 접근하기 (Selection)브라우저가 만든 DOM 트리에서 우리가 원하는 요소를 찾아내는 방법입니다.① getElement로 시작하는 방식 (전통적 방식)가장 빠르고 명확한 방법으로, 특정 조건에 맞는 요소를 직접 지칭합니다.getElementById('아이디'): HTML의 id 속성을 이용해 단 하나의 요소를 찾습니다.getElementsByClassName('클래스명'): 해당 클래스를 가진 모든 요소를 선택하여 리스트(HTMLCollection) 형태로 가져옵니다.getElementsByTagName('태그명'..

사용자의 동작에 반응하는 **이벤트 처리(Event Handling)**에 대해 알아보겠습니다.웹 페이지가 단순히 정보를 보여주는 것을 넘어 사용자와 상호작용하려면 이벤트 처리가 필수적입니다.📘 1. 이벤트 처리 방법 (addEventListener)과거에는 HTML 태그에 직접 onclick 등을 작성했지만, 현대 자바스크립트에서는 addEventListener() 함수를 사용하는 것이 표준입니다.기능: 특정 요소에 이벤트가 발생했을 때 실행할 함수를 등록합니다.구조: 요소.addEventListener('이벤트종류', 실행할함수);장점: 하나의 요소에 여러 개의 이벤트를 등록할 수 있고, HTML과 자바스크립트 코드를 깨끗하게 분리할 수 있습니다.📘 2. 이벤트 객체 (Event Object)이벤..

웹 페이지에 새로운 요소를 만들어 넣거나 필요 없는 부분을 제거하는 DOM 노드 추가 및 삭제 방법에 대해 알아보겠습니다.단순히 글자를 바꾸는 것을 넘어, 사용자의 동작에 따라 새로운 목록을 만들거나 창을 띄울 때 필수적인 기술입니다.📘 1. 노드 생성과 추가 (Creation & Insertion)새로운 HTML 요소를 화면에 나타나게 하려면 **'생성 → 설정 → 부착'**의 3단계를 거쳐야 합니다.[1단계] 요소 생성document.createElement()를 사용하여 메모리상에 새로운 태그 객체를 만듭니다.JavaScript const newLi = document.createElement('li'); // 태그 생성[2단계] 내용 및 속성 설정생성된 태그 안에 글자를 넣거나 클래스를 지정합..

웹 페이지의 스타일을 실시간으로 바꾸는 가장 세련된 방법인 class 속성 조작에 대해 알아보겠습니다.단순히 style 속성을 직접 바꾸는 것보다, 미리 CSS에 정의해둔 클래스를 붙였다 뗐다 하는 방식이 훨씬 효율적이고 관리가 쉽습니다.📘 1. classList 객체: 클래스 조작의 핵심현대 자바스크립트에서 클래스를 다룰 때는 해당 요소가 가진 클래스들의 목록을 담고 있는 classList 객체를 사용합니다.이 객체는 클래스를 추가, 삭제, 교체할 수 있는 아주 편리한 메서드들을 제공합니다.① 클래스 추가: add()특정 클래스를 요소에 추가합니다. 이미 클래스가 존재한다면 중복해서 추가하지 않습니다.JavaScript const box = document.querySelector('.box');bo..