[TIL] 221222

Hashtag Component

분석

• 제목 / 에디터 / 해시태그 ⇒ 글자 제한 Byte 기준으로 계산해주는 라이브러리 사용
• 에디터
  • 제목 완료 후, 키보드로 에디터로 이동 가능
  • 한글 5000자(영문 10,000byte) 까지 입력가능
  • 10장까지 등록 가능하고 10장 이상되면 비활성화
  • 글자 최소 10자 이상이어야 저장가능
• 해시태그
  • prefix # 사용
  • 해시태그 등록 : ‘,’ 사용
    • 최대 30자(60byte) 입력
    • 단어 10개 정도 표시 , 이상은 스크롤
    • 5개 까지 등록가능

기능구현

• Input창에서 HashtagMenu로 방향키로 이동
• ActiveFocus가 방향키로 움직인다.
• Enter / Click해서 등록
• validation 함수 생성 및 적용

SideEffect

• 이슈 1
  • 문제 : backspace로 지웠을때 menu창이 안없어진다. 한번 더 backspace를 눌렀을때 없어진다.
  • 원인 : 구조상에 초기화하는 부분이 빠져있었다.
  • 해결 : 전체 조건에 맞게 함수 구조 수정
• 이슈 2
  • 문제 : enter를 했을때 menu창이 안없어진다.
  • 원인 : 조상에 초기화하는 부분이 빠져있었다.
  • 해결 : 전체 조건에 맞게 함수 구조 수정

로딩바

• 전역에서 사용하는 로딩바
• 각각의 섹션에서 사용히는 로딩바

ex) 유투브는 전역 로딩바 없음!! 섹션을 더 중하게 여김

구현방법

• 데이터단(store)에서 로딩바를 구현해서 에러처리까지 하는 방식
  • 대부분 자동화 되어있고 페이지단에서 따로 손볼 필요가 없다.
  • 구현하는 로직 자체가 복잡해서 안정화 되어있는 프로젝트에서 시간을 들여 만들 수 있을듯하다.
  • 한번 구현하면 편하게 쓸 수 있다.
• 페이지나 컴포넌트단에서 이벤트를 발생시켜 처리하는 방법

현재 프로젝트에서 구현한 방식

• Global

// store/layout/index.ts
/* action */
updateLoadingIndicatorGlobal(payload: LayoutType.LoadingIndicator) {
  this.loadingIndicatorGlobal = payload
}

// component/bars/header/Tools.ts
const handleOnLogin = async () => {
  try {
    layoutStore.updateLoadingIndicatorGlobal(true)

    await Promise.all([
      await userStore.fetchAuthToken(),
      await userStore.fetchUser()
    ])
  } catch (err) {
    console.log(err)
  } finally {
    layoutStore.updateLoadingIndicatorGlobal(false)
  }
}

• Section

// component/base/ImageContainer.vue

const isTimeout = ref(false)
const isLoadFail = ref(false)
const isLoadDone = ref(false)

const handleOnLoadFail = (evt: Event) => {
  isLoadDone.value = true
  isLoadFail.value = true
  ;(evt.target as HTMLImageElement).remove()
}
const handleOnLoadDone = () => {
  isLoadDone.value = true
  isLoadFail.value = false
}

onMounted(() => {
  setTimeout(() => {
    if (!isLoadDone.value) {
      isTimeout.value = true
      isLoadDone.value = true
      isLoadFail.value = true
    }
  }, 8000)
})