본문 바로가기
반응형

javascript107

[JavaScript 문법] 12일차: ES6 클래스 클래스란?클래스는 객체 지향 프로그래밍의 기본 단위로, 객체를 생성하기 위한 템플릿입니다. ES6에서는 객체 지향 프로그래밍을 더 쉽게 구현할 수 있도록 class 문법이 도입되었습니다.클래스 선언클래스는 class 키워드를 사용하여 선언할 수 있습니다. 기본 문법class 클래스이름 { constructor(매개변수1, 매개변수2, ...) { // 초기화 코드 } 메서드이름() { // 메서드 코드 }}예제class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log('Hello, my name is ' + this.name); }}let perso.. 2024. 8. 12.
[JavaScript 문법] 11일차: 배열 고급 고차 함수란?고차 함수(Higher-Order Function)는 함수를 인수로 받거나 함수를 반환하는 함수입니다. 배열 고차 함수는 배열을 처리하는데 매우 유용합니다.배열 고차 함수forEachforEach 메서드는 배열의 각 요소에 대해 지정된 함수를 한 번씩 실행합니다.let fruits = ['Apple', 'Banana', 'Cherry'];fruits.forEach(function(fruit, index) { console.log(index + ': ' + fruit);});// 출력:// 0: Apple// 1: Banana// 2: Cherrymapmap 메서드는 배열의 각 요소에 대해 지정된 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.let numbers = [1, 2, 3];.. 2024. 8. 11.
[JavaScript 문법] 10일차: 배열 기초 배열이란?배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열의 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. JavaScript의 배열은 크기가 동적으로 조정되며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.배열 선언배열을 선언하는 방법에는 배열 리터럴과 Array 생성자를 사용하는 방법이 있습니다.배열 리터럴let fruits = ['Apple', 'Banana', 'Cherry'];Array 생성자let fruits = new Array('Apple', 'Banana', 'Cherry');배열 요소 접근배열 요소는 인덱스를 사용하여 접근할 수 있습니다. 예제let fruits = ['Apple', 'Banana', 'Cherry'];console... 2024. 8. 10.
[JavaScript 문법] 9일차: 객체의 프로토타입 프로토타입이란?프로토타입은 객체 지향 프로그래밍에서 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 하는 메커니즘입니다. JavaScript는 프로토타입 기반 언어로, 모든 객체는 프로토타입을 가질 수 있습니다.프로토타입 체인프로토타입 체인은 객체가 다른 객체로부터 상속을 받을 때 형성됩니다. 객체는 자신의 프로토타입에 정의된 속성과 메서드를 사용할 수 있으며, 프로토타입 체인을 따라가면서 상위 객체의 속성과 메서드를 참조할 수 있습니다. 예제function Person(name, age) { this.name = name; this.age = age;}Person.prototype.greet = function() { console.log('Hello, my name is ' + thi.. 2024. 8. 9.
[JavaScript 문법] 8일차: 객체 기초 객체란?객체는 여러 값들을 하나의 단위로 묶어서 관리할 수 있는 복합 데이터 타입입니다. 객체는 속성과 메서드로 구성됩니다. 속성은 객체의 상태를 나타내고, 메서드는 객체의 동작을 정의합니다.객체 리터럴객체 리터럴은 중괄호 {}를 사용하여 객체를 정의하는 방법입니다. 기본 문법let 객체이름 = { 속성1: 값1, 속성2: 값2, ...}; 예제let person = { name: 'Alice', age: 25, city: 'New York'};속성 접근객체의 속성에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있습니다. 점 표기법console.log(person.name); // 'Alice'console.log(person.age); // 25 대괄호 표기법console.log(perso.. 2024. 8. 8.
[JavaScript 문법] 7일차: 스코프와 클로저 스코프란?스코프는 변수, 함수, 객체가 접근할 수 있는 범위를 나타냅니다. JavaScript에는 전역 스코프와 지역 스코프가 있으며, ES6 이후에는 블록 스코프도 추가되었습니다.전역 스코프전역 스코프는 코드 전체에서 접근할 수 있는 범위를 의미합니다. 전역 변수는 함수 외부에서 선언된 변수입니다. 예제let globalVar = 'I am global';function test() { console.log(globalVar); // 'I am global'}test();console.log(globalVar); // 'I am global' 지역 스코프지역 스코프는 함수 내부에서만 접근할 수 있는 범위를 의미합니다. 지역 변수는 함수 내부에서 선언된 변수입니다. 예제function test() { .. 2024. 8. 7.
[JavaScript 프레임워크] 7일차: JavaScript 프레임워크에서 컴포넌트 재사용 및 테스트하기 7. 컴포넌트 재사용 및 테스트프로젝트 개요이번 글에서는 JavaScript 프레임워크에서 컴포넌트를 재사용하고 테스트하는 방법에 대해 알아보겠습니다. 컴포넌트 재사용은 코드의 유지보수성을 높이고, 테스트는 코드의 신뢰성을 높이는 중요한 과정입니다. React, Vue.js, Angular 각각의 프레임워크에서 이 방법을 다룹니다.React컴포넌트 재사용React에서는 컴포넌트를 재사용 가능하게 설계할 수 있습니다. Button 컴포넌트 예제// src/components/Button.jsimport React from 'react';function Button({ onClick, children }) { return ( {children} );}export default Bu.. 2024. 8. 7.
[JavaScript 최신 기능 시리즈] 7일차: JavaScript의 새로운 빌트인 객체들: Map, Set 이해하기 7. 새로 추가된 빌트인 객체들 (Map, Set 등)새로운 빌트인 객체란 무엇인가?ES6에서는 기존의 객체(Object)와 배열(Array) 외에 새로운 자료 구조인 Map과 Set을 도입했습니다. 이들은 각각 키-값 쌍과 고유한 값의 집합을 관리하는 데 유용합니다.Map 객체Map 객체는 키-값 쌍을 저장하며, 모든 데이터 유형을 키로 사용할 수 있습니다.1. Map 생성let map = new Map();2. 요소 추가map.set('name', 'Alice');map.set('age', 25);console.log(map); // 출력: Map(2) {"name" => "Alice", "age" => 25}3. 요소 접근console.log(map.get('name')); // 출력: Alic.. 2024. 8. 7.
[JavaScript 심화 시리즈] 7일차: JavaScript 메모리 관리와 성능 최적화 이해하기 7. 메모리 관리와 성능 최적화메모리 관리란 무엇인가?메모리 관리는 프로그램이 실행될 때 사용되는 메모리의 할당과 해제를 의미합니다. JavaScript는 자동 메모리 관리 기능을 제공하지만, 메모리 누수를 방지하고 성능을 최적화하기 위해 메모리 사용에 주의를 기울이는 것이 중요합니다.가비지 컬렉션JavaScript는 자동으로 메모리를 관리하기 위해 가비지 컬렉터(Garbage Collector)를 사용합니다. 가비지 컬렉션은 더 이상 참조되지 않는 객체를 메모리에서 해제합니다.1. 참조 카운팅객체가 얼마나 많은 참조를 받고 있는지를 추적합니다. 참조 카운트가 0이 되면 객체는 가비지 컬렉션 대상이 됩니다.2. 마크 앤 스윕객체 그래프를 탐색하여 도달할 수 없는 객체를 마크하고, 마크되지 않은 객체를 해.. 2024. 8. 7.
[JavaScript 기초 시리즈] 7일차: JavaScript로 DOM 조작하기 7. DOM 조작 기초DOM이란 무엇인가?DOM(Document Object Model)은 HTML 문서를 트리 구조로 나타낸 것입니다. JavaScript를 사용하면 DOM을 조작하여 웹 페이지의 콘텐츠와 구조를 동적으로 변경할 수 있습니다.DOM 요소 선택JavaScript에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 1. getElementByIdID 속성을 사용하여 요소를 선택합니다.let element = document.getElementById("myElement"); 2. getElementsByClassName클래스 이름을 사용하여 요소를 선택합니다.let elements = document.getElementsByClassName("myClass"); 3. getElemen.. 2024. 8. 7.
반응형

티스토리툴바