1. 구현하기
진행 상황
- 푸터 레이아웃
- 캘린더 범위 설정
진행 예정
- 로고 고르기
- 서비스 소개 페이지
2. TIL
2-1. 로딩 컴포넌트 전역 관리
로딩 컴포넌트의 상태 관리
기존에는 로딩 컴포넌트를 만들어서 리덕스로 로딩 상태를 관리 했었다. api요청을 하는 부분애서 로딩 상태를 꺼내와서 요청을 보내기 전에 로딩을 true로 두고 요청이 끝나면 false로 dispatch를 사용하여 로딩 상태를 업데이트 시켜주었다. 로딩 컴포넌트를 사용할 페이지에서 로딩 상태를 다시 꺼내와서 로딩 컴포넌트를 임포트하고 만일 로딩 상태가 true라면 로딩 컴포넌트를 보여지게 하게끔 작성하였다.
const { loading } = useSelector(selectLoading);
{loading && <Loading />}lazy와 suspense 사용하기
로딩을 띄워야하는 페이지가 많을 수록 계속 임포트하고 상태를 꺼내오는 중복 코드가 많이 발생하게 되었다. 그래서 전역적으로 관리하면서 로딩 컴포넌트를 한번만 사용할 수 있는 방법 중에 lazy와 suspense를 사용하여 로딩 상태를 띄우기로 했다.
lazy 함수를 사용하면 동적 import를 사용해 컴포넌트 렌더링이 가능하고, 반드시 Suspense 컴포넌트 하위에서 렌더링되어야 하며 Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다.
fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React Element를 받아들인다. Suspense 컴포넌트는 lazy 컴포넌트를 감싸며, 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있다.
그래서 lazy와 suspense를 사용하면 App.js에서 한번의 임포트로 여러 페이지애서 로딩 컴포넌트를 적용시킬 수 있게 된다.
2-2. Date 객체 대체하기
프론트에서의 Date 객체 사용
프론트에서 날짜를 다루는 것은 매우 흔한 일인데 보통 이럴때 Date객체를 자주 사용하곤 했었다. 우리 프로젝트에서도 강아지 나이를 구할때나 캘린더에서 Date 객체를 사용했었다. 하지만 Date 객체는 사용자의 컴퓨터 자체 시간 설정에 영향을 받아 결과값이 다르게 나올 수도 있다.
const age = new Date().getFullYear() - value.slice(0, 4);
const [value, onChange] = useState(new Date());moment.js로 대체하기
moment.js 라이브러리를 활용하면 Date객체를 대체할 수 있으면서 방금전 작성, n시간 전 작성, n일 전 작성 등 과 같이 시간을 계산하기에도 용이해서 유용한 라이브러리 중 하나이다. 되도록 개발할 때에는 Date 객체 사용을 지양하고, 모멘트와 같은 라이브러리를 습관적으로 사용하려고 노력해야겠다.
import moment from 'moment/moment';
const now = moment().toDate();
const formatDate = moment(value).format('YYYY-MM-DD');
const DisplayDate = moment(value).format('YYYY년 MM월 DD일 dddd');