JavaScript 비동기 흐름 제어: Promise.all, Promise.race 활용법

비동기 프로그래밍은 현대 JavaScript 개발에서 필수적인 요소입니다. 특히, 여러 비동기 작업을 동시에 처리해야 할 때 Promise.all과 Promise.race는 매우 유용합니다. 이번 글에서는 이 두 메서드의 활용법을 자세히 살펴보겠습니다. Promise.allPromise.all은 여러 개의 프로미스를 병렬로 처리하고, 모든 프로미스가 완료되면 하나의 프로미스를 반환합니다. 다음은 Promise.all의 기본적인 사용 예제입니다:const promise1 = fetch('/api/data1');const promise2 = fetch('/api/data2');const promise3 = fetch('/api/data3');Promise.all([promise1, promise2, prom..

• format_list_bulleted LANGUAGE/JavaScript
• · 2024. 5. 29.
• textsms

JavaScript 클로저(Closure)의 원리와 활용 방법

JavaScript를 사용하다 보면 "클로저(Closure)"라는 개념을 접하게 됩니다. 클로저는 자바스크립트의 강력한 기능 중 하나로, 함수와 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 이번 글에서는 클로저의 원리와 활용 방법에 대해 자세히 알아보겠습니다. 클로저란 무엇인가?클로저는 함수가 생성될 때 함께 생성된 환경을 기억하는 기능입니다. 이 환경에는 함수가 생성될 당시의 변수들이 포함됩니다. 쉽게 말해, 클로저는 함수가 선언된 스코프 외부에서도 해당 스코프의 변수를 기억하고 접근할 수 있게 합니다. 클로저의 기본 예제아래는 클로저의 기본적인 예제입니다:function outerFunction() { let outerVariable = 'I am outside!'; functi..

• format_list_bulleted LANGUAGE/JavaScript
• · 2024. 5. 28.
• textsms

JQuery Ajax 사용법 정리

JQuery Ajax 사용법에 대해 포스팅하겠습니다. 먼저 Ajax란 Asynchronous Javascript And Xml (비동기식 Javascript And Xml)의 약자로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 기능입니다. 기본 사용법: JQuery.ajax({Settings}) Settings에 들어가는 옵션들을 살펴보겠습니다. 대표적인 옵션만 기술합니다. 옵션 타입 기본값 설명 url String HTTP Request 보낼 주소 method String GET HTTP Request 메소드 (GET, POST 등) data Object or String or Array 요청과 함께 보낼 데이터 dataType String Intelligent Guess ..

• format_list_bulleted LANGUAGE/JavaScript
• · 2022. 6. 26.
• textsms

JavaScript/JQuery 선택자 (Selector) 모음

JavaScript와 JQuery에서 사용되는 선택자들에 대해서 살펴보겠습니다. JQuery와 CSS의 선택자로 더 잘 알려져 있지만 JavaScript에 querySelector() 및 querySelectorAll()을 통해 접근 시 같은 선택자를 사용합니다. * 물론 JavaScript에서 getElementById() 와같은 함수가 더 빠르고 지원이 잘 되지만 속도를 체감하기도 힘들뿐더러 코드가 더 깔끔하고 가독성이 좋다고 생각해 저는 querySelector()를 사용합니다. 기본 선택자 1. * : 모든 요소 선택 // 모든요소 선택 $("*") document.querySelectorAll("*") 2. # : ID 선택자 (ID명으로 선택) // ID명이 'btnPrev'인 요소 선택 $(..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 12. 19.
• textsms

JavaScript 빈 값, undefined, Null 체크 공통함수

JavaScript 코딩을 하다 보면 데이터의 유효성 체크를 해줘야 할 때가 많이 있습니다. 특히 null 이나 undefined 값에 기본 함수를 사용할 시 에러가 발생할 때가 많이 있습니다. 데이터의 유효성 체크해야하는 경우 // 문자열의 길이를 리턴하는 함수 function getLength(str) { return str.length } getLength("hello") // 5 getLength(null) // error 발생 문자열이나 배열의 길이를 리턴하는 기본 속성 length는 null이나 undefined에 사용할 경우 에러가 발생합니다. 아주 간단한예를 들었습니다만, 직접 프로그램을 짜다 보시면 위처럼 데이터가 유효한 값인지, 빈 값은 아닌지 체크해야 하는 경우를 많이 느끼실 수 있을..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 10. 17.
• textsms

IndexedDB 사용법 정리

IndexedDB 사용법을 간단히 정리하여 포스팅하려 합니다. 기본적인 CRUD부분에 대한 내용입니다. IndexedDB는 웹 인터페이스 중 하나로 로컬 데이터베이스 역할을 합니다. 브라우저에서 제공하는 데이터베이스 라고 이해하면 편하겠습니다. localStorage, sessionStorage에 저장하기에는 많은 양의 데이터를 저장할 때 주로 쓰입니다. Database 만들기 - 브라우저는 여러개의 Database를 가질 수 있습니다. - Database에는 Version정보가 있고 여러 개의 ObjectStore를 가질 수 있습니다. ( Database 수정시에는 Version을 수정해야 합니다. ) - indexedDB.open(db_name, version) 함수로 Database를 열도록 요청합..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 9. 23.
• textsms