JavaScript 53

Built in object

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

JavaScript 2026.02.14

BOM

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

JavaScript 2026.02.14

JS DOM

자바스크립트의 핵심이자 웹 페이지를 동적으로 변화시키는 마법의 지팡이, **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) 형태로 만든..

JavaScript 2026.02.14

DOM Selection and Manipulation

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

JavaScript 2026.02.14

DOM Event Handling

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

JavaScript 2026.02.14

DOM Node

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

JavaScript 2026.02.14

DOM class property

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

JavaScript 2026.02.14

HTML코드 라인 중 JS 를 배치하기 가장 좋은 자리

HTML코드 라인 중 JS 를 배치하기 가장 좋은 자리자바스크립트는 HTML 구조에서 다음과 같이 태그 바로 위에 삽입하는 것을 추천 합니다.(... 생략 ...)왜냐하면 화면 출력이 완료된 후에 자바스크립트가 실행되는 것이 좋기 때문입니다.화면 출력이 완료되지 않은 상태에서 자바스크립트를 실행하면 오류가 발생할 수도 있고 화면 로딩이 지연될 수도 있습니다.그러므로 자바스크립트는 HTML 구조에서 위와 같이 태그 바로 위에 삽입하는 것을 추천 합니다.출처https://wikidocs.net/162413 3-09 수정과 삭제 기능 추가하기* `[완성 소스]` : [https://github.com/pahkey/sbb3/tree/v3.09](https://github.com/pahkey/sbb3/tree..

JavaScript 2026.02.10

TypeScript 타입 미 선언시 발생하는 문제

아래 예제 코드에서 타입스크립트 프로젝트에서 타입을 선언하지 않거나,타입을 무시하고 any 타입을 남발하게 된다면다음과 같은 4가지 주요 문제가 발생할 수 있습니다.ex)'use client';import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap.bundle.min.js';import Link from 'next/link';import dataTexts from './data/dataText';interface DataText { main: string; subCaps1: string; sub1: string; subCaps2: string; sub2: string; subCaps3: string; ..

JavaScript 2026.01.14

JavaScript 코드를 TypeScript로 전환 수정 사항

JavaScript 코드를 TypeScript로 전환하기 위해 필요한 주요 수정 사항 핵심은 JavaScript 코드에 '타입 정보'를 추가하고, TypeScript 컴파일러가 해당 타입을 이해하고 검사할 수 있도록 환경을 설정하는 것입니다. 1. 파일 확장자 변경가장 기본적인 첫 단계는 JavaScript 파일의 확장자를 변경하는 것입니다. .js 파일을 .ts로 변경합니다. React를 사용하는 .jsx 파일은 .tsx로 변경합니다.이것만으로도 TypeScript 컴파일러는 해당 파일들을 TypeScript 코드로 인식하기 시작합니다. 2. TypeScript 설정 파일 (tsconfig.json) 추가 및 구성프로젝트 루트에 tsconfig.json 파일을 생성하여 TypeScript 컴파일러의 동..

JavaScript 2025.09.21