리액트 라이브러리: 달력(dayjs) / css(tailwind)

구글 캘린더를 따라 만들어보려고 하는데 

사용할 라이브러리에 대해 알아보자

 

dayjs

달력 라이브러리들이 많은데 그 중에 dayjs를 선택한 이유는

1. 다른 라이브러리들은 날짜만 나오는 게 아니고 위에 날짜(2023년 6월)까지 붙어나오는 경우가 많은데
   분리가 안 돼서 따로따로 배치하는 것이 안 됐다.
2. javascript 날짜 관련 라이브러리 중 가장 가벼운 라이브러리이다

https://day.js.org/en/

사용 방법

새로운 객체 생성

//현재 날짜, 시간이 포함된 객체
dayjs();

//지정한 날짜 객체 생성
dayjs('2023-06-23');
dayjs('2023-06-23 14:08:34');

날짜 형태 지정

let date = dayjs(2023-06-23 10:30:25')

date.format();  // 2023-06-23T10:30:25+09:00
date.format("YY-MM-DD");  // 23-06-23
date.format("DD/YY/mm);  // 23/06/23
date.format("YYYY.MM.DD HH:mm:ss");  // 2023.06.23 10:30:25

날짜 가져오기 / 수정하기 (get / set)

let now = dayjs();
now.format();

//년
now.get("year");
now.get("y");

//월
now.get("month"); 
now.get("M"); 

//일
now.get("date"); 
now.get("D");

//요일 (일요일: 0, 토요일:6)
now.get("day"); 
now.get("d");

//시
now.get("hour"); 
now.get("h"); 

//분
now.get("minute"); 
now.get("m"); 

//초
now.get("second"); 
now.get("s");

//밀리초
now.get("millisecond"); 
now.get("ms");

원하는 값 넣기(set)

let date = dayjs("2023-06-23 10:00:00");

date.format();  // 2023-06-23T17:00:00+09:00

date.set("year", 2023).format(); // 2023-06-23T17:00:00+09:00
date.set("y", 2023).format(); // 2023-06-23T10:17:00+00:00

date.set("month", 11).format(); // 2023-06-23T17:00:00+09:00
date.set("M", 11).format(); // 2023-06-23T17:00:00+09:00

date.set("date", 25).format(); // 2023-06-23T17:00:00+09:00
date.set("D", 25).format(); // 2023-06-23T17:00:00+09:00

date.set("day", 5).format(); // 2023-06-23T17:00:00+09:00
date.set("day", 5).format("dddd"); // Friday
date.set("d", 5).format(); // 2023-06-23T17:00:00+09:00
date.set("d", 5).format("dddd"); // Friday

date.set("hour", 15).format(); // 2023-06-23T15:00:00+09:00
date.set("h", 15).format(); // 2023-06-23T15:00:00+09:00

date.set("minute", 45).format(); // 2023-06-23T17:45:0009:00
date.set("m", 45).format(); // 2023-06-23T17:45:00+09:00

date.set("second", 10).format(); // 2023-06-23T17:00:10+09:00
date.set("s", 10).format(); // 2023-06-23T17:00:10+09:00

날짜 더하기/빼기(add/subtract)

// 년도 
dayjs().add(1, 'year');
dayjs().subtract(1, 'year');

// 월 
dayjs().add(1, 'month');
dayjs().subtract(1, 'month');

// 일
dayjs().add(1, 'day');
dayjs().subtract(1, 'day');

// 시간
dayjs().add(1, 'hour');
dayjs().subtract(1, 'hour');

// 분 
dayjs().add(1, 'minute');
dayjs().subtract(1, 'minute');

// 초
dayjs().add(1, 'second');
dayjs().subtract(1, 'second');

날짜/시간 차이 구하기

const date1 = dayjs("2022-12-01 12:30:25.123");
const date2 = dayjs("2021-10-24 13:23:50.456");

date1.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2022-12-01 12:30:25.123
date2.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2021-10-24 13:23:50.456

date1.diff(date2); // 34815994667

date1.diff(date2, "year"); // 1
date1.diff(date2, "y"); // 1
date1.diff(date2, "y", true); // 1.1047389818237257

date1.diff(date2, "month"); // 13
date1.diff(date2, "M"); // 13
date1.diff(date2, "M", true); // 13.256867781884708

date1.diff(date2, "week"); // 57
date1.diff(date2, "w"); // 57
date1.diff(date2, "w", true); // 57.566128748346564

date1.diff(date2, "day"); // 402
date1.diff(date2, "d"); // 402
date1.diff(date2, "d", true); // 402.9629012384259

date1.diff(date2, "hour"); // 9671
date1.diff(date2, "h"); // 9671
date1.diff(date2, "h", true); // 9671.109629722223

date1.diff(date2, "minute"); // 580266
date1.diff(date2, "m"); // 580266
date1.diff(date2, "m", true); // 580266.5777833334

date1.diff(date2, "second"); // 34815994
date1.diff(date2, "s"); // 34815994
date1.diff(date2, "s", true); // 34815994.667

date1.diff(date2, "millisecond"); // 34815994667
date1.diff(date2, "ms"); // 34815994667
date1.diff(date2, "ms", true); // 34815994667

참조 : https://stickode.tistory.com/668

 

 

tailwind

아직 리액트에 미숙한 나는 직관적으로 보기 좋고 사용하기 편리한 tailwind 라이브러리로 선택했다

설치방법

npm i -D tailwindcss
npm i -D postcss postcss-loader
npm i -D autoprefixer

 

Tailwind CSS : 우리가 사용하려고 하는 Tailwind CSS

PostCSS : 특수한 PostCSS 플러그인 구문을 그냥 Vanilla CSS로 바꿔주는 일종의 트랜스파일러

- Tailwind CSS를 해석해주는 친구, 웹팩이 읽을 수 있도록 Loader도 설치

Autoprefixer는 Vendor Prefix(벤더 프리픽스)를 자동으로 넣어주는 친구

 

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

postcss.config.js파일을 생성하고 위와 같이 채워준다.

->PostCSS가 Tailwind CSS를 해석해주는 설정

 

webpack.config.js에 loader추가

// ...
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

 

tailwind.config.js 설정

npx tailwindcss init

디렉토리 상에서 위와 같이 명령어를 입력하면 tailwind.config.js라는 파일이 생성되고 템플릿이 자동으로 세팅

 

//tailwind.config.js

/* @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

 

styles/tailwind.css

// styles/tailwind.css

@import 'tailwindcss/base'
@import 'tailwindcss/components'
@import 'tailwindcss/utilities'

css파일에 위와 같이 넣어줌

 

src/index.js

//src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/tailwind.css'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  <React.StrictMode>
)

 

src/App.js

function App() {
  return <div className="font-bold text-center p-4 text-[23px] bg-slate-600 text-lime-300">Hello, Black Lobster!</div>
}

export default App

마지막으로 Render를 해주는 App 컴포넌트에서 Tailwind CSS가 잘 연결됐는지 테스트를 해본다

사용법! className 안에 Tailwind 문법을 넣어주면 된다.

text-[23px] 대괄호의 의미 : 대괄호를 이용하여 내가 직접 커스텀하게 사용할 수 있다.

 

참고 : https://blacklobster.tistory.com/6