본문 바로가기
반응형
SMALL

javascript60

슬라이딩 윈도우 기법 슬라이딩 윈도우 기법은 배열이나 리스트의 요소를 한정된 크기의 '윈도우'나 '서브리스트'로 나누어 분석할 때 사용되는 알고리즘 패턴입니다. 이 기법은 주로 부분 배열의 최대합, 최소값, 평균 등을 효율적으로 계산할 때 사용됩니다.슬라이딩 윈도우의 기본 아이디어슬라이딩 윈도우 기법의 핵심은 윈도우(부분 배열)가 데이터 구조를 통해 일정한 범위를 유지하며 입력 데이터를 순차적으로 스캔한다는 것입니다. 윈도우의 크기는 고정될 수도 있고 가변적일 수도 있으며, 윈도우가 한 위치에서 다음 위치로 이동할 때 일부 데이터는 윈도우에서 제외되고 새로운 데이터가 포함됩니다.예시: 최대합 찾기문제: 주어진 배열에서 크기가 **k**인 연속 부분 배열의 최대 합을 찾아라.예를 들어, 배열 **arr = [1, -2, 3, .. 2024. 5. 13.
완전탐색(Brute-Force)과 탐욕법(Greedy Approach) 완전탐색(Brute-Force)과 탐욕법(Greedy Approach)은 모두 최적해를 찾기 위한 알고리즘 기법입니다. 하지만 그 접근 방식과 해결 과정에서 차이가 있습니다. 완전탐색(Brute-Force) 완전탐색은 가능한 모든 경우의 수를 체계적으로 열거하고 검사하여 최적해를 찾는 방법입니다. 즉, 문제의 모든 가능한 해를 생성한 후 그 중에서 가장 좋은 해를 선택합니다. 이 방법은 간단하고 구현하기 쉽지만, 문제의 크기가 커질수록 계산 시간이 기하급수적으로 증가하는 단점이 있습니다. 예시: 주어진 배열에서 두 수의 합이 목표 값과 같은 쌍을 찾는 문제 function findSum(arr, target) { for (let i = 0; i < arr.length; i++) { for (let j =.. 2024. 4. 18.
indexOf() indexOf()는 JavaScript의 내장 문자열 메서드 중 하나입니다. 문자열에서 특정 문자열이 처음으로 나타나는 위치의 인덱스를 반환합니다. 찾는 문자열이 없으면 -1을 반환합니다. 구문: string.indexOf(searchValue, fromIndex) searchValue: 문자열에서 검색할 문자열입니다. fromIndex (선택사항): 검색을 시작할 위치의 인덱스입니다. 기본값은 0입니다. 예시: let str = "Hello world, welcome to the universe."; console.log(str.indexOf("welcome"));// 14 (인덱스 14부터 "welcome"이 시작) console.log(str.indexOf("Hello"));// 0 (인덱스 0부터.. 2024. 4. 10.
startsWith() startsWith() 메서드는 JavaScript에 내장된 문자열 메서드입니다. 문자열이 특정 문자열로 시작하는지 여부를 판별하여 true 또는 false를 반환합니다. 구문: str.startsWith(searchString, position) searchString: str의 시작 부분에서 검색할 문자열입니다. position (선택사항): 검색을 시작할 str의 위치입니다. 기본값은 0입니다. 예시: let str = "안녕하세요 세상아"; // "안녕"으로 시작하는가? console.log(str.startsWith("안녕"));// true// "세상"으로 시작하는가? (대소문자 구분) console.log(str.startsWith("세상"));// false// 위치 6부터 "세상"으로 시.. 2024. 4. 10.
for ...in for...in 문은 객체의 열거 가능한 속성(property)에 대해 반복하는 데 사용됩니다. 배열에서도 사용할 수 있지만, 배열에는 for...of 문을 사용하는 것이 더 권장됩니다. 구문 for (variable in object) { // 코드 블록 } variable: 각 반복에서 다음 속성 이름(키)이 할당되는 변수 object: 반복되는 객체 예시 객체 반복 const obj = { name: 'John', age: 30, city: 'New York' }; for (const prop in obj) { console.log(`${prop}: ${obj[prop]}`); // "name: John", "age: 30", "city: New York" } 배열 반복 (권장하지 않음) const.. 2024. 4. 10.
includes() includes() 메서드는 문자열 또는 배열에서 특정 값이 포함되어 있는지를 확인하는 데 사용됩니다. 이 메서드는 부울린(boolean) 값을 반환합니다. 문자열에서 사용 const str = 'Hello, World!'; console.log(str.includes('Hello'));// true console.log(str.includes('hello'));// false (대소문자 구분) console.log(str.includes('World'));// true console.log(str.includes('world'));// false (대소문자 구분) console.log(str.includes('!'));// true 배열에서 사용 const arr = [1, 2, 3, 4, 5]; co.. 2024. 4. 10.
for...of for...of 문은 ES6(ECMAScript 2015)에서 도입된 반복문 구문입니다. 이터러블(iterable) 객체(배열, 문자열, Map, Set 등)에서 값을 가져와 반복할 때 사용됩니다. 구문 for (variable of iterable) { // 코드 블록 } variable: 각 반복에서 다음 값이 할당되는 변수 iterable: 반복되는 이터러블 객체(Array, Map, Set, String, TypedArray, arguments 객체 등) 예시 배열 반복 const arr = [10, 20, 30, 40]; for (const value of arr) { console.log(value);// 10, 20, 30, 40 } 문자열 반복 const str = 'hello'; for .. 2024. 4. 10.
배열에서 배열 빼기 배열에서 배열을 빼는 연산은 자바스크립트에서 직접적으로 지원되지 않지만, 다음과 같은 방법으로 구현할 수 있습니다. filter() 메서드와 includes() 메서드 사용 const arr1 = [1, 2, 3, 4, 5]; const arr2 = [3, 4]; const result = arr1.filter(item => !arr2.includes(item));// [1, 2, 5] arr1에서 arr2에 포함된 요소를 제외한 나머지 요소들로 새로운 배열을 만듭니다. Set을 이용한 방법 const arr1 = [1, 2, 3, 4, 5]; const arr2 = [3, 4]; const set1 = new Set(arr1); const set2 = new Set(arr2); const result .. 2024. 4. 10.
localeCompare localeCompare 메소드는 문자열이 다른 문자열 앞에, 뒤에, 아니면 같은 위치에 오는지를 숫자로 반환하는 String 객체의 메소드입니다. 이 메소드는 대소문자 구분, 악센트, 기타 문자열 비교에서 로케일(언어 및 지역 설정)을 고려한 정렬 순서를 제공합니다. 기본적으로 **localeCompare**는 호출하는 문자열이 비교 대상 문자열보다 알파벳상 뒤에 오면 양의 정수, 앞에 오면 음의 정수, 같은 경우에는 0을 반환합니다. 이 메소드는 비교할 때 로케일의 정렬 규칙을 사용하여, 다양한 언어와 스크립트에서 문자열을 올바르게 정렬할 수 있도록 돕습니다. 사용법 const returnValue = string1.localeCompare(string2); **string1**은 기준 문자열입니다... 2024. 4. 3.
후기 책이 1000페이지가량 되다보니 기초부터 깊은 내용까지 상세하게 잘 알려주는 것이 좋았다 빠르게 훑어보았는데 나중에 시간이 되면 책 제목과 같이 Deep Dive를 해봐야 이 책의 진가를 제대로 끌어 올릴 수 있을 듯 함 이런 저런 책 여러권보다는 기초를 떼는데는 훑어보더라도 이 책만한 게 없다고 생각함 추천합니다! 2024. 3. 9.
객체 객체는 자바스크립트의 기본 데이터 구조입니다. 다른 언어에서는 이런 객체를 해시 테이블, 맵, 레코드, 구조체, 연관 배열, 딕셔너리, dict (더글라스 크락포드가 파이썬을 싫어하는 것 같기도 합니다.) 라고 부르며, 자바스크립트에서는 두개의 빈값, 즉 null 과 undefined를 제외한 모든 것을 객체로 취급합니다. typeof {}; // "object" typeof []; // "object" (배열도 객체로 취급됨) typeof "Hello"; // "string" typeof 42; // "number" typeof true; // "boolean" typeof function() {}; // "function" typeof null; // "object" (특이한 케이스) typeof u.. 2024. 3. 9.
배열의 순수 함수, 비순수 함수 배열이 0부터 시작하는 관습은 프로그래밍 언어와 컴퓨터 과학의 역사에서 깊은 뿌리를 가지고 있습니다. 이 관습은 여러 이유와 장점을 기반으로 합니다: 역사적 배경 C 언어의 영향: 배열이 0부터 시작하는 관습은 주로 C 언어의 설계에서 비롯되었습니다. C 언어는 현대 프로그래밍 언어에 지대한 영향을 미쳤으며, C에서 배열의 인덱스는 배열의 시작 주소로부터의 상대적 위치를 나타냅니다. 첫 번째 요소가 시작 주소에 있기 때문에 0으로 인덱싱하는 것이 자연스럽습니다. 기술적 이유 포인터 산술과의 호환성: C 언어와 같이 포인터를 사용하는 언어에서는, 포인터 산술을 사용해 배열을 다룹니다. 배열 이름은 배열의 첫 번째 요소를 가리키는 포인터로 해석될 수 있으며, 배열의 첫 번째 요소에 접근하기 위해 포인터에 0.. 2024. 3. 5.
불(boolean) 타입 자바스크립트에서 boolean 타입은 논리적 값을 표현하는데 사용되며, **true**와 false 두 가지 값만을 가질 수 있습니다. 이는 조건문, 제어 흐름, 논리 연산 등에서 중요한 역할을 합니다. boolean 타입은 간단하지만, 자바스크립트에서 데이터의 논리적 상태를 표현하고, 프로그램의 결정을 내리는 데 필수적입니다. Boolean 타입의 사용 boolean 값은 직접 할당할 수 있으며, 논리 연산자 (&&, ||, !)와 함께 사용되어 복잡한 논리 조건을 구성할 수 있습니다. 또한, 비교 연산자 (==, ===, !=, !==, , =)의 결과도 boolean 값입니다. let isReady = true; // 직접 할당 let isFinished = false; if (isReady) { .. 2024. 3. 5.
자바스크립트에서의 큰 유리수 자바스크립트에서 큰 유리수, 즉 큰 분수를 정확하게 다루려면 표준 내장 객체와 타입으로는 부족합니다. 자바스크립트의 Number 타입은 IEEE 754 부동소수점 숫자를 사용하며, 이는 유리수를 정확히 표현하는 데 한계가 있습니다. 특히, 정밀도가 중요한 금융 계산이나 과학 계산에서는 이러한 부동소수점 숫자로 인해 발생하는 정밀도 손실을 피해야 할 필요가 있습니다. 큰 유리수를 정확하게 다루기 위해선, 분수의 형태를 유지하며 분자와 분모를 각각 정확하게 표현할 수 있는 방법이 필요합니다. 이를 위해, 자바스크립트에서는 다음과 같은 접근 방법을 고려할 수 있습니다: BigInt를 사용한 접근 BigInt 타입을 사용하면 매우 큰 정수를 정확하게 표현할 수 있습니다. 유리수를 다룰 때, 분자와 분모를 각각 .. 2024. 3. 5.
큰 부동소수점 자바스크립트에서 큰 부동소수점 수를 다루는 것은 Number 타입의 특성과 한계 때문에 주의가 필요합니다. 자바스크립트의 Number 타입은 IEEE 754 표준에 따라 64비트 부동소수점 형태로 숫자를 표현합니다. 이 형식은 약 ±5 x 10^(-324)에서 ±1.7976931348623157 x 10^(308) 사이의 수를 표현할 수 있으며, 정밀도는 최대 53비트의 유효 숫자(정수 부분 포함)를 가집니다. 큰 부동소수점 수를 다룰 때의 주요 고려 사항은 다음과 같습니다: 정밀도 손실: 큰 숫자를 사용할 때 정밀도 손실이 발생할 수 있습니다. IEEE 754 형식에서는 2^53 이상의 값에서는 정수 사이의 간격이 1보다 커지기 시작합니다. 이는 매우 큰 수를 다룰 때 정확한 값을 유지하기 어렵게 만듭.. 2024. 3. 5.
자바스크립트에서의 큰 정수 자바스크립트에서 64비트 정수가 기본적으로 없는 이유는 자바스크립트가 처음 설계될 때의 컴퓨터 하드웨어와 사용 사례를 고려한 결정 때문입니다. 자바스크립트가 1995년에 처음 개발됐을 때, 웹은 단순한 텍스트와 이미지를 공유하는 용도로 사용되었고, 고성능 컴퓨팅이나 대규모 숫자 계산과 같은 복잡한 작업을 위한 언어로 생각되지 않았습니다. 자바스크립트는 당시의 웹 개발 요구 사항을 충족시키기 위해 간단하고 유연한 언어로 설계되었습니다. 숫자를 다룰 때, 자바스크립트는 단일 숫자 타입인 Number를 사용하는데, 이는 IEEE 754 표준을 따르는 부동소수점 형식입니다. 이 형식은 다양한 크기의 숫자를 표현할 수 있는 유연성을 제공하지만, 정확히 64비트 정수를 표현하는 데는 한계가 있습니다. Number .. 2024. 3. 5.
모듈(module) JavaScript 모듈은 재사용 가능한 코드의 조각을 캡슐화하고, 다른 JavaScript 파일에서 임포트하여 사용할 수 있게 하는 기능입니다. 모듈 시스템을 사용하면 큰 프로젝트를 관리하기 쉬운 작은 단위로 나누고, 네임스페이스 충돌을 방지하며, 의존성을 명확하게 관리할 수 있습니다. ES6 모듈 ES6(ES2015)에서 공식적으로 모듈 시스템이 도입되었습니다. ES6 모듈은 **export**와 import 문을 사용하여 모듈을 내보내고 가져옵니다. Export 모듈에서 함수, 객체, 변수 등을 외부로 내보낼 때 export 키워드를 사용합니다. 기본 내보내기(default export)와 명명된 내보내기(named export)가 있습니다. 기본 내보내기 (Default Export): 모듈당 하.. 2024. 2. 22.
Error JavaScript에서 에러 객체(Error object)는 실행 시간(runtime) 에러가 발생했을 때 생성되는 객체입니다. 이 객체는 에러에 대한 상세한 정보를 담고 있으며, 프로그래머가 에러 처리를 보다 효과적으로 할 수 있게 돕습니다. 에러 객체는 Error 생성자 함수를 사용하여 직접 생성할 수도 있습니다. 기본 에러 객체 JavaScript의 Error 객체는 다음과 같은 주요 속성을 가지고 있습니다: message: 에러 메시지를 문자열로 담고 있습니다. 이 메시지는 에러가 무엇인지 설명합니다. name: 에러의 이름을 담고 있는 문자열입니다. 기본 에러 객체의 경우, **"Error"**라는 이름을 가집니다. let error = new Error("Something went wrong".. 2024. 2. 22.
제너레이터 (Generators)와 async/await 제너레이터(Generators)와 **async/await**는 JavaScript의 비동기 프로그래밍을 다루는 두 가지 중요한 개념입니다. 이들은 비동기 코드를 작성하고 관리하는 방식에 혁신을 가져왔으며, 특히 콜백 지옥(callback hell)을 해결하고 코드의 가독성을 향상시키는 데 크게 기여했습니다. 제너레이터 (Generators) 제너레이터는 ES6(ES2015)에 도입된 기능으로, 함수의 실행을 중간에 멈췄다가 필요한 시점에 다시 재개할 수 있는 함수입니다. function* 키워드로 선언하며, yield 표현식을 사용해 함수의 실행을 일시 중지하고, next() 메서드를 통해 다시 실행을 재개합니다. 제너레이터는 비동기 작업을 순차적으로 처리하는 데 유용하게 사용될 수 있습니다. func.. 2024. 2. 22.
콜백 헬(Callback Hell)과 프로미스(Promises) 콜백 헬(Callback Hell) 콜백 헬, 또는 콜백 지옥은 JavaScript에서 비동기 작업을 처리할 때 콜백 함수를 중첩하여 사용하면서 발생하는 코드의 가독성과 유지보수성 문제를 가리킵니다. 콜백 함수가 여러 겹으로 중첩되면 코드의 들여쓰기가 깊어지고, 이로 인해 코드의 흐름을 이해하기 어렵게 만들 수 있습니다. getData(function(a){ getMoreData(a, function(b){ getMoreData(b, function(c){ console.log('Got the data: ', c); }); }); }); 위의 예시처럼 콜백 함수가 여러 겹으로 중첩되면, 코드의 흐름을 따라가기 어렵고, 에러 처리가 복잡해집니다. 1. 가독성 저하 중첩된 콜백으로 인해 코드의 들여쓰기가 깊.. 2024. 2. 21.
REST API REST API(Representational State Transfer Application Programming Interface)는 웹 상에서 다양한 자원(데이터 또는 기능)을 HTTP 프로토콜을 통해 조작하기 위한 아키텍처 스타일입니다. REST는 분산 시스템 설계를 위한 원칙과 제약 조건의 집합으로, 인터넷에서 데이터를 주고받는 표준적인 방법을 제공합니다. REST의 핵심 원칙 Client-Server Architecture: 클라이언트와 서버는 서로 독립적으로 분리되어 있어야 합니다. 이는 각 부분의 확장성을 향상시킵니다. Stateless: 각 요청은 독립적이며, 서버는 클라이언트의 상태를 저장하지 않습니다. 모든 필요한 정보는 각 요청에 포함되어야 합니다. Cacheable: 클라이언트는 .. 2024. 2. 21.
XMLHttpRequest XMLHttpRequest (XHR) 객체는 서버와 상호작용하기 위해 사용되며, 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있게 해줍니다. 이는 AJAX(Asynchronous JavaScript and XML) 통신의 핵심 요소 중 하나입니다. **XMLHttpRequest**를 사용하면, 웹 페이지가 로드된 후에도 서버로부터 데이터를 요청하고 받아올 수 있으며, 이를 통해 페이지의 일부분만을 업데이트할 수 있습니다. 기본 사용법 XMLHttpRequest 객체의 사용법은 다음과 같은 단계로 요약할 수 있습니다: XHR 객체 생성: XMLHttpRequest 객체의 인스턴스를 생성합니다. 요청 초기화: .open() 메서드를 사용하여 요청을 초기화합니다. 응답 처리를 위한 이벤트 핸.. 2024. 2. 21.
AJAX(Asynchronous JavaScript and XML) AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환할 수 있게 하는 기술입니다. AJAX를 사용하면, 웹 페이지 전체를 다시 로드하지 않고도 일부분만을 업데이트할 수 있습니다. 이는 웹 애플리케이션의 반응성과 속도를 크게 향상시킵니다. AJAX의 작동 원리 XMLHttpRequest 객체 사용: 브라우저는 XMLHttpRequest 객체를 제공하여 서버에 비동기 요청을 보낼 수 있습니다. 최근에는 더 새롭고 강력한 **fetch API**가 도입되어 AJAX 요청을 처리하는 주요 방법으로 자리 잡았습니다. 서버 요청: 웹 애플리케이션은 서버에 데이터를 요청하거나 전송할 때 XMLHttpRequest 객체나 **fetch API**를 사용합니.. 2024. 2. 21.
이벤트 루프(Event Loop)와 태스크 큐(Task Queue) 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)는 JavaScript의 비동기 처리 모델을 이해하는 데 중요한 개념입니다. JavaScript는 싱글 스레드 언어이지만, 이벤트 루프와 태스크 큐를 통해 비동기 작업을 효율적으로 관리하고 실행할 수 있습니다. 이벤트 루프 이벤트 루프는 프로그램의 실행 흐름을 제어하는 메커니즘으로, 호출 스택(Call Stack)이 비어 있을 때 태스크 큐에 대기 중인 다음 작업(태스크)을 호출 스택으로 이동시키고 실행합니다. 이 과정은 프로그램이 종료될 때까지 반복됩니다. 호출 스택(Call Stack): 실행 중인 함수의 호출 기록을 저장하는 스택 구조입니다. 현재 실행 중인 함수가 완료되면 스택에서 제거(pop)되고, 새로운 함수가 호출될 때 스택에.. 2024. 2. 21.
동기 처리(Synchronous)와 비동기 처리(Asynchronous) 동기 처리(Synchronous)와 비동기 처리(Asynchronous)는 프로그래밍에서 작업 실행 순서와 완료 시점을 다루는 두 가지 주요 방식입니다. 이 두 방식은 특히 웹 개발과 같이 I/O(Input/Output) 작업이 빈번한 환경에서 중요한 개념입니다. 동기 처리 (Synchronous) 동기 처리는 한 작업이 완료된 후에 다음 작업이 실행되는 방식입니다. 이는 작업 실행 순서가 코드의 작성 순서와 일치하며, 어떤 작업을 실행하는 동안 프로그램은 해당 작업의 완료를 기다립니다. 동기 처리는 코드의 가독성이 높고 로직을 이해하기 쉽지만, I/O 작업 등 시간이 많이 소요되는 작업을 처리할 때 프로그램의 실행이 블로킹(대기 상태)되어 전체적인 효율성이 떨어질 수 있습니다. console.log('.. 2024. 2. 21.
디바운스(Debounce)와 스로틀(Throttle) 디바운스(Debounce)와 스로틀(Throttle)은 웹 개발에서 고성능 애플리케이션을 구현하기 위해 자주 사용되는 기술입니다. 이들은 주로 이벤트 핸들링 최적화를 목적으로 하며, 불필요한 함수 실행의 수를 줄임으로써 리소스 사용을 효율적으로 관리합니다. 디바운스 (Debounce) 디바운스는 연속된 이벤트 호출을 그룹화하여 특정 시간 동안 발생한 이벤트들 중 마지막 이벤트만을 실행하도록 하는 기술입니다. 이는 검색 자동완성, 리사이징, 키 입력 처리 등의 상황에서 유용하게 사용됩니다. function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeou.. 2024. 2. 21.
타이머 JavaScript에서 타이머 기능은 시간 지연(delay)이나 반복 실행을 위해 주로 사용됩니다. 이 기능은 setTimeout, setInterval, 그리고 이들의 취소를 위한 clearTimeout, clearInterval 메서드를 통해 구현할 수 있습니다. setTimeout setTimeout 함수는 지정된 시간(밀리초)이 지난 후에 함수를 한 번 실행합니다. 이 메서드는 두 개의 인자를 받습니다: 실행할 함수와 지연 시간(밀리초 단위). function sayHello() { console.log("Hello!"); } // 2000밀리초(2초) 후에 sayHello 함수 실행 let timerId = setTimeout(sayHello, 2000); 만약 지정된 타이머를 취소하고 싶다면,.. 2024. 2. 21.
이벤트(Event) 이벤트(Event)는 웹 페이지에서 발생하는 다양한 상황을 나타냅니다. 사용자가 버튼을 클릭하는 행위부터 키보드를 누르는 동작, 웹 페이지의 로딩 완료 등 웹 애플리케이션에서 발생하는 거의 모든 것을 이벤트로 간주할 수 있습니다. 이벤트는 웹 개발에서 사용자와의 상호작용을 구현하는 데 핵심적인 역할을 합니다. 이벤트 처리 방법 이벤트를 처리하기 위해, 개발자는 이벤트 리스너(Event Listener) 또는 이벤트 핸들러(Event Handler)를 사용하여 특정 이벤트가 발생했을 때 실행될 코드를 지정합니다. 이벤트 리스너 등록: 이벤트 리스너는 특정 이벤트가 대상 요소에서 발생할 때마다 호출되는 함수입니다. addEventListener 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다. docu.. 2024. 2. 21.
classList DOM의 클래스 조작은 웹 페이지의 요소에 스타일을 동적으로 추가, 변경, 제거하기 위해 자주 사용됩니다. JavaScript를 통해 이를 구현할 수 있는 주요 방법은 classList 속성을 사용하는 것입니다. **classList**는 요소의 클래스를 조작하기 위한 다양한 메소드를 제공합니다. classList의 주요 메소드 add(className): 요소에 클래스를 추가합니다. 이미 존재하는 클래스라면 추가하지 않습니다. remove(className): 요소에서 클래스를 제거합니다. toggle(className): 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다. 이 메소드는 클래스의 존재 여부에 따라 true 또는 false를 반환합니다. contains(className): 지정한 .. 2024. 2. 21.
textConent와 InnerText textContent와 innerText는 모두 DOM에서 요소의 내용을 가져오거나 설정하는 속성입니다. 그러나 이들 사이에는 중요한 차이점이 있으며, 사용 사례에 따라 적절한 속성을 선택하는 것이 중요합니다. textContent 정의: textContent 속성은 요소와 그 자손의 텍스트 내용을 가져오거나 설정합니다. 이 때, HTML 태그를 무시하고 텍스트만을 다룹니다. 특징: textContent는 숨겨진 요소(예: display: none이 적용된 요소)의 텍스트도 포함합니다. 스크립트와 스타일 요소 내의 텍스트도 포함합니다. HTML 엔티티(예: < 또는 &)는 실제 문자로 해석되지 않고 원시 텍스트 그대로 반환됩니다. 사용 사례: DOM에서 순수 텍스트 데이터를 작업할 때 선호됩니다. tex.. 2024. 2. 21.
728x90
반응형
LIST