new CustomCatEvent("water")오늘 공부한 내용 🌧️
오늘은 자동저장 편집기를 간단히 구현하는 강의를 수강했다.
새로 알게된 내용 🌱
커스텀 이벤트
커스텀 이벤트란 말 그대로 프로그래머가 만들 수 있는 이벤트 객체를 말한다. 아예 새로운 목적의 이벤트가 될 수도 있고, 기존에 있던 이벤트를 코드 상에서 제어하기 위한 이벤트가 될 수도 있다.
생성은 new Event나 new CustomEvent로 생성할 수 있다. 둘 다 명칭인 type을 지정해 줄 수 있고 옵션으로 bubbles와 cancelable을 선택할 수 있다. 옵션 각각은 이벤트 버블링 여부, 기본 동작 제어 여부를 나타낸다. 차이점으로 CustomEvent는 옵션으로 detail을 추가해 이벤트와 함께 정보를 전달할 수 있다.
이벤트를 발생시키고 싶을 때는 element.dispatchEvent로 이벤트를 호출한다.
원래 이벤트는 큐에서 순차적으로 처리되기에 한 이벤트가 처리 중일때 다른 이벤트가 발생해도 대기시킨다. 그러나 이벤트 핸들러 안에서 dispatch로 이벤트를 발생시킬 경우엔 즉시 처리된다. 이러한 특성을 이용해 로딩바를 트리거하는데 사용하기도 한다.
원래 기존에 있는 내장 이벤트의 type과 똑같은 커스텀 이벤트를 만드는 것은 설계 관점에서 좋지않지만 꼭 필요한 경우가 있다. 서드파티 라이브러리와 상호작용할 수단이 내장 이벤트 뿐인 경우, 테스트를 자동화하려는 경우가 이에 속한다.
일반적인 상황은 아니다.
이 때 MouseEvent나 KeyboardEvent같은 일부 UI관련 이벤트들은 다른 커스텀 이벤트처럼 생성하는 것이 아니라 자체적인 내장 생성자 클래스를 사용해야 전용 표준 속성을 활용할 수 있다.
리마인드된 내용 🔨
contentEditable
초반 강의 때 잠깐 나왔던 것 같은데 다시 나타났길래 정리해두려고 한다.
contentEditable는 HTML 요소의 속성 중 하나로 아무데나 달면 그 하위 텍스트가 편집 가능해진다. 모든 하위 요소의 텍스트에도 영향을 미치므로 기존에 <b>태그나 <i> 태그 같이 텍스트 스타일에 영향을 주는 요소가 있었다면 추가되는 텍스트에도 스타일을 적용할 수 있다.
이를 이용해 동적으로 스타일을 추가하는데 사용할 수 있는 메서드가 있다. execCommand가 그것인데 첫번째 인자에 적용하고픈 스타일의 이름을 전달하면 된다. 일부 텍스트만 적용하고 싶을 땐 범위를 선택해놓고 동작시키면 된다.
꽤 쓸만해보이지만 한계점이 존재한다.
- 브라우저간 동작이 다르게 지정되어 있다.
- 오래된 브라우저에서는 제대로 작동하지 않는다.
execCommand에 의존하지만 이는 deprecate된 메서드로 유지보수가 어려워질 가능성이 존재한다.
execCommand메서드는 클립보드 복사 용으로도 쓰였다고 한다. 당연히 지금은 쓰면 안된다.
편집기 기능을 구현해둔 라이브러리를 사용하는게 일반적인 방법이 된 것 같다.
느낀점 🎬
지난 Simple Todo App 과제에서 todo 추가 시에 다른 요소에서 이를 알게 해줄 방법이 없을까 고민하다가 모르겠어서 약간 못생기게 코드를 짰다. 당연하게도 리뷰에 지적을 많이 받았는데 커스텀 이벤트를 썼다면 깔끔하게 처리할 수 있었을 것 같다.
개인 노션 프로젝트 때 간단하게 구현하려면 contentEditable을 사용하라는 의도로 소개해준 것 같다. 하지만 나는 마크다운 파싱을 구현해보고 싶다.
참조
