반응형 javascript107 [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. [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 문법] 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. 이전 1 2 3 4 5 6 7 ··· 11 다음 반응형