웹30 [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. [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. [S3] AWS S3 fetch시 cors문제 해결 텍스트 에디터를 달아 글 작성을 완료할 때 반환받은 HTML을 파일로 만들어 S3로 업로드했다. DB에는 당연히 S3에 업로드 후 반환받은 url을 집어넣는다. 그리고 해당 글을 불러올 때 해당 url로 fetch 요청을 날리면 CORS 에러가 발생한다. 여태껏 이미지를 저장할 용도로 S3를 많이 사용했으니 fetch 요청 시에 CORS 에러가 발생한다는 건 처음 알았다. 이미지는 src 프로퍼티에 적어주기만 하면 되니까 말이다. 해당 코드에서 CORS 에러가 발생한다. axios.get(`${res?.html_url}`).then((data) => setHtml(data.data)); 여러 블로그를 참고하여 문제를 해결했는데, 방법은 크게 복잡하지 않았다. 먼저 S3 -> 버킷 -> 권한에 들어가서 제.. 2022. 9. 20. 이전 1 2 3 4 5 6 7 8 다음
