~Next.JS, React 환경 기준으로 작성된 글입니다~ JSON 에디터 컴포넌트가 필요해서 외부 에디터 라이브러리 중 하나인 AceEditor를 활용했다.공식 문서 바로가기 | React 기준 미리 보기 페이지 그러나... Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost/worker-html.js' failed to load 이런 에러메시지가 뜨면서 에디터가 제대로 로드되지 않는 이슈가 발생했다.어떻게 어떻게 찾은 해결 방법은 아래와 같다. { onChange(t); }} value={jsonValue}..

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver - Web APIs | MDNThe ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.developer.mozilla.orgResizeObserver는 html 엘리먼트의 내용물 크기 또는 svg의 바운딩박스의 변화를 추적해 주는 인터페이스다.new ResizeObserver() 로 인스턴스를 생성한 뒤, 추적하고 싶은 엘리먼트를 observe 하면 끝이다.추적을 멈추고 싶을 ..

검색용 컴포넌트를 구현함에 있어서, 타자를 칠 때마다 API를 날려 매번 DB를 조회하기보다는입력 후 지연시간을 두어 검색 API를 날릴 수 있도록 했다. 전체 코드import React, { useState, useEffect } from 'react';const SearchComponent = () => { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]); const [timeoutId, setTimeoutId] = useState | null>(null); const fetchSearchResults = async (term: string) => { ..

빠른 결론JSON.parse 두번 하거나 정규식으로 이스케이프 문자를 제거하면 된다.  JSON을 문자열화한 값을 서버에서 받아서 프론트에서는 그 문자열을 파싱해서 사용한다고 하자. const original = "{\"type\":\"test\",\"content\":{\"title\":\"타 이 틀\",\"content\":\"내용\"}}";const parsedData = JSON.parse(original); console.log(parsedData); // {"type":"test", "content":{"title":"타이틀", "content":"내용"}}console.log(parsedData.type); // undefined 위처럼 코드를 작성했는데 parsedDat..