본문 바로가기

SMALL

전체 글125

이진힙(Binary Heap) 이진 힙(Binary Heap)은 완전 이진 트리를 기반으로 하는 자료 구조로, 주로 우선순위 큐를 구현하는 데 사용됩니다. 이진 힙은 크게 두 종류로 나뉩니다: 최소 힙(Min Heap)과 최대 힙(Max Heap)입니다. 최소 힙에서는 부모 노드의 키 값이 자식 노드의 키 값보다 항상 작거나 같아야 하며, 최대 힙에서는 부모 노드의 키 값이 자식 노드의 키 값보다 항상 크거나 같아야 합니다. 이로 인해 이진 힙의 루트 노드는 전체 트리에서 최소값(최소 힙의 경우) 또는 최대값(최대 힙의 경우)을 가지게 됩니다. 이진 힙을 자바스크립트로 구현하는 것은 배열을 사용하여 비교적 간단합니다. 힙 내의 각 요소들은 일련의 연산을 통해 관리되며, 주로 다음 네 가지 주요 연산을 구현합니다: 삽입(Insert):.. 2024. 3. 20.

후기 책이 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.

깊이/너비 우선 탐색(DFS/BFS) > 게임 맵 최단거리 https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 일단 console.log 로 지형을 파악해본다 자료구조가 배열이기 때문에 오른쪽으로 가는걸 먼저 체크하는게 일단 편해보임 현재위치를 저장하고 if (오른쪽이 0일 경우) 바로 다음 배열의 동일 index를 체크 (아래로 감) else 오른쪽이 1일 경우 오른쪽으로 한칸 이동한 현재위치를 저장 후 다시 위의 조건문을 호출해야하니까 저 조건문은 while 문이 됨 while (현재위치가 5,5일때까지.. 2024. 3. 8.

배열의 순수 함수, 비순수 함수 배열이 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.

스택/큐 > 주식가격 https://school.programmers.co.kr/learn/courses/30/lessons/42584 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 배열이 주어지고 그 각 시점의 가격이 떨어지지 않은 것만 카운트 하면 된다 1 = 4번 상승 2 = 3번 상승하거나 보합 3 = 1번 보합 2 = 1번 상승 3 = 0 스택/큐 문제라는데 아직 익숙하지 않아서인가 그냥 푸는게 더 쉽게 구현이 가능해보이는데 이런식의 접근을 했을 때 예제는 풀리는데 다른 예시들이 통과가 안됨 가격이 떨어졌을 때 2번째 중첩 포문에서의 반복을 중단하고 다음 숫자로 넘어.. 2024. 2. 28.

DFS, BFS, 트리 순회(traversal) 이진트리에서 데이터를 검색하거나 방문하는 방법에는 깊이 우선 탐색(DFS), 너비 우선 탐색(BFS), 그리고 트리 순회(Traversal)가 있습니다. 각각의 방법은 특정 목적에 따라 사용되며, 이진트리의 모든 노드를 효율적으로 방문하는 다양한 전략을 제공합니다. 깊이 우선 탐색 (Depth-First Search, DFS) DFS는 트리의 깊이를 우선적으로 탐색하는 알고리즘입니다. 트리의 루트에서 시작하여 가능한 한 깊게 트리를 탐색한 후, 더 이상 탐색할 노드가 없을 때 이전 분기점으로 되돌아가 다른 경로를 탐색합니다. 이진트리에서 DFS를 구현하는 세 가지 주요 방법은 전위 순회(Preorder), 중위 순회(Inorder), 후위 순회(Postorder)입니다. 전위 순회 (Preorder): .. 2024. 2. 25.

remove : 이진탐색트리(Binary Search Tree, BST) 이진탐색트리(Binary Search Tree, BST)에서 remove 메소드를 구현하는 것은 조금 더 복잡합니다. 노드를 제거할 때는 세 가지 주요 상황을 고려해야 합니다: 리프 노드 제거: 제거하려는 노드가 리프 노드인 경우, 단순히 그 노드를 제거하면 됩니다. 한 개의 자식을 가진 노드 제거: 제거하려는 노드가 하나의 자식만 가지고 있는 경우, 그 노드를 제거하고, 그 자식을 제거된 노드의 부모 노드에 연결합니다. 두 개의 자식을 가진 노드 제거: 제거하려는 노드가 두 개의 자식을 가지고 있는 경우, 노드의 오른쪽 서브트리에서 가장 작은 값을 찾거나(또는 왼쪽 서브트리에서 가장 큰 값을 찾아) 그 값을 제거하려는 노드의 위치로 이동하고, 원래 그 값을 가지고 있던 노드를 제거합니다. 아래는 BST.. 2024. 2. 25.

search : 이진탐색트리(Binary Search Tree, BST) 이진탐색트리(Binary Search Tree, BST)에서 search 메소드를 구현하는 것은 insert 메소드와 유사한 방식으로 진행할 수 있습니다. search 메소드는 트리 내에서 특정 데이터를 찾아 그 데이터가 존재하는지 여부를 반환하거나, 해당 데이터를 포함하는 노드를 반환합니다. 이 메소드 역시 재귀적인 방법을 사용하여 구현할 수 있습니다. 아래는 BST 클래스에 search 메소드를 추가한 예시입니다. 이 메소드는 주어진 데이터와 일치하는 노드를 찾으면 그 노드를 반환하고, 데이터를 찾지 못하면 **null**을 반환합니다. class Node { constructor(data, left = null, right = null) { this.data = data; this.left = le.. 2024. 2. 25.

insert : 이진탐색트리(Binary Search Tree, BST) 이진탐색트리(Binary Search Tree, BST)의 insert 함수를 구현하는 것은 자료구조의 기본을 이해하는 좋은 방법입니다. 이진탐색트리는 각 노드가 최대 두 개의 자식 노드를 가지며, 왼쪽 자식 노드의 값은 부모 노드의 값보다 작고, 오른쪽 자식 노드의 값은 부모 노드의 값보다 큰 특성을 가지고 있습니다. 이러한 성질을 이용하여 데이터를 정렬된 상태로 저장할 수 있으며, 검색, 삽입, 삭제 작업을 효율적으로 수행할 수 있습니다. 아래는 자바스크립트로 이진탐색트리를 구현하고, insert 메소드를 추가하는 간단한 예제입니다. class Node { constructor(data, left = null, right = null) { this.data = data; this.left = left.. 2024. 2. 25.

이진트리(Binary tree) 이진 트리는 각 노드가 최대 두 개의 자식 노드를 가질 수 있는 트리 구조입니다. 일반적으로 이진 트리는 검색, 정렬, 데이터 저장 등 다양한 컴퓨터 과학 문제를 해결하는 데 사용됩니다. 이진 트리의 다양한 종류 중에 "Full Binary Tree", "Perfect Binary Tree", "Complete Binary Tree", "Degenerate (or Pathological) Binary Tree", "Balanced Binary Tree" 들은 각각 고유한 특성을 가지고 있지만, 몇 가지 공통적인 유사점도 공유합니다. 여기서는 이 다섯 가지 이진 트리 유형의 주요 특징과 함께 그들이 공유하는 유사점에 대해 설명합니다. 주요 특징 Full Binary Tree: 모든 노드가 0개 또는 2개의.. 2024. 2. 24.

스택/큐 > 프로세스 https://school.programmers.co.kr/learn/courses/30/lessons/42587?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 실행 대기 큐(Queue)에서 대기중인 프로세스 하나를 꺼냅니다. 2. 큐에 대기중인 프로세스 중 우선순위가 더 높은 프로세스가 있다면 방금 꺼낸 프로세스를 다시 큐에 넣습니다. 3. 만약 그런 프로세스가 없다면 방금 꺼낸 프로세스를 실행합니다. 3.1 한 번 실행한 프로세스는 다시 큐에 넣지 않고 그대로 종료됩니다. 를 실제로 구현해보고자 했다 funct.. 2024. 2. 22.

스택(Stack), 큐(Queue), 트리(Tree) 스택(Stack) 스택은 후입선출(LIFO, Last-In-First-Out) 방식의 자료 구조입니다. 가장 마지막에 추가된 요소가 가장 먼저 제거됩니다. 자바스크립트에서 스택은 배열을 통해 쉽게 구현할 수 있습니다. 배열의 push 메서드로 요소를 스택에 추가하고, pop 메서드로 가장 마지막에 추가된 요소를 제거할 수 있습니다. let stack = []; stack.push(1); // 스택에 1 추가 stack.push(2); // 스택에 2 추가 console.log(stack.pop()); // 가장 마지막에 추가된 2를 제거하고 출력 console.log(stack); // 남아 있는 스택의 요소 확인 큐(Queue) 큐는 선입선출(FIFO, First-In-First-Out) 방식의 자료 .. 2024. 2. 22.

모듈(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.

이전 1 2 3 4 5 다음

728x90

LIST

티스토리툴바