담백한 웹 개발 이야기

글의 목적 기존에 사용하던 콜스택 구조를 코루틴으로 변경하고, 코루틴를 통해 지연 평가를 발생시켜 콜스택과 차이를 설명한다. 콜스택과 코루틴 비교 배열을 인자로 받아 홀수만 리턴하는 odd와 숫자를 인자로 받아 숫자만큼 리턴하는 take를 콜스택과 코루틴 동작을 비교한다 콜스택 중첩함수 중 내부에 사용된 odd가 실행된 뒤, take가 실행된다. 배열의 크기만큼 루프가 반복되는 것을 알 수 있다. function odd(arr) { const newArr = [] for (const v of arr) { console.log(`odd ${v}`) if (v % 2) { newArr.push(v) } } return newArr } function take(arr, n) { const newArr = []..

async 함수 async 함수는 Promise를 반환한다. const f = async () => {} f() // Promise 정상적인 동작으로 값을 반환하면 then에서 받을 수 있다. const f = async () => 'Hi!' f().then(console.log) // Hi! 비정상적인 동작으로 에러를 발생하면 catch에서 받을 수 있다. const f = async () => die; f().catch(error => console.log('에러 발생!')) // 에러 발생! async에서 Promise 반환 async 함수의 반환값으로 Promise를 사용하면 호출자에서는 async 함수 사용과 동일하게 사용된다. resolve 상태면 then으로 처리되고, reject 상태면 c..

목차 Promise 상태 응답 결과 전달 방법 마이크로테스크 연속적인 동작 Promise API catch 케이스 스터디 적용 사례 Promise 상태 Promise의 상태는 대기, 이행, 거부 상태가 있다. 상태는 대기에서 이행/거부로만 변경이 가능하다. 대기 : 초기상태 이행 : 성공 상태, resolve(), Promise.resolve() 거부 : 실패 상태, reject(), Promise.reject() 이행상태는 then으로 처리할 수 있다. resolve를 통해 전달한 값이 then에 인자로 전달된다. Promise.resolve(10) .then(result => console.log(result)) // 10 거부상태는 catch으로 처리할 수 있다. reject를 통해 전달한 값이 c..

출처 : [니콜라스 자카스] 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 글의 목적 자바스크립트에서 this를 다루기 위해서는 this에 대한 깊은 이해가 필요하다. 그리고 프런트 개발자라면 기술면접시 질문을 받아봤을 만한 단골 문제이기도 하다. 이 글은 자바스크립트에 입문할 때 하나의 산이었던 this를 정리한 내용이다. this란 this란 호출부의 참조이다. 호출부의 참조를 결정하는 방법은 네가지가 있다. 첫번째, 단독 함수 실행 할 경우 전역 객체가 기본 바인딩이 된다. 전역에서 함수를 호출하고 함수가 this를 참고하면 전역 객체를 사용하게 된다. function foo() { console.log(this.a); } var a = 'Hello World'; foo(); // Hello Wo..

서사 자바스크립트의 기반이 되는 ECMAScript가 매년 새로운 문법이 추가되기 때문에 자바스크립트는 매년 새로운 문법이 추가됩니다. 프런트 엔드 개발자라면 자바스크립트는 기본적으로 능숙하게 다루겠지만 그렇다고 자바스크립트의 문법을 잘 안다고 할 순 없습니다. 실무에 몇 년, 몇십 년 일해도 가끔은 뒤돌아서 기본을 볼 필요가 있다고 생각합니다. 이 글에서는 현재의 자바스크립트 기반이 되는 ECMAScript 2015를 정리했습니다. var vs let var is Function Scope var 키워드는 Function Scope로 블럭에 정의를 해도 블럭 밖에서 사용이 가능합니다. if (true) { var x = 3 } console.log(x) //3 let is Block Scope let ..

서사 컴포넌트 Props에 tailwindcss의 클래스명을 받을 때가 있다. 타입 선언할 때 단순하게 string으로만 정의하기도 하는데, string으로 정의해서 의도하지 않게 버그가 발생하는 경우가 있었다. 예를 들어서 아이콘 컴포넌트에서 w-*, h-*를 함께 받아야 하는데, string으로만 정의하면 컴파일 타임에 알 수 없다. 타입스크립트의 탬플릿 리터럴과 infer를 활용하면 사용하면 안되는 클래스명과 쌍으로 사용해야 하는 클래스명을 타입을 통해 알 수 있다. Tailwind ClassName fill-* 대신 text- 사용하도록 처리 fill-*를 사용하면 text-*로 사용하라고 알려준다. T extends `${infer U}fill${infer V}` ? `${U}text${V}` ..

서사​ REST API에 HTTP 요청할 때 각 컴포넌트 파일에서 동시에 실행하는 경우가 있었다. 이때 사용측을 수정하는 것 보다는 함수 정의측을 수정하는 게 수정을 최소화 할 수 있다고 판단해서 debounce 함수를 만들어서 해결했다. 함수 인자가 없는 경우도 있고, 함수 인자를 필요한 경우도 있어서 콜백 타입 추론하도록 처리했다. ​ 타입 추론 코드 export const debounce = void, PropCallback = (prop: Prop) => void, >( callback: Callback extends (prop: Prop) => void ? (pr..