본문 바로가기

HTML4

[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.
Canvas vs Svg 업무를 진행하면서 브라우저에 다양한 도형을 그리고, 텍스트를 넣고, 도형들을 편집해야 하는 요구사항이 있었다. 도형의 개수가 많고, 많은 편집 작업이 필요하기 때문에 렌더링 성능도 중요하게 생각해야 했다. Konva https://github.com/konvajs/vue-konva 가장 간단하게 구현할 수 있고, 기본적인 기능들은 built-in으로 구현되어 있어서 가져다 쓰기만 하면 되었다. 때문에 기존 툴이 konva 기반으로 구현되어 있었다. 하지만, Konva 라이브러리를 사용하다 보니, 라이브러리에 의존적으로 코드가 작성되어 불편한 부분이 많다. 예컨대, zoom-in zoom-out시에 좌표를 일일이 변환하고, 서버에 저장할 때나 이미지 이동시 좌표 변환하는 부분이 있어 버그가 발생하기 쉽다... 2023. 9. 10.
가로 세로 스크롤 되는 테이블 만들기 Frontend 작업을 하다 보니 다음과 같은 테이블이 필요했다. 상하 스크롤이 필요. 단, 헤더 영역은 위에 고정 왼쪽, 오른쪽 영역은 고정된 상태로 좌우 스크롤이 필요. 즉, 스크롤 영역이 각자 다르기 때문에 테이블 자체가 쪼개져 있어야 한다는 뜻이다. 나는 이 문제를 해결하기 위해 다음과 같이 생각해 보았다. 6개 영역을 div로 처리하여 css grid를 활용, 테이블처럼 느껴지도록 배치 크게 왼쪽, 오른쪽, 가운데 영역으로 분할. 왼쪽, 오른쪽, 가운데 각각에 대해 스크롤 영역을 배치. 스크롤바는 오른쪽 영역에만 보여준다. 어느 하나라도 스크롤이 이루어진다면 다른 컴포넌트에 대해서도 스크롤 (js 이용) 크게 왼쪽, 오른쪽, 가운데 영역으로 분할되는 것은 같지만 스크롤 영역을 전체 div에 대해.. 2023. 4. 24.
[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.

티스토리툴바