프도

async: 비동기 작업을 만드는 손쉬운 방법 async 키워드는 함수를 선언할 때 붙여줄 수 있습니다. async 키워드가 붙은 함수를 async 함수로, async 가 없는 함수는 일반 함수라고 부르도록 하겠습니다. 의미를 생각해본다면 async 함수는 비동기 작업 그 자체를 뜻한다는 말일 것 같은데, 실제로 우리가 어떻게 사용해볼 수 있을까요? async 함수는 Promise 와 굉장히 밀접한 연관을 가지고 있는데, 기존에 작성하던 executor 로부터 몇 가지 규칙만 적용한다면 new Promise(…) 를 리턴하는 함수를 async 함수로 손쉽게 변환할 수 있습니다. 함수에 async 키위드를 붙입니다. new Promise... 부분을 없애고 executor 본문 내용만 남깁니다. resol..

Promise Promise 는 비동기 작업의 단위 입니다. 지금까지 이야기했던 것들은 자바스크립트에서 동시에 여러 가지 작업을 할 수 있다는 개념을 비동기로 은근슬쩍 설명했고, 지금부터는 Promise 를 통해 어떻게 비동기 작업들을 쉽게 관리할 수 있는지를 본격적으로 알아보겠습니다. 기본 사용법 우선 Promise 로 관리할 비동기 작업을 만들 때에는, Promise 에서 요구하는 방법대로 만들어야 합니다. 여러가지 방법이 있지만 제일 정석적인 방법은 new Promise(...) 하는 것입니다. 아래 예제 코드를 봐주세요. const promise1 = new Promise((resolve, reject) => { // 비동기 작업 }); 복사하기 문법적으로 보충 설명해보겠습니다. 변수의 이름은 p..

fetch를 이용한 네트워크 요청 소요시간 : 4 min 비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청입니다. 네트워크를 통해 이뤄지는 요청은 그 형태가 다양합니다. 그 중에서 URL로 요청하는 경우가 가장 흔합니다. URL로 요청하는 걸 가능하게 해 주는 API가 바로 fetch API입니다. 한 가지 예를 들어보겠습니다. 다음은 흔히 볼 수 있는 포털 사이트입니다. 이 사이트는 시시각각 변하는 정보와, 늘 고정적인 정보가 따로 분리되어 있는 구성을 확인할 수 있습니다. 이 중에서 최신 뉴스나 날씨/미세먼지 정보가 바로 동적으로 데이터를 받아와야 하는 정보입니다. 이럴 때 많은 웹사이트에서는 해당 정보만 업데이트하기 위해 요청 API를 이용합니다. 이 콘텐츠에서는 그 중 대표적인 fetch A..

비동기처리… Callback 콜백이란? 함수가 끝나고 난 뒤에 실행되는 함수. 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다. 왜? 자바스크립트는 이벤트 중심의 언어이다. 즉, 자바스크립트는 이벤트의 값이 반환될 때까지 기다리지 않고 다음의 이벤트를 계속 실행한다. 따라서 비동기적인 함수를 실행할 경우, 대표적으로 API 요청 등에서 특별한 처리를 해주지 않으면 함수를 원하는대로 실행하기 어렵다. function first(){ // Simulate a code delay setTimeout( function(){ console.log(1); }, 500 ); }function second(){ conso..

동기호출 요청에 대한 결과가 동시에 일어난다. 비동기호출 요청에 대한 결과가 동시에 일어나지 않고 요청을 한번데 다받고 이벤트가 준비 되었을 때 응답을 나중에 이루어짐 비동기 작업의 사용성 문제 비동기 작업은 여러 작업을 동시에 수행할 수 있는 장점이 있지만, 의존성이 길게 이어져 있는 비동기 작업들을 처리할 때 곤혹에 치를 수 있습니다. 왜냐하면 비동기 작업이 시작되는 시점은 함수 호출이며, 또한 이 함수 호출 시점에 다음 작업(콜백 함수)도 넘겨줘야 하기 때문입니다. 이런 행태를 이른바 콜백 지옥이라고 합니다. 콜백 지옥에 관련해서는 크게 다루지 않도록 하겠습니다. 종종 콜백 지옥에 의해서 Promise 가 등장했다고 설명하시는 분들도 있는데, 제 견해는 좀 다릅니다. callback 방식보다 Pro..

자바스크립트에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있습니다. 그 중 종종 사용되는 클로저라는 개념에 대해서 알아보겠습니다. 외부 함수에 접근할 수 있는 내부함수 혹은 이러한 원리를 일컫는 용어인데 스코프에 따라서 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다. 특징으로는 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는다. 예를 들어 한 함수안에 다른 함수가 있다면 그 안의 함수는 바깥에 정의해놓은 변수를 사용할 수 있지만 그 반대는 가능하지 않다 클로저의 활용 데이터를 보존하는 함수 const add = function (x) { //외부 함수의 변수 x return function (y) ..

문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 따옴표 따옴표의 종류가 무엇이 있었는지 상기해봅시다. 문자열은 작은따옴표나 큰따옴표, 백틱으로 감쌀 수 있습니다. let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이가 없습니다. 그런데 백틱엔 특별한 기능이 있습니다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있죠. 이런 방식을 템플릿 리터럴(templa..

모던 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원합니다. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려진 64비트 형식의 IEEE-754에 저장됩니다. 튜토리얼 전체에서 이 형식을 사용하여 숫자를 표현할 예정입니다. 임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌습니다. BigInt는 아주 특별한 경우에만 사용되므로, 별도의 챕터 BigInt에서 자세한 내용을 다루겠습니다. 자, 그럼 일반적인 숫자에 대해서 자세히 알아봅시다. 숫자를 입력하는 다양한 방법 10억을 입력해야 한다고 상상해 봅니..

new 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. 예시: function User(name) { this.name = name; this.isAdmin = false; }..

메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sa..