요즘 예전에 진행했다 GitHub에서 하루하루 썩어가는 프로젝트들 전반적으로 리팩터링 하는 중입니다.
웹 앱과 GitHub에서 결과물을 확인하실 수 있습니다.
3년 전에 커밋한 파일이란 점, "commit"이란 강렬한 커밋 메시지에서 짐작해볼 수 있듯 지금보다 많이 못 하던 시절에 제작한 웹 앱입니다.
명색이 블로깅하면서 가장 많이 사용하는 앱인데, 아무래도 그냥 내버려둬도 그저 그런대로 작동하다 보니 오랜 세월 방치하고 있었네요.
내부적으론 아주 많이 뜯어고쳤는데, 겉으로 볼 땐 큰 차이가 없는 걸 보면 역시 업데이트가 멈추는 시점은 앱이 완성되는 시점이 아니라 제작자의 마음이 떠나는 시점이 아닐까 다시 한 번 생각하게 되네요.
상태 관리
export default class CanvasStore extends EventTarget { canvas?: HTMLCanvasElement; width: number; height: number; text: string; font: string; fontSize: number; fontColor: string; backgroundColor: string; backgroundImage?: HTMLImageElement; backgroundOpacity: number;
constructor() { const backgroundColor = getRandomColor(); const fontColor = getProperColor(backgroundColor);
super(); this.width = 700; this.height = 700; this.text = "Sample Text"; this.font = "sans-serif"; this.fontSize = 64; this.fontColor = fontColor; this.backgroundColor = backgroundColor; this.backgroundOpacity = 0.5; bindMethods(this); }
#update() { this.dispatchEvent(new CustomEvent("update")); }
setCanvas(canvas: HTMLCanvasElement) { this.canvas = canvas; }
setWidth(width: number) { this.width = width; this.#update(); }
// ...}
EventTarget의 자식 클래스를 제작해 전역 상태를 관리했습니다.dispatchEvent를 통해 store의 상태에 의존하는 컴포넌트에 재렌더링해야 할 시점을 간편히 알려줄 수 있었습니다.
export default function Preview() { const { setCanvas } = canvasStore; const canvas = el("canvas", { className: "canvas", width: canvasStore.width, height: canvasStore.height, }); const ctx = canvas.getContext("2d"); const render = () => { // ... };
canvasStore.addEventListener("update", render); render(); setCanvas(canvas);
return el("div", {}, canvas);}
render는 canvas에 결과물을 그리는 함수입니다.
작성한 텍스트, 폰트 설정 등이 변경되면 render를 다시 호출해 결과물을 그리도록 작업했습니다.
const WIDTH = <HTMLInputElement>document.getElementById("width");const HEIGHT = <HTMLInputElement>document.getElementById("height");const TEXT = <HTMLInputElement>document.getElementById("text");const BG = <HTMLInputElement>document.getElementById("bgColor");const TEXTCOLOR = <HTMLInputElement>document.getElementById("textColor");const SIZE = <HTMLInputElement>document.getElementById("fontSize");const TRANS = <HTMLInputElement>document.getElementById("transparency");const img = new Image();
let input = 0;let font = "sans-serif";
예전엔 이렇게 input 요소 등과 상태 모두 전역에 두고 input 요소 모두에 일일이 change등 이벤트 핸들러 추가해둔 다음에 값 변경될 때마다 canvas를 다시 그렸는데, 다시 보니 새삼 끔찍하네요.
DOM 생성 방식
import { canvasStore } from "../store";import el from "../utils/el";
export default function Textarea() { const { setText } = canvasStore; const handleChange = ({ target }: Event) => { if (!(target instanceof HTMLTextAreaElement)) { return; }
setText(target.value); };
return el( "div", { className: "text" }, el("textarea", { className: "text__input", placeholder: "Type Here!", ariaLabel: "Type Here!", rows: 2, events: { change: handleChange, keydown: handleChange, keyup: handleChange, }, }), el("div", { className: "text__line text__line--top" }), el("div", { className: "text__line" }) );}
상기 코드들에서도 볼 수 있듯 이번에도 함수 하나 만들어 활용했습니다.
style과 dataset도 다룰 수 있도록 업데이트하는 등 사용성을 많이 개선했고, eln이라는 함수도 추가로 만들어 SVG도 다룰 수 있도록 했습니다.
여전히 click 이벤트에서 event의 타입이 Event라는 점, SVGElement를 생성하려면 eln을 사용해야 한다는 점 등의 아쉬움이 남아있어 개선할 여지가 많긴 합니다.
상태가 변경됐을 때 DOM을 업데이트하는 부분도 너무 수동으로 해줘야 하는 작업이 많은 것 같아 아쉽네요.
천천히 개선해나가면 되지 않을까 합니다.
기타 개선점
- canvas에 그린 내용이 변경될 때마다 다운로드 버튼의 링크를 업데이트해 딜레이가 심하게 생길 때가 있었는데, 이젠 다운로드 버튼을 클릭하면 링크를 생성하도록 해 딜레이를 없앴습니다.
- 배경 이미지 추가를 위해 별도의 canvas를 사용하지 않고 메인 canvas 하나만 활용하도록 업데이트했습니다.
- 앱을 시작할 때 무작위로 지정되는 배경색의 대비를 확인하여, 밝은색일 땐 글자색이 검은색으로 설정되게 업데이트했습니다. Brian Suda 님의 Calculating Color Contrast란 글을 참고했습니다.
- 올바른 시멘틱 태그를 사용해 접근성을 높였습니다.
- className에서 카멜 케이스를 걷어내고 BEM을 사용했습니다.
- 자동으로 배포가 이뤄지도록 설정했습니다.
맺으며
3년이란 세월이 흘러 묵은 때가 많이 쌓인 코드를 고치는 데 성공했고, 결과물이 썩 마음에 들어 여러모로 만족스럽네요.
끔찍한 코드 때문에 꽤 고통도 많이 받았지만, 제가 성장했단 증거기도 하고 오랜 세월 작업물을 방치한 벌이기도 한 것 같아 최대한 인내하며 작업했습니다.
역시 언제나 그래 왔듯 결과물을 보면 도대체 언제 힘들었나 싶네요.
물론 제 실력이 모자란 탓이 크겠지만, 이렇게 바닐라로만 작업하니 결과물의 규모가 크게 한정된단 느낌이 강하게 듭니다.
사이드 프로젝트로 해보고 싶은 것들이 몇 개 생겼는데 규모가 좀 있는 것들이 있기도 하고, 새로운 도전도 해보고 싶어 아마 이렇게 바닐라로 진행하는 건 당분간 사이드에 사이드로 두지 않을까 싶네요.
물론 그렇다고 공부를 게을리하진 않을 예정이니, 여정을 끝내고 돌아왔을 때 다시금 제게 기분 좋은 고통을 선사해주지 않을까 기대하고 있습니다.
