하얀 코딩

export와 export default는 JavaScript의 ES6 모듈 시스템에서 사용되는 두 가지 주요한 내보내기 방식입니다. 각각의 특징과 차이점을 살펴보겠습니다. export 이름이 있는 내보내기(Named Exports)로 여러 개의 항목을 동일한 모듈에서 내보낼 수 있습니다. 해당 모듈을 가져올 때 { }를 사용하여 구체적인 이름으로 가져올 수 있습니다. // module.js export const foo = 'foo'; export const bar = 'bar'; // app.js import { foo, bar } from './module.js'; export default 모듈당 오직 하나의 기본 내보내기(Default Export)만 가능합니다. { } 없이 가져올 수 있으며,..

자바스크립트에서의 모듈은 코드의 재사용성을 높이고, 유지 보수성을 향상시키기 위해 관련 있는 함수, 객체, 클래스 등의 코드 덩어리를 하나의 단위로 묶은 것을 말합니다. 모듈 시스템의 도입 이전에는 자바스크립트에서 코드의 모든 부분이 전역 범위에 있었기 때문에 변수 이름이 겹치는 등의 문제가 발생할 수 있었습니다. 모듈은 이러한 문제점을 해결하기 위해 도입되었고, 코드의 구조를 개선하며 개발자들이 더 큰 규모의 애플리케이션을 구축할 수 있게 해줍니다. 자바스크립트의 모듈은 주요 특징 및 이점이 있습니다. 모듈은 하나의 파일입니다. 브라우저에서 import ,export 지시자를 사용하려면 같은 속성이 필요합니다. 모듈은 아래와 같은 특징을 지닙니다. 모듈은 자신만의 스코프를 갖습니다. 모듈 간 기능 공유..

URLSearchParams는 웹 API의 일부로 URL의 검색 매개 변수(query parameters)를 쉽게 다룰 수 있게 도와주는 유틸리티 클래스입니다. 이것은 주로 URL의 ? 뒤에 오는 쿼리 문자열을 파싱하거나 조작할 때 유용합니다. 여러가지 메서드 중에 일부 기능 및 사용법을 알아보겠습니다. 초기화 const params = new URLSearchParams("q=search&order=desc"); 특정 키의 값 얻기 const qValue = params.get("q"); // "search" 모든 키의 값 얻기 for (let [key, value] of params) { console.log(key, value); } 키 추가 / 업데이트 params.set("newKey", "ne..

async async는 function 앞에 위치합니다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다. await // await는 async 함수 안에서만 동작합니다. let value = await promise; 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다. (await '기다리다’). 결과는 그 이후 반환됩니다. 1초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다. async function f() { ..

Promise.prototype.all() let promise = Promise.all([...promises...]); Promise.all()은 여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용합니다. 인자로는 배열을 받습니다. 해당 배열에 있는 모든 Promise에서 executor 내 작성했던 코드들이 정상적으로 처리가 되었다면 결과를 배열에 저장해 새로운 Promise를 반환 해줍니다. 앞서 배운 Promise chaining을 사용했을 경우는 코드들이 순차적으로 동작되기 때문에 총 6초의 시간이 걸리게 됩니다. 또한, 같은 코드가 중복되는 현상도 발생하게 됩니다. // Promise chaining을 사용 const promiseOne = () => new Promise((resolve,..

본 내용은 Promise 개념의 내용을 포함하고 있지 않습니다. Promise를 모른다면 다음 사이트에서 Promise의 개념을 이해하고 보시길 바랍니다. [JavaScript - 21] Promise Promise 비동기로 작동하는 코드를 제어할 수 있는 다른 방법 중 Promise를 활용하는 방법이 있습니다. Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성합니다. 또한 Promise는 비동기 처 white120.tistory.com Promise.prototype.then() executor(실행자)에 작성했던 코드들이 정상적으로 처리가 되었다면 resolve 함수를 호출하고 then()으로 접근할 수 있습니다. 또한 then() 안에서 리턴한 값이 Promise..

Promise 비동기로 작동하는 코드를 제어할 수 있는 다른 방법 중 Promise를 활용하는 방법이 있습니다. Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성합니다. 또한 Promise는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달받습니다. let promise = new Promise((resolve, reject) => { // executor(실행자): 여기에는 개발자가 수행할 작업을 알아서 코딩합니다. resolve(1); // 일이 성공적으로 끝난 경우 그 결과를 나타내는 1 값과 함께 호출을 표현했다. reject(error); // 실패 했을 경우 에러 객체를 나타..

JavaScript에서 비동기를 경험하게 되는 첫번째 단계는 타이머와 관련된 API입니다. 해당 API는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있습니다. setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 setTimeout(function () { console.log('1초 후 실행'); }, 1000); 1. callback 실행할 콜백 함수 2. millisecond (1000ms = 1s) 콜백 함수 실행 전 기다려야 할 시간 3. return 임의의 타이머 ID. index 번호로 1번 부터 출력 된다. clearTimeout(timerId) setTimeout 타이머를 종료 const timer = setTimeout(fun..