Deno Fresh로 사내 API 모니터링 페이지 만들어보기 2일차

모종의 이유로 당분간 API 모니터링을 하게 됨

모니터링 로직을 자동화하면 좋기는 한데, 간혹 어떤 값이 들어있는지 직접 확인해야 하는 경우도 있음

• 특히 증권 데이터처럼 수시로 변하는 데이터라면 단순히 프로퍼티와 타입이 제대로 들어가 있는지 확인하는 것만으로는 좀 부족함

어차피 사내 프로젝트여서 재미있을 것 같은 기술스택, Deno Fresh로 만들고 있음

• 사실 누구도 시킨게 아닌..그냥 매번 url 찾아 들어가기 귀찮아서 만드는 중..

이제 2일차이긴 하지만 잠깐 만져보면서 느낀 점은

• Next.js를 대충이라도 써봤다면, 거의 유사한 방식으로 개발할 수 있어서 허들이 낮은 듯

• 장점

  • 원래 빠르다는 건 (여러 유투브 영상들 보면서) 알고 있었는데, Deno가 Native로 TypeScript를 지원해서 그런지 정말 빠른듯
  • 터미널에서 deno task run 치자마자 거의 바로 돌아가는 듯..
  • tsconfig나 기타 컴파일/빌드 설정이 크게 필요가 없기 때문에 초기 프로젝트 설정도 빠름
  • 기본 스타일링 툴로 TailwindCSS의 mini 버전(?)인 twind를 사용함
    • 사용해보기 전엔 이게 과연 최신 TailwindCSS 스택과 호환이 잘될까 걱정이 됐는데, 아직까지 복잡한 스타일링이 없어서 그럴지 모르겠지만 딱히 걸리는건 없음
    • vscode extension도 따로 있고, suggestion이 더 잘 되는 것 같은 느낌..
  • 생각보다 편리한 Preact
    • 컴포넌트 반복문 돌릴때 key 지정 안해줘도 됨
    • HTML 태그 속성들을 원래 것 거의 그대로 사용할 수 있음
      • 스타일 class 지정할 때 그냥 class 속성으로 지정하면됨. React처럼 className="..." 안해도 됨
  • Deno Deploy로 배포도 편하고 빠름
    • 빌드 시간이 거의 안들기 때문에, release 브랜치 올리자마자 몇초 정도면 배포 끝나는 듯
    • SSR, API Call도 역시 빠름
    • 사실 Deno Deploy를 제대로 써보고 싶어서 Fresh를 선택한 거라 봐도 무방함..ㅎㅎ

• 단점

  • 아직 성숙한(?) 툴은 아니어서인지 몇 가지 아쉬운 점이 없을 수는 없는 듯
  • Webpack, Vite 등 Node.js 빌드툴들에서 대부분 기본적으로 지원하는 hot-reloading이 아직은 잘 안되는 듯
    • 물론 개발 중 뭔가 변경하면 메모리 상에선 바로 변경이 되는 것 같은데,
    • 브라우저에선 새로고침을 한번씩 해줘야 함. 이제 살짝 귀찮을 때가 있다

  • 뭔가 어색한 Island Architecture..

    • Client에서 상태에 따라 변하는 동적인 컴포넌트를 만들려면 islands 폴더 내에서 컴포넌트를 선언해줘야함
    • 여기선 컴포넌트 props로 children을 사용할 수 없음
      • https://github.com/denoland/fresh/issues/395
        • Deno Fresh 만든 사람이 안된대요
      • 애초에 islands 컴포넌트에는 원시값, 객체 아니면 props로 넘어가질 않음
      • 당연히 함수인 setState 같은것도 undefined 상태로 넘어감
      • children을 못쓰다보니..컴포넌트를 좀만 복잡(?)하게 짜려고 해도 다른 방법을 찾아봐야 함

    • subdirectory를 만들 수도 없음

      • 어느 정도 사이즈가 있는 컴포넌트를 만들려면 파일 하나에 만들어줘야 함
      • 파일분리를 하려고 하위 폴더 만드는 순간 빌드 실패..

      

      

      • 자식 컴포넌트들은 모두 components 디렉토리에서 가져오든가, 아님 island component 선언하는 파일 안에서 모두 처리해야 함..
    • routes 디렉토리 밑에 있는 페이지 컴포넌트들 (Next.js에서 pages에 해당)에선 hooks 사용 안됨
    • 이게 제일 불편한 듯..

  • import할 때 index.ts 자동추론이 안됨

    • import문에서 반드시 파일명과 확장자까지 정확하게 명시해줘야 함

      // DON'T
      import { /** ... */ } from '../constants/apis'
      
      // DO
      import { /** ... */ } from '../constants/apis/index.ts'
      

    • 이글을 쓰면서 알게된 사실이긴 한데, Deno는 index.ts/js를 해당 폴더의 엔트리로 자동 추론하지 않음
      • https://deno.land/manual@v1.25.4/contributing/style_guide#do-not-use-the-filename-indextsindexjs
    • Rust 컨벤션을 따라, 엔트리 파일명을 mod.ts로 하는걸 추천하는데, 이것 역시 자동 추론을 해주진 않음