React3 [React + Next] String data 를 HTML 로 사용하기 1. 기존 코드detail 변수 안에 request 해서 받은 데이터를 담아서 그중 content라는 key 값을 사용하고자 함string으로 떨어지는 해당 값은 안에 '\n' 또는 '\r'을 포함하고 있어서, 그 문자열을 활용해야 했는데,처음에는 아래와 같은 방법을 적용했다.{detail.content && detail.content.split("\n").map((line, index) => { return ( {line} )})} 2. 요구 사항위의 코드는 데이터로 떨어진 string 을 화면에 보여주되, '\n' 일 때 문자열을 잘라서 줄바꿈을 (어찌보면) 강제로 적용시킨 코드였다.따라서, 추후 와 같은 HTML 형식의 string 값을 받았을 때 tag 별 .. 2024. 8. 28. Lottie (w/ next.js) 지난 번에 Vue 에서 Lottie 사용하는 방법을 정리했는데,이제는 React + Next 기반 프로젝트를 하고 있어서 다시금 Lottie 정리 ! 🚨 next 의 ssr 렌더링 때문에 document is not defined 이슈 발생 ⇒ dynamic import 로 대체(이미 next 사용자에겐 나름 익숙하기 때문에 next/dynamic 에 대한 설명은 생략)단, lazy-loading 관련 next 공식 문서를 참고용으로 첨부 https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading Optimizing: Lazy Loading | Next.jsLazy load imported libraries and Re.. 2024. 8. 14. 코드 노트 오호 ? 하는 코드 기록장 🧐 1. 마우스 휠 스크롤 (React) // DOM 제어를 위해 useRef 사용 const elRef = useRef(null); useEffect(() => { const el = elRef.current; if (el) { const onWheel = (e: any) => { if (e.deltaY == 0) return; e.preventDefault(); el.scrollTo({ left: el.scrollLeft - e.deltaY, behavior: 'smooth', }); }; el.addEventListener('wheel', onWheel); return () => el.removeEventListener('wheel', onWheel); } }, [elRe.. 2023. 5. 22. 이전 1 다음 반응형
