[Feature]: 한글 타이핑 효과의 구현

[seungrodotlee]

Description

자모음이 분리/조합되며 타이핑 되는 한글의 특성에 따라 이러한 타이핑 효과를 기 구현된 es-hangul 내 유틸리티들을 활용하여 간단하게 구현할 수 있는 함수 / 훅을 구현하고자 하는데, 몇 가지 논의사항이 있어 이슈 올립니다.

const { value, run } = useTypingHangul("안녕하세요", { from: "안녕", speed: 50 });

return (
  <div>
    <p>{value}</p>
    <button onClick={run}>run</button>
  </div>
)

---

논의가 필요한 부분

• 해당 기능을 es-hangul의 범주로 볼 것인가, es-toolkit과 같은 타 라이브러리의 범주로 볼 것인가

  개인적 의견으로는 이러한 타이핑 효과를 기능으로 제공하였을 때의 가치는 한글 문자를 타이핑 할 때 가장 높으며, 이에 따라 기능의 구현 역시 한글을 중심으로 작성될 것이므로, es-hangul의 범주로 보아도 될 것으로 생각됩니다.

• 메소드명에 Hangul을 포함하는 것이 옳은가

  기획하고 있는 타이핑 효과는 한글의 타이핑 특성에 포커싱 하고는 있지만, 알파벳이나 숫자 등 다른 문자에도 사용할 수가 있습니다. 만약 메소드명에 Hangul이 붙는다면 한글에 한해서만 사용해야 하는 지 헷갈릴 수도 있을 것 같습니다. 다른 방앙으로는 메소드명이 좀 길어지긴 하겠지만, useTypingWithHangul과 같은 네이밍도 고려해볼 수 있을 것 같습니다.

Possible Solution

No response

etc.

No response

[okinawaa]

이슈레이징 감사합니다!

es-hangul은 리액트와, 종속되어있지 않은 순수자바스크립트/타입스크립트 에서의 도움을 주면 좋겠어요. es-hangul에서 자바스크립트로 표현가능한, 편리한 함수나 기능들을 제공하고, 그것을 다른 라이브러리에서 리액트와 es-hangul을 동시에 사용하여, 위 이슈에서 말씀해주신 기능들을 구현가능할것으로 보여요.

결론적으로 해당 기능은 es-hangul의 범주가 아니라고 생각합니다!

[seungrodotlee]

리액트 의존성을 만드는 것은 저도 좋은 방향은 아닌 것 같습니다! 쓰고나니 제가 예시를 좀 잘못 든 것 같네용

구현하고자 하는 바의 핵심은 한글의 자모음 분리 / 조합 특성에 맞는 타이핑 효과를 구현하는 것으로 현재 구현중인 함수의 사용부는 대략 아래와 같습니다.

const block = docuement.querySelector("#block");

/** 제너레이터를 직접 사용 */
/**
  * function* typeHangul(target: string, options?: TypingOptions):  AsyncGenerator<string, void, unknown>;
  */
const typeGenerator = typeHangul("안녕하세요", { initial: "" });

for await (const value of typeGenerator) {
  block.innerHTML = value;
}

/**  run 메소드와 핸들러 등록을 통한 사용 */
/**
  * getTypewriterHangul(initial?: string): {
  *    onType: (callback: TypingEventListener) => () => void;
  *    type: (target: string, options?: Omit<TypingOptions, 'initial'>) => Promise<void>;
  *    reset: (value?: string) => void;
  * }
  */
const { type, onType, reset } = getTypewriterHangul("");

const unsubscribeTyping = onType((value, { from, to }) => {
  console.log(`typing: ${from} -> ${to}`);

  block.innerHTML = value;
});

await type("안녕하세요");

또한 작업 간 타이핑 효과의 목적 / 제한 역시 좀 더 방향성을 명확히 하였습니다.

• 한글의 타이핑 효과 구현에 집중
• assemble 함수와 같이, 한글 혹은 공백 문자가 아닌 다른 문자가 있는 경우 오류를 반환

목적성을 명확히 하고 타 프레임워크 / 라이브러리와의 의존성을 제거한다면 es-hangul의 범주에 충분히 포함될 수 있는 기능이 아닐까 생각하는데, 다른 분들의 의견이 궁금합니다!

[seungrodotlee]

174 에서의 논의를 바탕으로 close 처리 합니다.