본문 바로가기

JS9

[TIL] Promise, async/await 오늘 처음 배운 개념과 문법은 아니지만 오늘 처음 '제대로' 알게 된 사실들이 있어서 짧게 정리(...) + 볼드 처리 해보았다. Promise let promise = new Promise((res, rej) => { // executor // res() // rej() }); - 프로미스 객체에 전달되는 executor 함수는 프로미스 객체가 생성될 때 자동으로 즉각 실행된다. - 해야할 일들이 이 함수 내부에서 처리되고 -> 그 결과에 따라 자바스크립트가 제공하는 콜백인 resolve 혹은 reject가 호출한다. - resolve, reject는 하나의 인수만 받고 나머지는 전부 무시 - 처리된 settled 프로미스에 resolve, reject를 호출해도 무시 then, catch, final.. 2022. 6. 12.
Node.js 공식 홈페이지 방문 면접 준비하는 김에 계속 미뤄왔던 Node.js를 알아보기로 했다. 몇달 전 1장을 읽으면서 머리를 쥐어뜯은 이후로 오랜만. 공식 홈페이지부터 순회했다. Node.js "비동기 이벤트 주도(asynchronous event-driven) JavaScript 런타임으로써 Node.js 는 확장성 있는 네트워크 애플리케이션(scalable network application)을 만들 수 있도록 설계"되었다. "이는 오늘날 OS 스레드가 일반적으로 사용하는 동시성 모델과는 대조적"이다. "스레드 기반의 네트워크(Thread-based networking)는 상대적으로 비효율적이고 사용하기가 몹시 어렵"다고 한다. - Node.js의 가장 큰 특징은 동시성 모델을 따르지 않는, 비동기 이벤트 주도 JS 런타임이.. 2021. 5. 11.
Class: constructor에서 async await 이번 데브매칭에서 내가 하려고 했던 가장 이상한 짓은 클래스에 async await로 constructor를 만드는 것이였다. 저렇게 하면 리액트의 componeneDidMount를 구현할 수 있을 것이라고 생각했다. 하지만 그것은 불가능한 일이였고, 안타깝게도 스택오버플로우에는 나같은 짓을 하려는 사람이 적지 않았다. Q. Is it bad practice to have a constructor function return a Promise? 답변: 맞다. constructor는 클래스의 인스턴스를 생성하고 초기화하는 일만 해야한다. constructor의 역할은 데이터 구조와 모든 인스턴스 프로퍼티를 세팅할 뿐, 다른 일을 수행하는 게 아니다. 가급적 사이드 이펙트가 없는 순수 함수여야 한다. 어떤 .. 2021. 3. 8.
배열 Array: 루프 라우쉬마이어 박사님의 블로그 글을 읽고. - for - for-in - .forEach( ) - for-of (박사님 픽) 1. for + 여러 일 할 수 있음, 첫 엘리먼트부터 시작할 필요 없을 때 유용 - 번거로움 2. for-in + - 배열의 키를 루프. 심지어 키는 숫자가 아니라 문자열. 상속된 키도 순회함. 3. .forEach( ) + ES5. 엘리먼트와 인덱스 둘다 확인 가능. 화살표 함수 OK. - 이런 루프의 "body"는 await 쓸 수 없음 - for에서는 break 사용 가능하지만 .forEach( ) 불가능 (대안: some) 4. for-of + ES6. 배열 엘리먼트 순회. await 사용 가능( for-await-of ). break, continue OK. + itera.. 2021. 3. 8.
중첩된 async await 문제점: 정신차려보니 끝없이 async await를 쓰고 있다. 중첩된 async await를 어떻게 해결할 것인가. 스택오버플로우에서 유명한 질문을 하나 찾았다. 질문: forEach로 async await를 호출해보니 작동은 하지만 왠지 수상쩍어보여 이렇게 써도 되냐고 물어봄 import fs from 'fs-promise' async function printFiles () { const files = await getFilePaths() // Assume this works fine files.forEach(async (file) => { const contents = await fs.readFile(file, 'utf8') console.log(contents) }) } printFiles() .. 2021. 3. 8.
Fetch API 보통 axios를 쓰지만 그래도 fetch를 쓴다면 const response = await fetch( url ) response 객체 프로퍼티 - headers - ok ( 200 - 299 사이면 true ) - status - statusText - redirected ... - body 메서드 - json( ) ... // Function to do an Ajax call const doAjax = async () => { const response = await fetch('Ajax.php'); // Generate the Response object if (response.ok) { const jsonValue = await response.json(); // Get JSON value fr.. 2021. 3. 5.
Array-like objects, NodeList, HTMLCollection Array-like objects - 인덱스로 접근 가능하며, length 속성이 존재 - Array.prototype을 상속하지 않는다 - 배열의 네이티브 메소드는 쓸 수 없다 - HTMLCollection, NodeList, arguments ... 배열 메소드를 사용하고 싶다면 - Array.prototype.slice.call(arguments) - Array.from( ) HTMLCollection - getElementsBy..., element.children 으로 리턴되는 객체 - 유사 배열 객체. forEach( ) 메서드 사용 불가 - [ ... collection].map( ), 혹은 Array.from(collection).map( ) - 라이브 콜렉션 NodeList : query.. 2021. 3. 4.
배열 Array: 아이템 추가 및 삭제, flat( ) 아이템 넣고 빼기 - includes( string ) : 포함했는지 확인 - shift, unshift, pop, push : 앞+, 앞-, 뒤-, 뒤+ flat an arrray Array.prototype.flat() Array.prototype.concat() + spread operator (…) Array.prototype.concat () + Function.prototype.apply() [ ].concat.apply([], [1, [2], [3, [[[4]]]]])) = [].concat(1, [2], [3, [[[4]]]]) func.apply(thisVal, argsArray) 은 thisVal에 설정된 this로 + argsArray 배열의 매개변수로 func( )를 호출 새로운 배.. 2021. 3. 3.
Intersetion Observer API 타겟 요소와 상위 요소( or document viewport ) 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법. 요소의 가시성, 두 요소의 상대적인 가시성을 탐지하는 일 필요성 - 페이지 스크롤할 때, 컨텐츠를 지연로딩으로 불러오게 하기 위해 - 페이지를 스크롤할 때, 더 많은 컨텐츠 로드 및 렌더링 ( 페이지네이션 ) - 광고 수익 계산 - 사용자에게 보일 때만 발생하는 작업들 page scroll은 모든 요소가 메인 스레드에서 실행되기 때문에 성능 문제 발생 가능성 농후 IO API - 감시 요소가 다른 요소에 들어가거나 나갈 때, 겹치는 부분이 변경될 때 콜백 함수가 실행된다. - 사이트는 요소 교차를 지켜보기 위해 메인 스레드 사용할 필요 X. 비동기로 실행. 메소드 In.. 2021. 3. 1.

티스토리툴바