웹14 [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. [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. [React/Typescript] CSS Property를 Props로 사용하는 법 컴포넌트를 만들 때, CSS Property 값을 Props로 받고 싶을 때가 있다. style 자체를 넘겨받고 싶을 땐, React에서 제공해주는 React.CSSProperties 타입을 사용하면 된다. interface TestProps { style: React.CSSProperties; } const Test = (props: TestProps) => { return ; }; export default Test; 하지만 css property 중 하나의 값을 프롭으로 받고 싶다면 어떻게 해야 할까? csstype 모듈에서 StandardProperties를 import해서 원하는 css property를 키값으로 넣어주면 된다. import type { Properties } from "csst.. 2022. 8. 22. [React] Jest SyntaxError: Cannot use import statement outside a module TDD를 공부하기 위해 Jest를 설치하고... //jest.setup.js import "@testing-library/jest-dom"; react testing library를 사용하기 위해 jest.setup.js 파일을 생성하고 test를 실행하는데 에러가 발생했다. 공식문서와 스택오버플로우를 돌아다니며 설정 프로퍼티에 대한 설명을 읽고 아래와 같이 다 세팅했음에도 SyntaxError: Cannot use import statement outside a module 에러가 자꾸 발생했는데... //babel.config.js module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/.. 2022. 8. 16. 이전 1 2 3 4 다음
