[ FE 참고자료 ] npm 패키지 URL 💖

 

 

---

 

[스타일 컴포넌트]

 

https://www.npmjs.com/package/styled-components

styled-components

구성 요소 연령에 대한 시각적 기본 요소입니다. ES6 및 CSS의 장점을 사용하여 스트레스 없이 앱 스타일

 

 

 

https://5faaafd0bd0f3f0008469537--emotion.netlify.app/docs/introduction

Emotion - Introduction

 

 

 

[ 상태관리 ]

https://www.npmjs.com/package/recoil

recoil

 

 

 

https://www.npmjs.com/package/zustand

zustand

 

 

 

[ React 데이터 ]

https://www.npmjs.com/package/swr

swr

React에서 데이터를 가져오기 위한 React Hooks ( Node.js 패키지 )

 

 

 

[ React hook form]

https://www.npmjs.com/package/react-hook-form

react-hook-form

 

 

 

[ React hook ]

 

https://www.npmjs.com/package/usehooks-ts

usehooks-ts

Typescript로 작성된 React hook 라이브러리, 바로 사용할 수 있습니다.

 

 

 

[ svgr/webpack ]

https://www.npmjs.com/package/@svgr/webpack

@svgr/webpack

svg 파일 react, next에서 컴포넌트처럼 사용이 가능하다

 

// Next에서 `next.config.js` 작성하기
module.exports = {
  webpack(config) {
    config.module.rules.push({ // 웹팩설정에 로더 추가함
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

 

//react에서 사용 webpack.config.js 작성하기
module.exports = {
  // ...생략
  module: {
    rules: [
      //... 로더 생략
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
 // ... 생략
};

 

 

 

[슬라이드]

https://www.npmjs.com/package/embla-carousel

embla-carousel

Embla Carousel 은 유동적인 움직임과 스와이프 정밀도가 뛰어난 베어본 캐러셀 라이브러리입니다. 라이브러리에 구애받지 않고 종속성이 없으며 100% 오픈 소스입니다. 

 

 

 

[슬라이더]

https://www.npmjs.com/package/rc-slider

rc-slider

https://slider-react-component.vercel.app/

rc-slider - rc-slider

 

 

 

[ 달력 ]

https://www.npmjs.com/package/react-day-picker

react-day-picker

 

React DayPicker 는 React의 날짜 선택기 구성 요소 입니다 . 사용자가 월을 검색하여 요일을 선택할 수 있는 달력을 렌더링합니다. DayPicker는 사용자 정의가 가능하고 입력 필드와 잘 작동하며 모든 디자인에 맞게 스타일을 지정할 수 있습니다.

 

 

 

 

[ 앱 알람 ] 

https://www.npmjs.com/package/react-toastify

react-toastify

React-Toastify를 사용하면 앱에 알림을 쉽게 추가할 수 있습니다.

 

 

 

 

[입력창 자동으로 길이 조절]

 

https://www.npmjs.com/package/autosize

autosize

텍스트에 맞게 텍스트 영역 높이를 자동으로 조정하는 작은 독립 실행형 스크립트입니다.

 

 

[날짜, 시간 계산]

 

https://www.npmjs.com/package/moment

moment