DEV/Javascript
-
프로미스와 관련된 흔한 실수들DEV/Javascript 2022. 2. 21. 14:35
https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html We have a problem with promises Clarification: for these examples, I’m assuming that both doSomething() and doSomethingElse() return promises, and that those promises represent something done outside of the JavaScript event loop (e.g. IndexedDB, network, setTimeout), which is why they pouchdb.com 프로미스 사용법이 헷갈리는 사람들이 읽어보면 좋을듯! MD..
-
Object.assign, spread operator, deep mergingDEV/Javascript 2022. 2. 7. 18:01
리액트 컴포넌트 설정을 유저가 변경할 수 있게 만들려면, 우선 기본 설정 값을 객체로 제공하고 프로퍼티로 커스텀 설정 값을 받아들여 두 객체를 합쳐야 한다. 조건은 1) 커스텀 설정 값이 무조건 우선으로 오게 하고, 2) 그 값이 없는 경우에는 기본 설정 값을 사용한다. 간단한 객체 구조인 경우, 즉 깊이가 1인 객체인 경우 그냥 spread 연산자나 Object.assign()으로 간단하게 해결이 가능하다. spread 연산자와 Object.assign의 차이점은 MDN에 나와 있듯이, Object.assign은 setter 함수를 트리거하는 반면 spread 연산자는 그렇지 않다는 점이다. Setter 함수는 속성 값 설정이 일어날 때마다 호출할 함수를 속성에 묶는다(bind). 둘 사이의 간단한 성..
-
리액트에서 제공하는 React.Children 유틸리티DEV/Javascript 2021. 10. 26. 11:28
https://www.reactenlightenment.com/basic-react-components/6.8.html 6.7 Accessing Children Components/Nodes · React Enlightenment [DRAFT] Accessing Children Components/Nodes If a component, when used, contains child components or React nodes inside of the component (e.g., or test ) these React node or component instances can be accessed by using this.props.children. In the code below the Par www...
-
Udacity Intermediate Javascript Nanodegree 후기DEV/Javascript 2021. 6. 23. 14:04
https://young.medium.com/udaci-%EC%A4%91%EA%B8%89-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%82%98%EB%85%B8%EB%94%94%EA%B7%B8%EB%A6%AC-%ED%9B%84%EA%B8%B0-b9f578bc39ad Udaci 중급 자바스크립트 나노디그리 후기 반성의 시간 young.medium.com Udacity라고 썼는데 왜 Udaci까지 나오고 y가 짤린걸까? ㅎㅎ 아무튼 드디어 하나 끝!
-
Event-loop: Microtasks vs. MacrotasksDEV/Javascript 2021. 6. 20. 19:21
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth In depth: Microtasks and the JavaScript runtime environment - Web APIs | MDN When debugging or, possibly, when trying to decide upon the best approach to solving a problem around timing and scheduling of tasks and microtasks, there are things about how the JavaScript runtime operates under the hood that may be..
-
setTimeout, setInterval 인자 넘기기DEV/Javascript 2021. 6. 13. 15:45
const promise1 = () => new Promise((resolve, reject) => { setTimeout(resolve, 3000, 5); }); const promise2 = () => new Promise((resolve, reject) => { setTimeout(reject, 3000, "Could not get value"); }); 위의 코드는 Udacity - Intermediate Javascript 예시 코드 중에 발췌한 것이다. setTimeout 사용할 때 항상 나는 아래와 같은 방식으로 첫 번째 인자 안에 함수를 구구절절 넣는 방식을 사용했는데, Udacity 예제처럼 함수 따로 먼저 넣고 인자를 뒤에 줄줄이 나열해서 넣어도 좋겠다. setTimeout(() => ..
-
Promise.all vs. Promise.allSettledDEV/Javascript 2021. 6. 8. 15:17
From ECMAScript 2022 Language Specification, The allSettled function returns a promise that is fulfilled with an array of promise state snapshots, but only after all the original promises have settled, i.e. become either fulfilled or rejected. It resolves all elements of the passed iterable to promises as it runs this algorithm. https://tc39.es/ecma262/multipage/control-abstraction-objects.html#..
-
Promise Fulfilled vs. ResolvedDEV/Javascript 2021. 6. 8. 10:50
According to the MDN Promise page, A Promise is in one of these states: * pending: initial state, neither fulfilled nor rejected. * fulfilled: meaning that the operation was completed successfully. * rejected: meaning that the operation failed. According to ECMAScript 2015 Language specification, When the Promise function is called with argument executor the following steps are taken: ... The ex..