프로젝트 기술 스택

기술 스택

• Framework : React, React BoilerPlate(create-react-app)

• Route: react-router-dom

• State Management Tool: redux

• Network: Axios

• Convention: ESLint, Prettier

• Style: Emotion, styled component

• etc: formik + Yup, momentjs, react-dnd, emoji-picker-react

1. Recoil

• React 상태관리 라이브러리이다.

• 부모 트리(보통 App.js)에 RecoilRoot 태그로 한 번 감싸준 후 Atom(State) 등을 통해 상태를 관리, 사용한다.

사용 방법

1) state.js ⇒ 상태들을 저장, 관리한다.

import { atom } from "recoil";
// atom은 상태를 나타낸다.

export const textState = atom({
  key: "textState", // 
  default: "",
});

2) 사용될 컴포넌트

import { useRecoilState } from "recoil";
import { textState } from "./state";

const RecoilTest = () => {
  const [value, setValue] = useRecoilState(textState);

	// ...
}

3) App.js

import { RecoilRoot } from "recoil";
import "./App.css";

function App() {
  return (
		// 사용될 컴포넌트를 RecoilRoot로 감싸주면 자식 컴포넌트에서 전역으로 사용할 수 있다.
    <RecoilRoot>
			// ...
    </RecoilRoot>
  );
}

export default App;

2. formik + Yup

• form 태그 내부에서 사용되는 input 태그의 입력 값의 Change, Blur, Submit 등의 폼 기능을 간편하게 사용할 수 있다.

• Yup 라이브러리와 함께 사용해서 입력 값의 유효성 검사를 쉽게 작성할 수 있다.
• Yup을 사용하지 않고 validation을 직접 작성할 수 있다.

• 회원가입, 로그인 페이지에서 사용될 수 있다.

기본 사용 방법

const formik = useFormik({
  initialValues: {
    userEmail: "",
    userPassword: "",
  },
  validationSchema: Yup.object({
    userEmail: Yup.string()
      .email(invalidErrorMessage.email)
      .required(invalidErrorMessage.email),
    userPassword: Yup.string()
      .min(8, invalidErrorMessage.password)
      .max(15, invalidErrorMessage.password)
      .matches(/^[a-zA-Z0-9]+$/, invalidErrorMessage.password)
      .required(invalidErrorMessage.password),
  }),
  onSubmit: (value) => {
    alert(value);
  },
});

// {...}
<form onSubmit={formik.handleSubmit}>
  <input
    id="userEmail"
    name="userEmail"
    type="email"
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    value={formik.values.userEmail}
    placeholder="이메일"
  />
  {formik.errors.userEmail}
  <input
    id="userPassword"
    name="userPassword"
    type="password"
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    value={formik.values.userPassword}
    placeholder="비밀번호"
  />
  {formik.errors.userPassword}
</form>
// {...}

3. moment js

• 날짜 계산을 쉽게 할 수 있다.

• 각 루틴, 미션의 startTime, endTime을 받아서 durationTime을 구할 때
그 외 날짜와 관련된 기능을 쉽게 사용할 수 있다.

durationTime 구하기

const startTime = moment(); // 미션이 시작될 때 startTime 변수 생성
const endTime = moment(); // 미션이 끝났을 때 endTime 변수 생성
const durationTime = moment.duration(endTime.diff(startTime)).asSeconds();
// 초(second) 단위 Number type으로 변환된다.
// duration값에서는 asDays(), asHours() 등으로 원하는 값을 얻을 수 있다.

4. react-dnd

5. emoji-picker

6. time-picker

7. calendar(후순위)