티스토리

프도

검색하기

블로그 홈

프도

happy8131.tistory.com/m

프도의길 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

async await 비동기 async: 비동기 작업을 만드는 손쉬운 방법 async 키워드는 함수를 선언할 때 붙여줄 수 있습니다. async 키워드가 붙은 함수를 async 함수로, async 가 없는 함수는 일반 함수라고 부르도록 하겠습니다. 의미를 생각해본다면 async 함수는 비동기 작업 그 자체를 뜻한다는 말일 것 같은데, 실제로 우리가 어떻게 사용해볼 수 있을까요? async 함수는 Promise 와 굉장히 밀접한 연관을 가지고 있는데, 기존에 작성하던 executor 로부터 몇 가지 규칙만 적용한다면 new Promise(…) 를 리턴하는 함수를 async 함수로 손쉽게 변환할 수 있습니다. 함수에 async 키위드를 붙입니다. new Promise... 부분을 없애고 executor 본문 내용만 남깁니다. resol.. 공감수 0 댓글수 0 2022. 1. 8.
Promise 비동기 Promise Promise 는 비동기 작업의 단위 입니다. 지금까지 이야기했던 것들은 자바스크립트에서 동시에 여러 가지 작업을 할 수 있다는 개념을 비동기로 은근슬쩍 설명했고, 지금부터는 Promise 를 통해 어떻게 비동기 작업들을 쉽게 관리할 수 있는지를 본격적으로 알아보겠습니다. 기본 사용법 우선 Promise 로 관리할 비동기 작업을 만들 때에는, Promise 에서 요구하는 방법대로 만들어야 합니다. 여러가지 방법이 있지만 제일 정석적인 방법은 new Promise(...) 하는 것입니다. 아래 예제 코드를 봐주세요. const promise1 = new Promise((resolve, reject) => { // 비동기 작업 }); 복사하기 문법적으로 보충 설명해보겠습니다. 변수의 이름은 p.. 공감수 0 댓글수 0 2022. 1. 8.
fetch fetch를 이용한 네트워크 요청 소요시간 : 4 min 비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청입니다. 네트워크를 통해 이뤄지는 요청은 그 형태가 다양합니다. 그 중에서 URL로 요청하는 경우가 가장 흔합니다. URL로 요청하는 걸 가능하게 해 주는 API가 바로 fetch API입니다. 한 가지 예를 들어보겠습니다. 다음은 흔히 볼 수 있는 포털 사이트입니다. 이 사이트는 시시각각 변하는 정보와, 늘 고정적인 정보가 따로 분리되어 있는 구성을 확인할 수 있습니다. 이 중에서 최신 뉴스나 날씨/미세먼지 정보가 바로 동적으로 데이터를 받아와야 하는 정보입니다. 이럴 때 많은 웹사이트에서는 해당 정보만 업데이트하기 위해 요청 API를 이용합니다. 이 콘텐츠에서는 그 중 대표적인 fetch A.. 공감수 0 댓글수 0 2022. 1. 8.
콜백 비동기처리… Callback 콜백이란? 함수가 끝나고 난 뒤에 실행되는 함수. 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다. 왜? 자바스크립트는 이벤트 중심의 언어이다. 즉, 자바스크립트는 이벤트의 값이 반환될 때까지 기다리지 않고 다음의 이벤트를 계속 실행한다. 따라서 비동기적인 함수를 실행할 경우, 대표적으로 API 요청 등에서 특별한 처리를 해주지 않으면 함수를 원하는대로 실행하기 어렵다. function first(){ // Simulate a code delay setTimeout( function(){ console.log(1); }, 500 ); }function second(){ conso.. 공감수 0 댓글수 0 2022. 1. 8.
동기/비동기 동기호출 요청에 대한 결과가 동시에 일어난다. 비동기호출 요청에 대한 결과가 동시에 일어나지 않고 요청을 한번데 다받고 이벤트가 준비 되었을 때 응답을 나중에 이루어짐 비동기 작업의 사용성 문제 비동기 작업은 여러 작업을 동시에 수행할 수 있는 장점이 있지만, 의존성이 길게 이어져 있는 비동기 작업들을 처리할 때 곤혹에 치를 수 있습니다. 왜냐하면 비동기 작업이 시작되는 시점은 함수 호출이며, 또한 이 함수 호출 시점에 다음 작업(콜백 함수)도 넘겨줘야 하기 때문입니다. 이런 행태를 이른바 콜백 지옥이라고 합니다. 콜백 지옥에 관련해서는 크게 다루지 않도록 하겠습니다. 종종 콜백 지옥에 의해서 Promise 가 등장했다고 설명하시는 분들도 있는데, 제 견해는 좀 다릅니다. callback 방식보다 Pro.. 공감수 0 댓글수 0 2022. 1. 8.
클로저 자바스크립트에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있습니다. 그 중 종종 사용되는 클로저라는 개념에 대해서 알아보겠습니다. 외부 함수에 접근할 수 있는 내부함수 혹은 이러한 원리를 일컫는 용어인데 스코프에 따라서 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다. 특징으로는 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는다. 예를 들어 한 함수안에 다른 함수가 있다면 그 안의 함수는 바깥에 정의해놓은 변수를 사용할 수 있지만 그 반대는 가능하지 않다 클로저의 활용 데이터를 보존하는 함수 const add = function (x) { //외부 함수의 변수 x return function (y) .. 공감수 0 댓글수 0 2021. 10. 30.
문자열 문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 따옴표 따옴표의 종류가 무엇이 있었는지 상기해봅시다. 문자열은 작은따옴표나 큰따옴표, 백틱으로 감쌀 수 있습니다. let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이가 없습니다. 그런데 백틱엔 특별한 기능이 있습니다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있죠. 이런 방식을 템플릿 리터럴(templa.. 공감수 0 댓글수 0 2021. 10. 5.
숫자형 모던 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원합니다. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려진 64비트 형식의 IEEE-754에 저장됩니다. 튜토리얼 전체에서 이 형식을 사용하여 숫자를 표현할 예정입니다. 임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌습니다. BigInt는 아주 특별한 경우에만 사용되므로, 별도의 챕터 BigInt에서 자세한 내용을 다루겠습니다. 자, 그럼 일반적인 숫자에 대해서 자세히 알아봅시다. 숫자를 입력하는 다양한 방법 10억을 입력해야 한다고 상상해 봅니.. 공감수 0 댓글수 0 2021. 10. 4.
new 연산자와 생성자 함수 new 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. 예시: function User(name) { this.name = name; this.isAdmin = false; }.. 공감수 0 댓글수 0 2021. 10. 2.
메서드와 this 메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sa.. 공감수 0 댓글수 0 2021. 10. 1.
객체 복사, 병합과 Object.assign 참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠. 예시: let message = "Hello!"; let phrase = message; 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장됩니다. 그런데 객체의 동작방식은 이와 다릅니다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. 그림을 통해 변수 user에 객체를 할당할 때 무슨 일이 일어나는지 알아봅시다. let user = { name: "John" }; 객체는 메.. 공감수 0 댓글수 0 2021. 10. 1.
구조 분해 (Destructing) 구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말합니다. 분해 후 새 변수에 할당 배열 const [a, b, ...rest] = [10, 20, 30, 40, 50]; // 질문: a, b, rest는 각각 어떤 값인가요? 객체 const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} // 질문: a, b, rest는 각각 어떤 값인가요? 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다. 선언없이 할당하는 경우, 이 콘텐츠의 하단있는 공식문서 링크를 통해 내용을 확인할 수 있습니다. 유용한 예제: 함수에서 객체 분해 functio.. 공감수 0 댓글수 0 2021. 9. 22.
Spread/Rest 문법 Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요.. 공감수 0 댓글수 0 2021. 9. 22.
참조 자료형 자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형입니다. 배열([])과 객체({}), 함수(function(){})가 대표적입니다. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부릅니다. 그 이유에 대해서 자세히 설명 드리고자 합니다. 이전에 말씀 드렸지만 컴퓨터가 처음 사용되던 시절에는 배열, 즉 리스트라는 개념을 구현하기가 어려웠습니다. 그래서 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현하기 시작했습니다. 이 흔적은 csv에서도 찾아볼 수 있습니다. 쉼표로 구분된 데이터(comma-separated values)라는 의미죠. 10,20,30,40,50,60 이렇게 하나의 스트링을 split 하던.. 공감수 0 댓글수 0 2021. 9. 22.
원시 자료형 자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number,bigint, boolean, undefined, symbol, (null) 을 말합니다. 이 중에서 자주 사용하는 4 (+1)가지 원시 자료형 string, number, boolean, undefined, (null) 을 살펴보겠습니다. 이 데이터를 유심히 볼까요? 모두 어떤 종류의 데이터인가요? 왜 원시 자료형이라고 부르나요? 'string', 42, true, false, undefined // 데이터가 "하나"의 정보를 담고 있습니다. 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있습니다. 옛날에 어떻게 코드.. 공감수 0 댓글수 0 2021. 9. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.