개발감성

allSettled const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 6000)); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 3000)); Promise.all([promise1, promise2]) .then((data) => console.log(data)) .catch(() => console.log("err")); promise 두 개중 하나는 6초 뒤 성공, 하나는 3초 뒤 실패를 하도록 세팅하고 all을 사용해 promise를 실행시키면 catch문만 실행된다. //allSettled Promise.allSettled([promise1, ..

parallel, race, sequencial은 promise 다중처리를 할 때의 정책이다. promise 다중처리 //3 promise const promisify = (item, delay) => new Promise((resolve) => setTimeout(() => resolve(item), delay)); const a = () => promisify("a", 100); const b = () => promisify("b", 5000); const c = () => promisify("c", 3000); api통신들이 시간차를 두고 도착하는 것을 명확하게 보이기 위해서 promise를 setTimeout에 의해 실행되도록 했다. parallel //parallel async function ..

ES9에서 추가된 for await of는 비동기 처리 반복문이다. const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; //for await of const getData = async () => { try { const [one, two, three, four] = await Promise.all( urls.map(async (url) => { const res = await fetc..

ES9에서 추가된 finally는 promise가 모두 실행된 후 마지막으로 무조건 실행을 시켜주는 기능을 한다. (결과의 성공, 실패에 영향 없음) //finally const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; Promise.all( urls.map((url) => { return fetch(url).then((peaple) => peaple.json()); }) ) .then..

async await async함수는 ES8부터 비동기처리를 위해 만들어진 함수 형식이다. //async await ES8 fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()) .then(console.log); async function fetchUsers() { const res = await fetch("https://jsonplaceholder.typicode.com/users"); const data = await res.json(); console.log(data); } fetchUsers(); fetch는 response를 promise객체 형태로 리턴한다. 일반 함수에 async를 붙이고 api통신을 기..

Promise promise는 비동기에서 사용되는 연산으로, 리턴하는 프로미스 객체는 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 세 가지 형태 중 하나로 나타난다. resolve, reject const promise = new Promise((resolve, reject) => { if (true) { resolve("Worked"); } else { reject("Error"); } }); 프로미스에 성공 시 수행할 연산을 암묵적으로 resolve라 하고 실패 시 수행할 연산을 암묵적으로 reject라 한다. promise는 성공을 하면(resolve가 실행되면) fulfilled 상태..

함수형 프로그래밍 operation이 많고 fixed data(회사의 사업자 등록 번호나 제품의 시리얼 번호 등) 서버와 독립적인 stateless pure declerative, 직관적인 코드 객체지향형 프로그래밍 operation이 적고 common data(고객의 이름이나 주소 등) 서버와 연관된 stateful side effect imperative, 절차에 집중된 코드 OOP - inheritance //Inheritance > what it is //tight coupling //fragile base class problem class Parent { constructor(name) { this.name = name; } sleep() {} } class Child1 extends pare..

FP FP 패러다임으로 프로그램이 어떻게 작성되는지에 대한 예시코드다. UseCase //shopping const user = { name: "Kim", active: true, cart: [], purchase: [], }; let amzHistory = []; //Shopping usecase // 1. Add items to cart // 2. Add 3% tax to item in cart // 3. Buy item: cart --> purchase // 4. Empty cart // 5. Accept refunds // 6. Track user history 사용자 객체에는 이름, 활성여부, 장바구니, 구매내역이 있다. 상품을 장바구니에 담을 수 있다. 담긴 상품은 3%의 부가세가 부과된다. ..

Compose //Compose //data >> fn >> data >> fn >> data const compose = (f, g) => (data) => f(g(data)); const multiplyBy3 = (num) => num * 3; const makePositive = (num) => Math.abs(num); const multiplyBy3AndAbsolute = compose(multiplyBy3, makePositive); multiplyBy3AndAbsolute(-50); multiplyBy3은 3을 곱해주는 함수이다. makePositive는 절댓값으로 변경해 주는 함수다. compose는 커링기법으로 두 함수 f와 g를 인자로 먼저 받고 데이터를 이후에 받아서 먼저 받은 두 함..

Memoization 메모이제이션은 함수의 동일 동작을 반복해서 처리하지 않고 저장하여 불필요한 반복행위를 방지하는 것이다. function addTo5(n) { console.log("calculation..."); return n + 5; } addTo5(5); addTo5(5); addTo5(5); 함수를 실행할 때마다 매번 같은 연산을 실행한다. //only one time calculation function memoizedAddTo5() { let cache = {}; return function (n) { if (n in cache) { return cache[n]; } else { console.log("calculation..."); cache[n] = n + 5; return cache..