frontend11 [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] javascript html parser API로부터 html string을 받아와서 동적으로 파싱해야 하는 기능이 있었다. 이 기능 구현하는 동안의 시행착오를 기록해두고자 한다. #1. regex 처음 시도한 방법은 regex이다. Regular expression을 잘 사용하면 빠른 시간 안에 string에서 유용한 정보를 추출하는 것이 가능하고, filter out시키거나 replace 등 다양한 케이스에 사용하기 때문에 이전에도 많이 사용했던 방법이다. const entities = html.split("\\n") .map(entity => { \\s*(.+?)\\s* const id = [...entity.matchAll(/id='entity-(\\w+)'/g)]; if(!id || id.length === 0) return ["", .. 2023. 12. 16. [TIL] npm ci vs npm install 우연히 다른 동료분이 사용해서 알게된 npm ci에 대해 정리해보고 기존에 사용하던 npm install과 비교해 보았다. 참고 문서: https://docs.npmjs.com/cli/v10/commands/npm-ci Description clean-install의 줄임말이다. test platform, continuous integration, deployment같은 자동화된 환경에서 사용하는 것을 목적으로 한다. npm install과의 차이점 project는 무조건 package-lock.json이 이미 존재해야 한다. package-lock.json과 package.json이 일치하지 않는 경우 업데이트하는 것이 아닌, error를 리턴한다. individual dependency가 추가되지는 .. 2023. 10. 17. Canvas vs Svg 업무를 진행하면서 브라우저에 다양한 도형을 그리고, 텍스트를 넣고, 도형들을 편집해야 하는 요구사항이 있었다. 도형의 개수가 많고, 많은 편집 작업이 필요하기 때문에 렌더링 성능도 중요하게 생각해야 했다. Konva https://github.com/konvajs/vue-konva 가장 간단하게 구현할 수 있고, 기본적인 기능들은 built-in으로 구현되어 있어서 가져다 쓰기만 하면 되었다. 때문에 기존 툴이 konva 기반으로 구현되어 있었다. 하지만, Konva 라이브러리를 사용하다 보니, 라이브러리에 의존적으로 코드가 작성되어 불편한 부분이 많다. 예컨대, zoom-in zoom-out시에 좌표를 일일이 변환하고, 서버에 저장할 때나 이미지 이동시 좌표 변환하는 부분이 있어 버그가 발생하기 쉽다... 2023. 9. 10. 이전 1 2 3 다음
