글자가 획순대로 써지게 하려면 폰트로는 안 된다 — SVG로 만드는 획순 애니메이션
히라가나·가타카나를 한 획씩 써 보여 주는 애니메이션을 만들려면 획의 윤곽과 중심선이 필요합니다. 가나 공방이 AnimCJK 데이터와 SVG stroke-dashoffset으로 획순 예시를 구현한 방법과 라이선스 처리를 정리합니다.
TOPIC / ARCHIVE
React에 관한 기록과 분석.
3편의 기록
히라가나·가타카나를 한 획씩 써 보여 주는 애니메이션을 만들려면 획의 윤곽과 중심선이 필요합니다. 가나 공방이 AnimCJK 데이터와 SVG stroke-dashoffset으로 획순 예시를 구현한 방법과 라이선스 처리를 정리합니다.
가나 공방의 '가나 입력 공방'은 로마자 입력 규칙 7가지를 연습시킵니다. event.code로 물리 키를 읽고 읽기 전용 입력창에 값을 표시하는 구조, 조합 이벤트 처리의 확인 범위, sessionRef로 최신 문제를 읽는 방식을 설명합니다.
ABC는 손으로 쓰기엔 편하지만 음표를 클릭해서 고치기엔 불편한 텍스트입니다. Songnote의 시각 악보 편집기가 ABC를 구조화된 문서 모델로 바꿔 편집하고 다시 ABC로 되돌리는 방법, 실행 취소, 텍스트와 모델의 동기화 문제를 코드로 정리합니다.