본문 바로가기
반응형

전체 글 목록571

[자바스크립트] DOM과 이벤트 DOM이란- 웹 페이지를 트리 구조로 표현한 객체 모델- 브라우저는 HTML 문서를 파싱하여 DOM을 생성하고, 자바스크립트는 DOM을 통해 웹 페이지의 구조와 내용을 조작함DOM의 구조 Hello, DOM! This is a paragraph. Document ├── ├── │ └── └── ├── └── - Document: DOM 트리의 최상위 객체- 각 HTML 요소(, , 등)을 노드로 표현- JavaScript를 통해 이 노드들을 조작DOM 조작 메서드- getElementById: 특정 id를 가진 요소를 찾는다.const title = document.getElementById("titl.. 2025. 1. 5.
[자바스크립트] 배열과 객체 다루기 1. 배열 메서드1.1 map배열의 각 요소를 순회하며, 주어진 콜백 함수의 결과를 새로운 배열로 반환합니다.기존 배열은 변경되지 않습니다.const numbers = [1, 2, 3, 4, 5];const squared = numbers.map((num) => num ** 2);console.log(squared); // [1, 4, 9, 16, 25]console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)1.2 filter배열의 각 요소를 순회하며, 주어진 조건에 일치하는 요소들로만 새로운 배열을 반환합니다.기존 배열은 변경되지 않습니다.const numbers = [1, 2, 3, 4, 5];const evenNumbers = numbers.filter.. 2025. 1. 5.
[자바스크립트] 프로토타입과 상속 1. 객체 생성의 두 가지 방법a. 객체 리터럴 방식  - 간단한 객체 생성에는 편리하나 동일 구조를 가진 객체를 만드려고 할 때 비효율적임(코드 중복)const person = { name: "Alice", greet() { console.log(`Hello, my name is ${this.name}`); },};console.log(person.name); // "Alice"person.greet(); // "Hello, my name is Alice" b. 생성자 함수 방식- new 키워드를 사용하여 생성자 함수를 호출- 새로운 객체를 생성하고 초기화하는 로직을 재사용 가능function Person(name) { this.name = name; this.greet = functio.. 2025. 1. 4.
[자바스크립트] 비동기 프로그래밍, 프로미스(Promise), async, await 1. 비동기 프로그래밍- 비동기 프로그래밍은 시간 소모가 큰 작업(예: 네트워크 요청, 타이머 대기)을 효율적으로 처리하기 위한 방법- 비동기 작업은 JavaScript 엔진이 아닌 이벤트 루프를 통해 관리되며, 프로그램 실행이 멈추지 않고 계속 진행될 수 있게 함(이벤트 루프에 대한 글 참고: https://yiyj1030.tistory.com/592) 2. 콜백 헬(hell)비동기 처리 후에 후속 처리에 대한 작업을 어떻게 해줘야할까?function fetchData() { let data; setTimeout(() => { data = "Hello, World!"; }, 1000); return data;}const result = fetchData();console.log(result.. 2025. 1. 3.
[자바스크립트] this 바인딩 this 키워드- 실행 컨텍스트에서 어떤 객체를 참조할지 결정하는 키워드- this의 참조 대상은 함수가 호출되는 방식에 따라 동적으로 결정 1. 전역 컨텍스트전역 컨텍스트에서 this는 전역 객체를 참조(브라우저의 경우 window)console.log(this); // window (브라우저)2. 일반 함수 호출일반 함수 호출에서는 전역 객체를 참조function showThis() { console.log(this);}showThis(); // window3. 메서드 호출객체의 메서드를 호출하면, 메서드를 호출한 객체를 this로 참조const obj = { name: "Alice", greet() { console.log(this.name); },};obj.greet(); // "Al.. 2025. 1. 3.
[컴퓨터 구조] 보조 기억 장치(하드디스크, 플래시메모리, RAID) 1. 하드디스크 (Hard Disk Drive, HDD)정의자기장을 사용하여 데이터를 저장하는 보조 기억 장치디스크 표면에 데이터를 기록하고, 회전하는 디스크에서 데이터를 읽음구성 요소플래터(Platter): 데이터를 저장하는 원형 디스크.헤드(Head): 데이터를 읽고 쓰는 장치스핀들(Spindle): 플래터를 회전시키는 축.디스크암(Disk Arm): 헤드를 원하는 위치로 이동시키는 장치특징큰 저장 용량: 현재까지도 가장 저렴한 가격으로 대용량 저장이 가능.속도: 읽기/쓰기 속도가 플래시 메모리보다 느림(기계적 회전과 이동 때문).내구성: 움직이는 부품이 많아 충격에 약함.용도대용량 데이터 저장: 예: 데스크톱, 서버, 백업 스토리지.비용 효율이 중요한 경우 사용. 데이터 구성 요소데이터 구조 트랙(.. 2024. 12. 29.
반응형

티스토리툴바