반응형 자바스크립트102 [JavaScript 문법] 33일차: Proxy와 Reflect Proxy 객체란?Proxy 객체는 다른 객체를 감싸고, 그 객체에 대한 기본 작업(속성 접근, 할당, 함수 호출 등)을 가로채서 재정의할 수 있는 강력한 기능을 제공합니다. Proxy 객체는 두 개의 인수를 받습니다: 목표 객체(target)와 핸들러(handler) 객체입니다. 기본 사용법let target = {};let handler = {};let proxy = new Proxy(target, handler);핸들러 트랩핸들러 객체는 다양한 트랩(trap)을 정의할 수 있습니다. 트랩은 Proxy 객체가 수행할 작업을 가로채는 메서드입니다.주요 트랩get: 속성 접근을 가로챕니다.set: 속성 할당을 가로챕니다.has: in 연산자를 가로챕니다.deleteProperty: delete 연산자를 .. 2024. 9. 3. [JavaScript 문법] 32일차: 제너레이터 제너레이터란?제너레이터(Generator)는 함수 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 유형의 함수입니다. 제너레이터 함수는 function* 키워드로 정의하며, yield 키워드를 사용하여 값을 반환하고 실행을 일시 중지할 수 있습니다.제너레이터 함수제너레이터 함수는 일반 함수와 달리 호출 시 즉시 실행되지 않고, 이터레이터 객체를 반환합니다. 이 이터레이터 객체의 next 메서드를 호출하면 제너레이터 함수가 실행됩니다.기본 사용법function* generatorFunction() { yield 'Hello'; yield 'World';}const generator = generatorFunction();console.log(generator.next().value); //.. 2024. 9. 2. [JavaScript 문법] 31일차: 심볼과 이터레이터 Symbol 타입Symbol은 ES6에서 도입된 원시 데이터 타입으로, 유일한 식별자를 만들 때 사용됩니다. Symbol은 주로 객체의 속성 키로 사용되며, 이름이 충돌할 염려 없이 고유한 속성을 정의할 수 있습니다.기본 사용법let symbol1 = Symbol('description');let symbol2 = Symbol('description');console.log(symbol1 === symbol2); // falseconsole.log(symbol1.toString()); // 'Symbol(description)'객체의 심볼 속성Symbol을 사용하여 객체에 고유한 속성을 추가할 수 있습니다.예제let obj = {};let sym = Symbol('uniqueKey');obj[sym] =.. 2024. 9. 1. [JavaScript 문법] 30일차: 정규 표현식 정규 표현식이란?정규 표현식(Regular Expression)은 문자열에서 특정 패턴을 찾기 위해 사용되는 강력한 도구입니다. JavaScript에서 정규 표현식을 사용하여 문자열 검색, 일치 여부 확인, 치환 등의 작업을 효율적으로 수행할 수 있습니다.정규 표현식의 기본 문법정규 표현식은 슬래시(/)로 감싸서 정의하며, 다양한 패턴 매칭 기호를 사용할 수 있습니다.예제let regex = /hello/;let str = 'hello world';console.log(regex.test(str)); // true주요 패턴 매칭 기호.: 임의의 한 문자와 일치*: 앞의 문자가 0번 이상 반복+: 앞의 문자가 1번 이상 반복?: 앞의 문자가 0번 또는 1번 나타남^: 문자열의 시작$: 문자열의 끝[]: 문.. 2024. 8. 30. [JavaScript 문법] 29일차: 에러 처리 에러 처리란?에러 처리는 코드 실행 중 발생할 수 있는 예외 상황을 관리하고, 프로그램이 예기치 않게 종료되지 않도록 하는 중요한 방법입니다. JavaScript에서는 try, catch, finally, throw 문을 사용하여 에러를 처리할 수 있습니다.try, catch 문try 블록은 코드 실행을 시도하며, catch 블록은 try 블록에서 발생한 에러를 처리합니다. 기본 문법try { // 코드 실행} catch (error) { // 에러 처리}예제try { let result = 10 / 0; console.log(result); // Infinity let json = JSON.parse('Invalid JSON');} catch (error) { console.error('Er.. 2024. 8. 29. [JavaScript 문법] 28일차: AJAX와 Fetch API AJAX란?AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 전체를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있도록 하는 비동기 기술입니다. 이를 통해 웹 애플리케이션의 속도와 사용성을 크게 향상시킬 수 있습니다.XMLHttpRequestXMLHttpRequest 객체는 AJAX 요청을 보내고 응답을 처리하는 데 사용됩니다. 이는 오래된 방식이지만 여전히 많은 프로젝트에서 사용되고 있습니다. 기본 사용법let xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4.. 2024. 8. 28. [JavaScript 문법] 27일차: 이벤트 루프와 태스크 큐 이벤트 루프란?이벤트 루프(Event Loop)는 JavaScript의 비동기 작업을 처리하는 메커니즘입니다. JavaScript는 싱글 스레드로 동작하지만, 이벤트 루프를 통해 비동기 작업을 효율적으로 관리하고 실행할 수 있습니다.이벤트 루프의 동작 원리이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 지속적으로 감시하면서, 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다. 이 과정을 반복하여 비동기 작업을 처리합니다.기본 흐름콜 스택: 현재 실행 중인 함수가 쌓이는 스택입니다.태스크 큐: 비동기 작업의 콜백 함수가 대기하는 큐입니다.이벤트 루프: 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다.예제console.log('Start');se.. 2024. 8. 27. [JavaScript 문법] 26일차: 타이머 함수 타이머 함수란?타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 함수입니다. JavaScript에서는 setTimeout, setInterval, clearTimeout, clearInterval 네 가지 주요 타이머 함수를 제공합니다.setTimeoutsetTimeout 함수는 지정한 시간 후에 한 번 특정 코드를 실행합니다. 시간은 밀리초 단위로 지정합니다. 기본 문법setTimeout(callback, delay);예제function greet() { console.log('Hello, World!');}setTimeout(greet, 2000); // 2초 후 'Hello, World!' 출력인라인 함수 사용setTimeout(() => { .. 2024. 8. 26. [JavaScript 문법] 25일차: async/await async/await란?async와 await는 JavaScript에서 비동기 작업을 보다 간편하고 직관적으로 작성할 수 있도록 도와주는 구문입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 기다립니다.async 함수async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환합니다. 함수 내부에서 return한 값은 자동으로 Promise.resolve로 감싸집니다.예제async function fetchData() { return 'Fetched Data';}fetchData().then((data) => { console.log(data); // 'Fetched Data'});await 표현식await 키워드는 async 함수 내부에서만 .. 2024. 8. 25. [JavaScript 문법] 24일차: 프로미스 고급 프로미스 체이닝프로미스 체이닝(Promise Chaining)은 여러 프로미스를 순차적으로 실행하는 방법입니다. 각 then 메서드는 항상 새로운 프로미스를 반환하므로, 여러 then 메서드를 연결하여 사용할 수 있습니다. 이를 통해 비동기 작업을 순차적으로 처리할 수 있습니다.예제let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('1단계 완료'); }, 1000);});promise .then((message) => { console.log(message); // '1단계 완료' (1초 후 출력) return '2단계 완료'; }) .then((message) => { console.lo.. 2024. 8. 24. 이전 1 2 3 4 5 6 7 ··· 11 다음 반응형