반응형 자바스크립트102 [코딩 테스트] 11일차: 재귀와 백트래킹 재귀 (Recursion)재귀는 함수가 자기 자신을 호출하는 프로그래밍 기법입니다. 재귀 함수는 하나 이상의 종료 조건(Base Case)과 자기 자신을 호출하는 재귀 단계(Recursive Case)를 포함합니다.재귀 함수의 주요 개념기저 조건(Base Case): 재귀 호출을 멈추는 조건재귀 단계(Recursive Case): 함수를 반복적으로 호출하는 단계예제: 재귀를 이용한 팩토리얼 계산JavaScriptfunction factorial(n) { if (n === 0) { return 1; // 기저 조건 } return n * factorial(n - 1); // 재귀 단계}console.log(factorial(5)); // 120Pythondef factorial(n): if.. 2024. 9. 11. [JavaScript 문법] 40일차: 이벤트 처리 심화 이벤트 전파이벤트 전파(Event Propagation)는 이벤트가 발생한 요소에서 상위 요소로 전파되는 과정을 의미합니다. JavaScript에서는 이벤트 전파를 관리하기 위해 캡처링(Capturing) 단계와 버블링(Bubbling) 단계를 사용할 수 있습니다.캡처링과 버블링캡처링(Capturing): 이벤트가 상위 요소에서 하위 요소로 전파됩니다.버블링(Bubbling): 이벤트가 하위 요소에서 상위 요소로 전파됩니다.예제: 이벤트 캡처링과 버블링 Click me 위 예제에서 버튼을 클릭하면 다음과 같은 순서로 로그가 출력됩니다:Grandparent capturedParent capturedChild clickedParent bubbledGrandparent bubbled이벤트 위임이벤트.. 2024. 9. 10. [JavaScript 문법 ] 39일차: 이벤트 처리 기초 이벤트란?이벤트(Event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건을 의미합니다. JavaScript는 이러한 이벤트를 감지하고 처리할 수 있는 기능을 제공합니다. 대표적인 이벤트로는 클릭, 입력, 마우스 이동 등이 있습니다.이벤트 리스너 등록이벤트 리스너(Event Listener)는 특정 이벤트가 발생했을 때 실행할 코드를 정의합니다. 이벤트 리스너를 등록하기 위해 addEventListener 메서드를 사용합니다. 기본 사용법element.addEventListener(eventType, eventHandler);element: 이벤트를 감지할 DOM 요소eventType: 감지할 이벤트 유형 (예: 'click', 'input')eventHandler: 이벤트가 발생했을 때 실행할 함.. 2024. 9. 9. [JavaScript 문법] 38일차: DOM 조작 심화 클래스 조작클래스 조작은 요소의 클래스를 추가, 제거, 토글하여 스타일을 동적으로 변경할 수 있습니다. 이를 위해 classList 객체를 사용합니다.add 메서드classList.add 메서드는 요소에 클래스를 추가합니다.예제This is a box.remove 메서드classList.remove 메서드는 요소에서 클래스를 제거합니다.예제This is a box.toggle 메서드classList.toggle 메서드는 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다.예제This is a box.contains 메서드classList.contains 메서드는 클래스가 존재하는지 확인합니다.예제This is a box.스타일 변경요소의 스타일을 동적으로 변경하기 위해 style 객체를 사용할 수 있.. 2024. 9. 8. [JavaScript 문법] 37일차: DOM 조작 기초 DOM 조작이란?DOM 조작은 JavaScript를 사용하여 웹 페이지의 요소를 동적으로 생성, 수정, 삭제하는 과정을 의미합니다. 이를 통해 사용자는 웹 페이지와 상호작용할 수 있으며, 웹 애플리케이션의 동적 콘텐츠를 쉽게 관리할 수 있습니다.요소 생성DOM 요소를 생성하기 위해 document.createElement 메서드를 사용합니다.예제: 요소 생성let newElement = document.createElement('div');newElement.textContent = 'Hello, World!';요소 추가생성된 요소를 DOM에 추가하기 위해 appendChild 또는 insertBefore 메서드를 사용합니다.예제: 요소 추가요소 삭제요소를 DOM에서 제거하기 위해 removeChild .. 2024. 9. 7. [JavaScript 문법] 36일차: DOM(Document Object Model) 소개 DOM이란?DOM(Document Object Model)은 웹 페이지의 구조화된 표현으로, 문서의 각 요소를 객체로 표현하여 JavaScript에서 해당 요소를 조작할 수 있게 합니다. DOM은 트리 구조로 되어 있으며, HTML 문서의 각 태그는 노드(Node)로 표현됩니다.DOM의 기본 구조DOM 트리는 루트 노드인 document 객체를 포함하며, 모든 요소와 텍스트 노드는 이 트리의 자식 노드입니다. 각 노드는 부모 노드, 자식 노드, 형제 노드를 가질 수 있습니다.예제 Hello, World! This is a paragraph.이 HTML 문서의 DOM 트리는 다음과 같이 표현됩니다:document └── html ├── head │ ├── title │ .. 2024. 9. 6. [코딩 테스트] 6일차: 연결 리스트 연결 리스트연결 리스트는 각 노드가 데이터와 다음 노드를 가리키는 포인터를 가지고 있는 자료구조입니다. 배열과 달리 연결 리스트는 메모리상에서 연속적으로 저장되지 않습니다.단일 연결 리스트단일 연결 리스트는 각 노드가 다음 노드에 대한 포인터만을 가지고 있는 리스트입니다.JavaScript에서의 단일 연결 리스트 구현class Node { constructor(data) { this.data = data; this.next = null; }}class LinkedList { constructor() { this.head = null; } // 노드 추가 append(data) { let newNode = new Node(data); if (this.head === n.. 2024. 9. 6. [JavaScript 문법] 35일차: 모던 JavaScript 문법 ES2020 주요 기능ES2020(ECMAScript 2020)은 JavaScript 언어 사양의 최신 업데이트 중 하나로, 몇 가지 중요한 기능이 추가되었습니다.Nullish Coalescing Operator (??)Nullish 병합 연산자는 null 또는 undefined인 경우에만 기본값을 반환합니다.예제let value = null;let defaultValue = value ?? 'default';console.log(defaultValue); // 'default'value = 'Hello';defaultValue = value ?? 'default';console.log(defaultValue); // 'Hello'Optional Chaining (?.)옵셔널 체이닝은 존재하지 않을 수 .. 2024. 9. 5. [코딩 테스트] 5일차: 스택과 큐 스택스택은 LIFO(Last In, First Out) 자료구조로, 가장 나중에 삽입된 데이터가 가장 먼저 삭제됩니다. 스택은 보통 함수 호출, 수식 계산, 문자열 역순 처리 등에서 사용됩니다.스택의 기본 연산push: 스택의 맨 위에 요소를 추가pop: 스택의 맨 위 요소를 제거하고 반환peek: 스택의 맨 위 요소를 반환 (제거하지 않음)isEmpty: 스택이 비어 있는지 확인JavaScript에서의 스택 구현class Stack { constructor() { this.items = []; } push(element) { this.items.push(element); } pop() { if (this.isEmpty()) { return "Underflow"; .. 2024. 9. 5. [JavaScript 문법] 34일차: JavaScript 성능 최적화 성능 최적화란?JavaScript 성능 최적화는 웹 애플리케이션의 실행 속도와 사용자 경험을 향상시키기 위한 다양한 기법을 포함합니다. 주요 최적화 영역은 메모리 관리, 렌더링 최적화, 코드 스플리팅 등입니다.메모리 관리메모리 관리는 효율적인 자원 활용과 메모리 누수를 방지하는 데 중요합니다. 잘못된 메모리 관리는 성능 저하와 프로그램 크래시를 유발할 수 있습니다.가비지 컬렉션 이해JavaScript는 자동 메모리 관리(가비지 컬렉션)를 사용합니다. 가비지 컬렉터는 더 이상 사용되지 않는 객체를 식별하고 메모리를 해제합니다.메모리 누수 방지메모리 누수는 더 이상 필요하지 않은 메모리를 해제하지 않아 발생합니다. 이를 방지하기 위해서는 다음과 같은 방법을 사용합니다:전역 변수 최소화: 전역 변수는 가비지 .. 2024. 9. 4. 이전 1 2 3 4 5 6 ··· 11 다음 반응형