![]()
React에서 드래그로 요소 크기 조절하기 KaTeX Playground에서 저장된 수식이 길면 사이드바를 넘어 안 보이는 경우가 있습니다. 드래그를 통해 사이드 바의 크기를 조절할 수 있는 기능을 추가했습니다. 드래그 기능 추가 작동 원리 먼저 드래그할 부분에 실제로 드래그할 요소를 생성합니다. 이 요소를 엣지라고 부르겠습니다. 엣지를 클릭하면 드래그가 시작되고 드래그에 따라 사이드바의 너비를 변경해 줄 겁니다. 엣지의 `mouseDown` 이벤트는 드래그의 시작을 알립니다. 드래그가 시작되면 페이지 어디서나 마우스가 움직이면 사이드바를 resize 하도록 document의 `mouseMove`이벤트에 resize 이벤트 리스너를 추가합니다. 마우스가 움직이면 `mouseMove`이벤트가 발생하고 사이..
![]()
KaTeX Playground 블로그를 글에 수식을 적는 일이 많아 KaTeX를 자주 사용합니다. 매번 미리 보기로 확인하는 것이 번거로워 바로 수식을 확인할 수 있는 `KaTeX playground`를 제작했었습니다.(관련 글) 사용하면서 예전에 썼던 문법을 찾는 일이 잦았고 수식을 저장하는 기능을 추가 해야겠다는 생각이 들었습니다. 수식을 저장, 삭제, 복사하는 기능을 추가했고 저장한 수식을 URI를 통해 공유하는 기능도 추가했습니다. URI로 공유하기 때문에 다른 사람에게 보내기도 쉽고 URI만 클라우드에 적어두면 KaTeX Playground도 클라우드를 이용하는 것처럼 사용할 수 있습니다. 예시로 제가 작성한 수식을 공유하는 링크를 올려봅니다. 사이드바에서 저장되어 있는 수식을 확인해 보세요. ..
