ReactJS

React에서 드래그로 요소 크기 조절하기 KaTeX Playground에서 저장된 수식이 길면 사이드바를 넘어 안 보이는 경우가 있습니다. 드래그를 통해 사이드 바의 크기를 조절할 수 있는 기능을 추가했습니다. 드래그 기능 추가 작동 원리 먼저 드래그할 부분에 실제로 드래그할 요소를 생성합니다. 이 요소를 엣지라고 부르겠습니다. 엣지를 클릭하면 드래그가 시작되고 드래그에 따라 사이드바의 너비를 변경해 줄 겁니다. 엣지의 `mouseDown` 이벤트는 드래그의 시작을 알립니다. 드래그가 시작되면 페이지 어디서나 마우스가 움직이면 사이드바를 resize 하도록 document의 `mouseMove`이벤트에 resize 이벤트 리스너를 추가합니다. 마우스가 움직이면 `mouseMove`이벤트가 발생하고 사이..

가볍게 pug로 front end를 개발하다 결국 react로 전환하게 되었다. pug에서 react로 react를 몇 번 써봤고 state, props에는 익숙하지만 context API, routing은 개념만 알고 사용해 본적이 몇 번 없어 조금 더 써보고 나중에 프로젝트할 때 react를 써야지 하는 마음에 pug로 개발을 시작했었습니다. 아무래도 html, css, vanillaJS에 익숙한 저에게는 pug는 손발처럼 편했습니다. 하지만 pug로 개발하던 중 이럴 바에 찾아보면서 react로 하자 라는 생각이 들어 react로 전환하게 되었습니다. pug에서 느낀 불편함 pug에서 layout과 include를 적절하게 사용하면 react처럼 컴포넌트 단위 개발을 할 수 있습니다. 단순한 화면..