frontend4 [TIL] Prism.js: code prettier html과 json을 예쁘게 보여줄 필요가 있어 라이브러리를 찾아보다가 prism.js를 사용해 보게 되었다. react에서 사용해 보기 위해 prism-react-renderer부터 시작해봤다. npm install --save prism-react-renderer {({ className, style, tokens, getLineProps, getTokenProps }) => ( {tokens.map((line, i) => ( {line.map((token, key) => ( ))} ))} )} custom theme이 다양하게 있었지만, 오히려 기본 theme이 어울릴 것 같다는 의견에 서드파티가 아닌 Prism.js 공식 사이트에서 제공해준 대로 개발해 보았다. npm i -D @types/pri.. 2024. 1. 11. [TIL] html에서 돋보기 뷰 구현하기 svg를 이용한 작업을 진행 중에, 특정 부분을 확대한 뷰를 구현해야 하는 태스크가 있었다. 돋보기 뷰를 구현한 과정을 정리해 보았다. Use 태그 기존 svg 태그를 동일하게 복사해서 scale과 translate하는 작업이 필요하다. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use use 태그는 svg 도큐멘트 내부에서 node를 가져와서 복사한다. use 태그는 id를 이용해서 svg 요소를 복사해 온다. 예제 돋보기 뷰 돋보기 뷰의 요구사항은 다음과 같다. 상하좌우로 최소 마진을 설정한다. svg 내의 특정 엘리먼트를 클로즈업해서 보여준다. 원본 엘리먼트와 동일한 비율로 확대/축소한다. html js window.onload = () =.. 2023. 4. 3. [팁] MutationObserver에 대해 알아보자 MutationObserver는 Web API로 DOM 변경을 감지할 때 사용한다. MutationObserver - Web API | MDN // 대상 node 선택 var target = document.getElementById('some-id'); // 감시자 인스턴스 만들기 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // 감시자의 설정: var config = { attributes: true, childList: true, characterData: true }; // 감시자 옵션 포함, 대상 노드에 .. 2023. 1. 10. [팁] IntersectionObserver에 대해 알아보자! React로 프로그래밍을 하다 보니 화면 밖으로 벗어날 때 처리가 필요했다. 내 경우에는 scroll로 화면에 벗어날 때 / 화면으로 들어올 때를 감지하는 것이 필요했다. 관련된 API를 찾아보다가, IntersectionObserver가 Web 기본 스펙에 포함되어 있어서 소개해 보고자 한다. https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API 사용 예시 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩. 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현. 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고. 사용자에게 .. 2023. 1. 10. 이전 1 다음
