Code와 Tools - 2021.08

이두팔·2021년 8월 12일
0

Javascript

목록 보기
2/3

1. Ant Design Charts

https://charts.ant.design/

Line, Area, Column, Bar, Pie, Progress 같은 다양한 차트들을 만들 수 있다.

  • Area Chart

  • Scatter


2. Rooks - react custom hook

https://github.com/imbhargav5/rooks

/***
useMouse: Mouse position hook for Reach
*/

import { useMouse } from 'rooks';
function Demo() {
  const { x, y } = useMouse();
  return (
    <>
      <p> Move mouse here to see changes to position </p>
      <p>X position is {x || 'null'}</p>
      <p>X position is {y || 'null'}</p>
    </>
  );
}

render(<Demo />);

3. baseweb - react component library

https://github.com/uber/baseweb

uber에서 만든 라이브러리다.
Button, Checkbox 외에도 Payment Card, Pin Code 같은 템플릿도 있다.
SEO는 어떻게 적용할 수 있는지에 대한 설명도 짧긴 하지만,, 포함되어 있다.


4. tailwind-nextjs-starter-blog

https://github.com/timlrx/tailwind-nextjs-starter-blog

nextjs와 tailwind 2.0을 사용해서 블로그를 쉽게 만들 수 있는 것 같다.
Features에 보면 거의 완벽한 lighthouse score, 첫 로드시 39kb의 js로드. production build시 Preact를 사용했다고 한다.

그 외에도 되게 많다.

  • 모바일 친화적 뷰
  • light and dark theme
  • plausible, google analytics 서포트
  • MDX: JSX in markdown
  • katex를 통한 Math display support
  • next/image를 통한 이미지 자동 최적화
  • mdx-bundler를 통한 유연한 데이터 검색
  • 태그 지원
  • multiple authors 지원
  • 블로그 템플릿
  • TOC component
  • blog posts의 중첩 라우팅 지원
  • giscus(github 토론으로 구동되는 댓글 시스템), utterances(github 문제를 기반으로 하는 가벼운 댓글 위젯) 지원
  • RSS 피드, sitemap 등과 같은 SEO 친화적

5. react-infinitegrid

https://github.com/naver/egjs-infinitegrid/tree/master/packages/react-infinitegrid

infinite grid. naver에서 만들었다.

virtual scroll, loading bar와 data delay 포함된 컴포넌트, performance가 개선된 컴포넌트가 있다.

profile
Software Engineer

0개의 댓글