JH 개발 블로그

lodash compact 배열의 falsy한 값[ false, null, 0, "", undefined, NaN ]을 제거한다] lodash 의 compact 에 대한 예시로 GraphQL 예외처리로 알아보겠다. 2022.05.08 - [TIL] - graphQL 예외처리 위와 같이 타입이 정의되어 있다고 하자. export const brandDataList = (data: GifticonsBrandListQuery | undefined) => { if (!data) return defaultBrands; const { gifticonsBrandList } = data; if (!gifticonsBrandList) return defaultBrands; const { brandList } = gift..

검색 엔터키 키가 눌렸다 떼지는 순간인 onkeyup 이벤트를 받을 곳은 버튼이 아닌 input이다. 만약 로그인 시 엔터 누르면 바로 로그인이 되도록 하는 기능을 구현하는 중이라면, 아이디-비번 순으로 입력하는 것이 일반적이므로 비밀번호를 입력하는 input 태그 내에 onkeyup 이벤트의 콜백함수를 지정해주면 되는 것이다. onkeyup 이벤트를 받고 수행할 콜백함수에는 이벤트 정보를 e로 담아준다. 이제 js 코드를 살펴보자. function onKeyUp(e){ if (e.keyCode == 13){ doSearch(); } /** if (e.key == 'Enter'){ doSearch(); } */ /** if (e.code == 'Enter'){ doSearch(); } */ } funct..

마이크로태스크 프라미스 핸들러(.then/catch/finally) 는 항상 비동기적으로 실행됩니다. 프라미스가 즉시 이행되더라도 .then/catch/finally 아래에 있는 코드는 이 핸들러들이 실행되기 전에 실행됩니다. const promise = Promise.resolve(); promise.then(() => console.log("프라미스 성공")); console.log("코드 종료"); 예시를 실행하면 '코드 종료’가 먼저, '프라미스 성공!'이 나중에 출력되는 것을 볼 수 있습니다. 프라미스는 즉시 이행상태가 되었는데도 말이죠. 뭔가 이상하네요. 왜 .then이 나중에 트리거 되었을까요? 그 이유에 대해 알아봅시다. 마이크로태스크 큐 비동기 작업을 처리하려면 적절한 관리가 필요합니다...

조건부 타입 조건부 타입이 뭐고 왜 굳이 쓰는 걸까? 다음 예시를 보자. function checkName(idOrName: string | number) { return idOrName; } checkName(1); checkName("ji"); 매개변수로 type 이 string 이나 number 가 들어갈 수 있다고 지정해주었다. 이제 checkName(1) 에 마우스를 올려보았을 때, function checkName(idOrName: string | number): string | number 위와 같이 타입이 추론된다. checkName("ji") 도 마찬가지다. 나는 checkName(1) 이면 number 로, checkName("ji") 이면 string 으로 추론되게 하고 싶다. 이럴 ..

제네릭 타입스크립트를 이제 막 배우기 시작한 단계라면 제네릭에 대한 이해가 많이 어려울 것이다. 내 생각엔 타입스크립트를 써보고 익숙해지면서(함수 타입과 interface extends 같은 것에 익숙해진 후) 나중에 제네릭을 배우면 좀 더 이해가 쉽지 않을까 싶다. (개인적인 추천) 제네릭이란 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭이 없다면... 위처럼 generic을 쓰지 않는다면, 1) 타입을 미리 지정하거나 2) any 를 이용하여 구현할 수 있다. 1) 타입을 미리 지정하자면, 확실한 타입체크가 이뤄질 수 있겠지만 항상 number라는 타입을 ..

async 코드의 문제는 에러가 발생했을 때입니다. 에러가 나면 어떻게 될까요? 아무 일도 일어나지 않습니다. 에러가 났는데 에러가 났다고 말을 안 하면 안 되겠죠? 그래서 generator 시간 때처럼 try catch문으로 감싸서 명시적으로 에러 처리를 해줍니다. async 함수는 return 또는 throw 값이 담긴 Promise를 리턴합니다. 위의 코드에서는 따라서 then(성공) 또는 catch(실패) 하면 됩니다. const returnPromise = async () => { return 'zero'; }; returnPromise().then((res) => { console.log(res); // 'zero' }); 근데 눈치 채셨나요? Promise를 리턴하기 때문에 이 코드를 다시 ..

클로저.. 개념은 많이 공부해봤지만 대체 언제 사용하는 것일까 문득 궁금해졌다. 클래스를 대체해서 사용한다고는 들었지만.. 전역 변수의 접근을 막기 위해서도 알고 있지만.. 정확하게!!!!!! 언제 어떻게 쓰이는지 궁금했다. 그래서 https://poiemaweb.com/js-closure 여기 인터넷에 있는 예시를 참고해서 클로저의 활용 사례를 정리해보려고 한다. (정리가 잘 되어 있으니 직접 읽어보는걸 추천) 즉시 실행 함수란? 클로저를 들어가기 전에 먼저 "즉시 실행 함수" 에 대해서 알아야 한다. 한 번만 실행하고 다시는 실행할 필요가 없는 함수들이 있다. 이럴 때 꼭 알맞은 기법이 있는데 바로 즉시 실행 함수를 만들어서 사용하는 것이다. 즉시 실행 함수는 함수를 정의하자마자 실행하게 만들어진 함..

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 필수적이다. 비동기 처리는 그 결과가 언제 반환될지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데, 대표적으로 setTimeout, callback, promise 가 있다. async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽다. function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. async가 붙은 함수는 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다. await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다린다. 사용 예시 const todayVisitCount = awai..

객체, 배열 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 맵 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. 맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다. new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() –..

고차 함수 const apply1 = f => f(1); const add2 = a => a + 2; console.log(apply1(add2)) const apply1 = f => f(1); // 위와 동일 const apply1 = (a => a + 2) => (a => a + 2)(1); 함수를 받아서 안에서 실행한다는 뜻 고차함수란 함수를 인자로 받아서 실행하는 함수를 얘기 한다. const times = (f, n) => { let i = -1; while (++i log(a + 10), 3); 10 11 12 출력됨 함수를 인자로 받아서 안에서 함수를 실행하게 함 함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수) const addMake..