2023-09-08 일지

오늘 한 일

너디너리 강연 듣기
gloddy 개발
next blog 세팅

wakatime 31등..?

내가 이렇게 많이 했었나?🤔 암튼 뭔가 뿌듯하다.

gloddy

배포 사이트에서 느린 이슈 해결..?

로컬에서 빌드해서 실행했을 때는 굉장히 빠르다. 하지만 vercel로 배포했을 때는 느린 문제가 있었다.

처음에는 서버가 느린건가 싶었지만 빌드할 때 빠른거 보면 호스팅하는 쪽에서 느린 것 같았다.

이 글에서 답을 찾았다. 진짜 간단하지만 설정 들어가서 Serverless Function 리전을 서울로 바꾸니까 빨라진 느낌이 들었다.

기분탓인지 진짜 빨라진건지는 모르겠지만 일단 빨라진 것 같다..!

구글 맵 검색 autocomplete 기능 추가하기

기존에는 SearchBox를 사용하고 있었는데 엔터를 눌러야만 검색이 되는 불편함이 있었다. 또한 구글에서 제공하는 Autocomplete을 사용해도 잘 작동하지 않았다.

그래서 다른 방법이 없나 찾아본 결과 use-places-autocomplete라는 라이브러리를 찾았다. 사용법도 간단하고 내가 필요한 기능들을 제공해주고 있었다.

const {
  ready,
  value,
  suggestions: { status, data },
  setValue,
  clearSuggestions,
} = usePlacesAutocomplete({
  requestOptions: {
    language: 'en', // 언어설정
    region: 'KR',
  },
})

input에 value와 onChange를 설정해주면 끝이다.

motion의 underline이 다른 곳에도 쓰이고 있을 때 이슈

Tab 컴포넌트를 쓰는 곳이 모임 상세 페이지와 나의 모임 페이지 두 곳이다.

모임 상세 페이지에서 나의 모임 페이지로 이동할 때 Tab에 있던 underline이 움직이면서 나의 모임 페이지의 Tab으로 이동하는 것을 확인할 수 있다.

두 layout이 다르다는 걸 판단하기 위해 id를 추가했다.

let elementId = 1

export default function Tabs({ children }: StrictPropsWithChildren) {
  const [id] = useState(() => String(elementId++))

  return <LayoutGroup id={id}>{children}</LayoutGroup>
}

children에는 underline motion이 있는 Tab 컴포넌트가 들어간다.

function Tab({ value, text, queryString, className, disabled = false }: TabProps) {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  const isActive = searchParams.get('tab') === value

  return (
    <Link
      className={cn(
        'relative flex cursor-pointer items-center',
        {
          'text-sign-caption': disabled,
        },
        className
      )}
      href={{
        pathname,
        query: { tab: queryString ?? value },
      }}
      onClick={disabled ? (e) => e.preventDefault() : undefined}
      scroll={false}
      replace
    >
      {text}
      {isActive && (
        <motion.span
          layoutId="underline"
          className="absolute bottom-0 left-0 w-full border-b-1 border-primary text-subtitle-2 text-primary"
        />
      )}
    </Link>
  )
}

이제 각 페이지에 있는 탭이 고유한 id값을 가지게 됨으로 인해 underline motion이 다른 곳에 영향을 주지 않게 되었다.

내일 할 일

너디너리 강연 들으러 가기
gloddy 개발