웹/프론트엔드27 [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. [Next.js] Next.js에서 Toast UI Editor 사용하기 https://ui.toast.com/tui-editor TOAST UI :: Make Your Web Delicious!TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.ui.toast.com 사내 백오피스 개발 중에 웹 에디터가 필요한 기능이 생겨, 에디터 라이브러리 중 사용해본 적 있던 Toast UI Editor를 다시 붙이게 되었다.Toast UI Editor는 nhn에서 개발한 Editor인데, 아직까지는 SSR를 지원하지 않기 때문에,Next.js에 적용하려면 클라이언트 사이드에서 에디터를 불러다 렌더링해야 한다.해당 문제는 좋은 블로그 글들을 참조해 해결했지만, 그 외 겪은 다양한 문제점들도 같이 적어보려 한다.. 2022. 9. 20. 이전 1 2 3 4 5 6 7 다음
