• Feed
  • Explore
  • Ranking
/

    Next.js 개발 일지 D1

    a
    artemismars2
    2024.06.12
    ·
    3 min read

    Sidebar 개발

    1. 구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색

    2. 검색 결과에 있는 유튜브 튜토리얼 영상 시청

    3. 유튜버가 command 컴포넌트를 사용하는 것을 발견

      1. https://www.youtube.com/watch?v=mju7e6Cf6Nk

    4. npx shadcn-ui add command 명령어 실행

    5. pakcage.json 에 cmdk 라는 라이브러리가 설치되는 것을 확인

      import { Command as CommandPrimitive } from "cmdk"

    6. cmdk 라이브러리에 대해서 조사

    1. https://github.com/pacocoursey/cmdk

    2. 맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리

    3. 사용방법은 위 깃허브 링크에서 확인

    4. Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 keydown 이벤트 감지가 필요하다는 것을 알게됨

    5. 위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음

    6. 처음에는 e 타입이 React.KeyboardEvent 인줄 알았음

    7. 하지만 그렇게 하면 타입 에러가 발생

    8. 그냥 KeyboardEvent 타입을 사용해야함

        React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };

    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

    9. React.KeyboardEvent 와 KeyboardEvent 는 다른 타입

      1. React.KeyboardEvent 가 내부적으로 NativeKeyboardEvent KeyboardEvent 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 KeyboardEvent 타입과 같지는 않음

    10. CommandDialog 컴포넌트가 모달 역할 수행

      <CommandDialog open={open} onOpenChange={setOpen}>

      1. Dialog 컴포넌트는 현재 사용중이지 않으므로

      2. components/ui/dialog.tsx 파일 제거하고 components/ui/command.tsx 파일에서 Dialog 관련 코드는 모두 제거

    11. 사이드바 UI 구축

      until-473