feat. 한글의 타이핑 효과를 구현합니다.

[seungrodotlee]

Overview

141 을 구현합니다.

해당 Issue에서 언급한 바와 같이 외부 의존성 없이, '한글의 타이핑 효과'에 집중하여 구현하였습니다.

PR Checklist

• [x] I read and included theses actions below

1. I have read the Contributing Guide
2. I have written documents and tests, if needed.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: d8d13d5725d7564282706f267f0e440ffb50c24a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
es-hangul	❌ Failed (Inspect)			Jul 9, 2024 1:04am

[po4tion]

@seungrodotlee 안녕하세요! 제 생각에는 지금도 외부 의존성이 있다고 생각해요. 해당 기능은 결국 UI가 보여야 하는 상황에서만 사용할 될 것 같아 보여요. UI가 없는 순수 typescript로만 구성된 코드 베이스에서는 어떤 식으로 사용될 수 있는지, 예시를 들어볼 수 있을까요?

[seungrodotlee]

@seungrodotlee 안녕하세요! 제 생각에는 지금도 외부 의존성이 있다고 생각해요. 해당 기능은 결국 UI가 보여야 하는 상황에서만 사용할 될 것 같아 보여요. UI가 없는 순수 typescript로만 구성된 코드 베이스에서는 어떤 식으로 사용될 수 있는지, 예시를 들어볼 수 있을까요?

@po4tion 안녕하세요! 좋은 의견 감사드립니다. 다만, 제가 외부 의존성이 없다고 생각한 이유는, '해당 기능이 필요한 상황이라면, 어느 환경이든 구애받지 않고 가져다 사용할 수 있기 때문'이었습니다.

말씀 주신 바와 같이, 기능 자체가 타이핑 효과의 구현이기 때문에 해당 기능의 사용은 UI가 있는 상황에 어느정도 국한되기는 할 것입니다(GUI든 CLI 등) 그럼에도 불구하고 제가 typing 효과의 구현이 유효할 것이라고 생각한 것에는 아래와 같은 이유들이 있습니다.

• 한글 타이핑 효과를 구현하는 것은 한글의 특성을 알지 못하면 구현하기 쉬운 문제는 아니라고 생각했습니다. 따라서 한글에 관련한 문제들을 가장 잘 해결하는 es-hangul에서 이러한 타이핑 효과 구현의 문제도 해결해주면 좋지 않을까 생각했었습니다!
• '한글 도메인에 관련된 문제를 해결한다'는 측면에서, 비록 서버사이드에서는 이 기능이 활용될 가능성이 거의 없겠지만 클라이언트 사이드에서는 해결할 수 있는 명확한 문제가 있다고 생각했습니다.

다만, 타이핑 효과의 구현은 한글에 종속된 문제를 해결하지만, 이를 제공하기 위한 추가적인 인터페이스를 제공하는 것(getTypewriterHangul)은 한글에 종속된 문제의 범주는 벗어난 것이 맞다고 생각해서, 이러한 부분에 조정은 필요하다고 생각합니다.

또한, 만약 '타이핑 효과'가 UI가 존재하는 환경에서만 유효한 것이 문제가 된다면 아래와 같이 두 한글 문자열 사이에 존재하는 조합들을 구하는 함수를 구현하는 방향으로 기능을 제공하면 좀 더 다양한 케이스에 기능이 사용될 수 있을 것 같습니다!

// ""과 "안녕하세요" 사이에 존재하는 모든 한글 조합을 구합니다. (`["", "ㅇ", "아", "안", "안ㄴ", "안녀", ... "안녕하세요"]`)
const betweens = getBetween("", "안녕하세요");

// use case 1: 타이핑 효과 구현
for await (const value of betweens) {
  await delay(50);
  setTypingValue(value);
}

// use case 2: 특정 값이 두 문자열 사이에 위치하는 값인 지 판단
const isBetween = betweens.includes("안ㄴ");
}

[po4tion]

@seungrodotlee 좋은 의견 감사합니다! @okinawaa 님은 클라이언트/서버 양방향에서 사용하기에 힘들더라도 es-hangul 범주에 포함되어도 괜찮다고 생각하시나요?

[okinawaa]

이슈레이징과, 테스트 코드 및 실제 구현까지 꼼꼼하게 해주셨는데 늦게 코맨트남겨 죄송합니다. 이 PR에서 추가하려는 기능이 es-hangul 이 추구하는 목표와 맞지 않다고 생각했습니다.

1. 시간을 함수내에서 컨트롤할 필요가 없을 것 같습니다.
   • 시간을 다루는것은 한글을 다루는것과 큰 관련이 없어보입니다. choseongIncludes 함수가 기존에 존재하였는데 v2에서는 getChoseong 함수를 이용하여 사용자가 직접 초성화된 결과를 이용할 수 있도록 하려는 것과 같이(includes에 대한 맥락은 제거). 시간에 대한 맥락을 es-hangul에서 제공해주는 typing함수에서 처리할 필요는 없다고 생각합니다.
   • 시간을 다루는 이유로, 사용자는 피치 못하게, iterator라는 기술을 사용해야 한다고 생각합니다.

제안해주신 getBetween 함수가 한글의 특성을 내부적으로 잘 해결하는 함수라고 생각하는데, 입력값과, 출력 형태, 함수명 정도만 잘 정하면 좋은 함수가 될 것 같아요.

[okinawaa]

@okinawaa 님은 클라이언트/서버 양방향에서 사용하기에 힘들더라도 es-hangul 범주에 포함되어도 괜찮다고 생각하시나요?

이 부분은 es-hangul에 특정 함수가 필요한지를 판가름하는 용도로는 적절하지 않은 것 같아요! 클라이언트 / 서버 보다는, 복잡한 한글 원리를 잘 처리하는 함수인가 가 더 중요할 것 같습니다! 🙇

[seungrodotlee]

@okinawaa 님! 답변 감사드려요!

시간을 컨트롤 하는 부분이 필요 없다는 부분이 한글과 큰 관련이 없다는 부분에 대해 이해했고 동의해요! 이 PR은 close 처리 할게요 👍

앞서 언급드린 getBetweens와 같은 함수에 대해서는 네이밍이나 인터페이스에 대해 좀 더 고민해보고 다시 논의 이슈 올리도록 하겠습니다!

[okinawaa]

@seungrodotlee 너무 잘 구현해주셨는데, 사전에 의견 드리지 못해 죄송하고 감사합니다 😢