본문 바로가기

전체 글153

[Typescript] 유니온 타입 사용 시 타입 증명하기 타입스크립트에서 유니온 타입을 유용하게 쓸 일이 되게 많다. 만약 그 유니온 타입이 primitive type끼리 유니온 연산을 한 것이라면 문제는 간단하다. typeof 연산으로 쉽게 타입을 정제할 수 있다. const func = (value: number | string) => { if(typeof value === "string") { value.toLowerCase(); } }; 하지만 복잡한 객체의 경우는 다르다. 공통으로 가진 프로퍼티가 아니면 각 객체가 가지는 프로퍼티에 접근이 불가능하다. 이때 타입스크립트에 값이 해당 프로퍼티를 가진 타입이나 인터페이스라는 것을 증명하여야 한다. interface Device { price: number; powerOn: () => void; powerO.. 2022. 11. 23.
[LeetCode/Typescript] 779. K-th Symbol in Grammar https://leetcode.com/problems/k-th-symbol-in-grammar/ K-th Symbol in Grammar - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com n = 1일 경우 0부터 시작해, n이 1일 증가할 때 마다 0은 01로 1은 10으로 바뀝니다. n = 2일 경우 0이 01로 바뀌어 01, n = 3일 경우 0이 01로 바뀌고 1이 10으로 바뀌어 0110 이 됩니다. 패턴을 찾기 위해 5번째까지 써보면 n = 1, 0 n.. 2022. 11. 7.
[React/Typescript] 라이브러리없이 웹 캐싱 기능 구현하기 React Query같은 라이브러리를 쓰지 않고 내장된 Service Worker API를 통해 간단히 캐싱 기능을 구현할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Cache Cache - Web API | MDNCache 인터페이스는 ServiceWorker 의 생명주기의 일부로 캐시 된 Request와 Response를 나타냅니다.developer.mozilla.org Cache 인터페이스들의 메서드는 위의 DOCS에서도 확인이 가능하고, 코드로도 쉽게 확인이 가능하다. 메서드들을 쉽게 사용하기 위해 유틸 함수 몇 개를 만들어보자.//utilities/cache.ts/** * 해당 이름을 가진 스토리지를 반환한다. * 만들어져 있다면, 만들어진 스토.. 2022. 10. 5.
Exported variable has or is using name from external module but cannot be named 에러 타입스크립트로 컴파일을 하다가, styled css 쪽에서 에러가 났습니다. Item은 EffectedItem을 상속받고 있는데, export const Item = styled(EffectedItem)` text-align: center; `; EffectedItem의 props의 타입이 export 되지 않아 생긴 에러였습니다. import { useTheme } from "@emotion/react"; import { forwardRef, useCallback } from "react"; import { ListItemDefaultProps, ListItemForwardedRef, } from "../../../types/props"; import { rippleEffect } from "../.... 2022. 10. 4.