웹14 [React/Typescript] 라이브러리없이 웹 캐싱 기능 구현하기 React Query같은 라이브러리를 쓰지 않고 내장된 Service Worker API를 통해 간단히 캐싱 기능을 구현할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Cache Cache - Web API | MDN Cache 인터페이스는 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 다음
