JavaScript의 async, await에 대해 깊이 이해하기

JavaScript의 async, await에 대해 깊이 이해하기서론실험 방법실험에 사용할 함수 정의실험 결과아무것도 추가하지 않은 경우then을 사용한 경우await를 사용한 경우결론async가 붙으면 Promise를 반환합니다효과가 없는 예효과가 있는 예async와 await에 효과가 있는 예결론서론async/await와 Promise 개념에 대해 완벽하게 이해하지 못했다고 느껴, 좀 더 명확히 파악하기 위해 몇 가지 실험을 진행해 보았습니다. 이 글에서는 그 실험들을 통해 얻은 인사이트를 여러분과 공유하고자 합니다.실험 방법다음의 네 가지 함수를 사용해 실험을 진행합니다.실험에 사용할 함수 정의// Promise를 반환하는 async 함수async function a() { return new..

• format_list_bulleted Javascript
• · 2024. 7. 1.
• textsms

자바스크립트 배열 완전 정복: 희소 배열부터 다양한 메서드 활용까지

희소배열과 반복문(Sparse Arrays and Loops)for-in 문은 프로퍼티를 반복하기 때문에, for-in 문을 사용하여 희소 배열(sparse array)을 반복할 때 프로퍼티가 없는(빈) 인덱스는 건너뜁니다.공통된 3가지 for 문 특징 부분에 두 개 이상의 문(statement)이나 선언을 작성하려면 블록 문({ ... })을 사용해 하나의 문으로 묶어야 합니다.for (...) {console.log("Hello");console.log("World");}하나의 문만 작성할 때도 블록 문을 사용할 수 있습니다.for (...) {console.log("Hello");}for 문 자체는 하나의 문이므로 문이 기대되는 곳에 작성할 수 있습니다.for 문을 중첩해서 사용할 수 있습니다.fo..

• format_list_bulleted Javascript
• · 2024. 5. 17.
• textsms

JSR: 새로운 Javascript 패키지 레지스트리

JSR: 새로운 Javascript 패키지 레지스트리 최근에 JSR이라는 용어가 화제가 되고 있습니다. JSR은 JavaScript Registry의 약자로, 다음 세대 JavaScript/TypeScript 패키지 레지스트리를 의미합니다.이 글은 JSR에 대한 작성자의 단편적인 정보를 모아 작성한 것입니다. 오류가 포함되어 있을 수 있습니다. 그럴 경우 지적해 주시면 감사하겠습니다.npm과 어떤 점이 다를까요?npm은 Node Package Manager의 약자로, 이름 그대로 Node.js용으로 개발된 패키지 매니저 및 해당 패키지 매니저가 사용하는 레지스트리입니다. 그 편리함 때문에 Node.js 이외의 브라우저나 다른 런타임에서도 사용됩니다. 예를 들어 Svelte는 브라우저용 패키지이지만, No..

• format_list_bulleted Javascript
• · 2024. 3. 2.
• textsms

유용한 자바스크립트 코드 모음집

안녕하세요?개인적으로 자바스크립트 공부할 때 보는 유용한 코드 모음집입니다.** 목 차 **문자열을 배열로 분해문자열의 for...of첫 글자를 대문자로, 나머지를 소문자로 변환indexOf를 사용한 문자열의 출현 횟수 카운트문자열을 Unicode 정규화normalize 메소드의 구문NaN의 비교Number 타입의 포맷min ~ max의 난수배열에서 임의의 요소를 가져오기월의 마지막 날날짜 차이날짜/시간 값을 문자열로 변환Date 타입의 포맷레이블 문법의 break배열의 인덱스끝에서 요소를 가져오기배열의 요소 가져오기배열에 여러 요소 추가/교체/삭제splice 메소드의 구문요소 추가요소 교체요소 삭제배열의 모든 요소 위치 검색중첩 배열 평탄화flat 메소드의 구문다차원 배열의 요소 수 얻기배열 내의 요소..

• format_list_bulleted Javascript
• · 2024. 2. 17.
• textsms

JavaScript의 Promise, 그것이 알고싶다

** 목 차 **Promise의 코드화Promise를 사용하는 방법(약속을 지킨 경우)Promise를 사용하는 방법(약속을 지키지 않은 경우)Promise의 상태란 무엇인가?Pending 상태란 무엇인가?Promise를 어떻게 사용하는가?"Promise를 반환한다"는 것은 무엇을 의미하는가?Promise를 연결하는 방법8.1. 두 개의 Promise를 연결간단한 함수를 사용하여 여러 Promise를 연결하는 예를 들어보겠습니다.안녕하세요? JavaScript의 Promise를 사용해보신 분들 중에도 실제로 어떻게 작동하는지 이해하지 못하고 계신 분들이 계실 것입니다. 또한 JavaScript를 처음 배우시는 분들 중에는 Promise라는 용어를 들어보셨지만 그게 무엇인지 잘 모르시는 분들도 계실 것입니다..

• format_list_bulleted Javascript
• · 2024. 2. 13.
• textsms

자바스크립트 named export와 default export 차이점 이해하기

안녕하세요? React를 사용하면서 느끼는 의문이 있었는데요. 바로 “named export와 default export 중 어느 것을 사용하는 것이 좋을까?”라는 생각이었습니다. 그래서 여러 가지 생각나는데로 적어보았습니다. 개인적인 해석이므로, 오류가 있을 수 있으니 참고 바랍니다.Default exportdefault export의 예제입니다.// default exportexport default function sampleFunc() { return "hoge";} 그리고 import 할 때 사용하는 방법은 아래와 같습니다.import sampleFunc from "./path";Named exportnamed export 입니다.export function sampleFunc() { ret..

• format_list_bulleted Javascript
• · 2024. 2. 13.
• textsms