[TIL] 221221

Hashtag Component(라이브러리)

타입스크립트

• 모듈 vs 네임스페이스 Typescript의 모듈 시스템
  

declare module '@johmun/vue-tags-input' {
  type Plugin_2<Option = any> = PluginInstallFunction<Option> & {
    install?: PluginInstallFunction<Option>;
  } | {
    install: PluginInstallFunction<Option>;
  };
  export {Plugin_2 as Plugin}

  type PluginInstallFunction<Option> = (app: App, ...options: Option[]) => any;

  interface App {
    //use(plugin: Plugin_2, ...options: any[]): this; // this line overrides below (because of any)
    use<Option>(plugin: Plugin_2<Option>, ...options: Option[]): this;
  }

  export const install: PluginInstallFunction<any>;
}.  

⇒ 라이프사이클 문제로 적용 안됨

Hashtag Component

이슈사항

• input value값이 ‘’ 일때 backspace로 지울때 Tag를 지우는것인 아닌지 값이 ‘’ 인지 아닌지로 체크하는데 마지막 하나 남은걸 지울때 앞의 태그와 함께 지워진다
  • 원인 : 이벤트가 일어난 이후에 value 값을 체크 하므로 현재 마지막 값이 지워지는 순간 값을 ‘’으로 인식해서 발생하는 이슈이다.
  • 방법1 : ‘’값을 가지는 순간 Count라는 변수를 줘서 두번째부터 태그가 지워지도록 설계
    • 문제 발생 : Count값이… 꼬인다ㅠㅠ
  • 방법2 : KeyDown 이벤트를 줘서 preValue값을 가지고 두개를 구분해서 사용한다.
• 기존에 가지고 있는 태그와 새로 사용자 정의된 태그는 TagSet 배열에 추가할때 어떻게 구분해서 Push 하는가?
  • 방법 : 추가하는 함수를 2가지로 만들어서 사용한다. input.value로 추가할때는 string 값을 받아서 기존에 가지고 있는 해시태그를 검사해서 있으면 그 Item을 배열에 추가하고 아닌경우는 key값을 맞춰서 새로운 Item을 추가한다.
• input 창에 있는 Focus를 어떻게 HashtagMenu로 옮겨서 할 수 있을까?

  • 방법 : Blur이벤트를 이용해서 input에 Focus를 잃게하고 Parents Node로 포커싱을 주고 KeyEvent를 이용해서 방향키를 누르면 Focus가 움직이도록 설정한다.

    REF>

    HTMLElement.blur() - Web APIs | MDN