반응형 JavaScript 문법 시리즈51 [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. [JavaScript 문법] 23일차: 프로미스 기초 프로미스란?프로미스(Promise)는 비동기 작업을 처리하기 위한 객체로, 콜백 함수의 단점을 해결하는 데 유용합니다. 프로미스는 세 가지 상태를 가질 수 있습니다:대기(pending): 초기 상태, 비동기 작업이 아직 완료되지 않은 상태.이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태.거부(rejected): 비동기 작업이 실패한 상태.프로미스 생성프로미스를 생성하려면 new Promise 구문을 사용합니다. 프로미스 생성자는 두 개의 콜백 함수를 인수로 받습니다: resolve와 reject.예제let promise = new Promise((resolve, reject) => { // 비동기 작업 수행 let success = true; if (success) { reso.. 2024. 8. 23. [JavaScript 문법] 22일차: 콜백 함수 콜백 함수란?콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다. 비동기 작업을 처리하거나, 특정 이벤트가 발생할 때 실행되는 코드를 정의하는 데 유용합니다.콜백 함수의 기본 개념콜백 함수는 특정 작업이 완료되었을 때 호출되는 함수입니다. JavaScript에서는 주로 비동기 작업에서 콜백 함수를 사용합니다.예제: 콜백 함수 사용function fetchData(callback) { setTimeout(() => { let data = 'Fetched Data'; callback(data); }, 1000);}function displayData(data) { console.log(data);}fetchData(displayData); /.. 2024. 8. 22. [JavaScript 문법] 21일차: 디자인 패턴 심화 옵저버 패턴옵저버 패턴(Observer Pattern)은 객체의 상태 변화를 관찰하는 옵저버들이 그 변화를 감지하고, 필요에 따라 행동하는 패턴입니다. 주로 이벤트 핸들링 시스템에서 많이 사용됩니다.예제class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } notifyObservers(message) { this.observers.forEach(observer =.. 2024. 8. 21. 이전 1 2 3 4 5 6 다음 반응형