Assignment 7: 솔라커넥트 기술 과제입니다.
노션 정리 링크
깃허브 정리 링크

현재 날짜, 시간 가져오기

Date 객체의 locale 관련 메서드

지난 과제에서는 Date 객체를 이용해 getDate()와 같은 메서드로 숫자를 가져온 후, 미리 정의한 배열을 이용해 날짜와 현재 시간을 구했습니다.

이번 과제에서는 toLocaleDateString과 toLocaleTimeString을 이용해 간단하게 날짜와 시간을 가져왔습니다.

toLocaleDateString, toLocaleTimeString

각각 사용자의 문화권에 맞는 날짜, 시간을 리턴 받습니다.

toLocaleDateString(locale, option) // 날짜 관련
toLocaleTimeString(locale, option) // 시간 관련
locale : 지역 정보
option : 데이터 형식 form

컴포넌트

const TodoHead = () => {
  const [date, setDate] = useState(
    new Date().toLocaleDateString("en-US", DATE_FORM)
  );
  const [time, setTime] = useState(
    new Date().toLocaleTimeString("en-US", TIME_FORM)
  );
};

// utils/constants.ts
export const DATE_FORM: Intl.DateTimeFormatOptions = {
  year: "numeric",
  weekday: "long",
  month: "long",
  day: "numeric",
};

export const TIME_FORM: Intl.DateTimeFormatOptions = {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
};

• locale 정보에 영어, 미국 지역 정보 입력을 입력합니다. 한글, 한국에 경우 kr-KR입니다.

• option엔 타입 형식 설정을 합니다. 2-digit 같은 경우 앞의 0을 자동으로 채워줍니다.

  {
      year: "numeric",
      weekday: "long",
      month: "long",
      day: "numeric",
  }
  
  {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  }

• DateTimeFormatOptions의 타입은 Intl.DateTimeFormatOptions 입니다.

실시간 시계 구현

setInterval에 1초의 시간을 설정해 1초마다 리렌더링 되도록 구현했습니다.
1초마다 setTime 함수에 시간을 계산해 갱신시킵니다.

useEffect(() => {
  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString("en-US", TIME_FORM));
  }, 1000);
  return () => {
    clearInterval(timer);
  };
}, []);

불변성 유지하며 객체의 속성 변경

일반적인 객체의 속성을 바꾸는 것이 아닌, 특정 아이템을 선택하고 그 아이템의 객체 속성을 불변성을 유지하면서 바꾸는 방법입니다.

const clickSomething = (id: number) => {
  setTodoState((prevState) =>
    prevState.map((todo: Itodo) =>
      todo.id === id
        ? {
            ...todo,
            done: !todo.done,
          }
        : todo
    )
  );
};

특정 아이템의 id를 받아오고 삼항연산자를 통해 true일 때 수정, false라면 그대로 수정하지 않고 둡니다.
이때 ES8의 object spread properties 문법을 이용해 기존 객체를 그대로 복사하고 바꾸고 싶은 속성만 바꾸면서 불변성을 유지합니다.

antd design

이번 과제를 통해 antd design 사용법에 대해 알게 됐습니다. 디자인 자체가 깔끔했고 무엇보다 모든 예제에 대한 코드들을 쉽게 볼 수 있다는 것이 장점이었습니다.

Modal antd design

Modal을 쉽게 구현할 수 있습니다. 저는 그중 Modal.error을 선택했습니다.

import { Modal } from "antd";

export const Modal = () => {
  Modal.error({
    title: "오류",
    content: "검색어를 입력해주세요.",
  });
};

DatePicker

달력을 이용해 날짜를 선택할 수 있는 antd design입니다.
DatePicker 중 시작-만료 일을 선택할 수 있는 RangePicker을 이용해 구현했습니다.
onChange 속성의 두 번째 매개변수를 이용해 선택된 날짜를 저장할 수 있습니다.

import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;

const TodoCreate = ({ nextId, createTodo, incrementNextId }: TodoCreateProps) => {
    const [startDate, setStartDate] = useState('');
    const [deadline, setDeadline] = useState('');

    const handleDateChange = (_: any, dateStrings: [string, string]) => {
    const [start, end] = dateStrings;
        setStartDate(start);
        setDeadline(end);
    };

    return {
        <RangePicker onChange={handleDateChange} />;
    }
}