[클라우딩 어플리케이션 엔지니어링 TIL] 240216 - React 실전 프로젝트 4

Intro

---

오늘은 일기장 작성하기/수정하기 페이지를 구현하는 실습 강의를 들었다.

 

 

 

오늘 학습한 내용

---

날짜 표현하기 (YYYY-MM-DD)

• toISOString()

Date.prototype.toISOString() - JavaScript | MDN

 

new Date().toISOString()
// '2024-02-17T12:34:42.993Z'

 

toISOString()으로 표현된 날짜 형식에서 시간을 제외하고 YYYY-MM-DD 형태로 사용하기 위해 slice 함수로 필요한 부분만 잘라준다.

const getStrDate = (date) => {
  return date.toISOString().slice(0, 10); 
};

 

 

 

useNavigate (react-route-dom)

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate();
navigate('/', { replace: true });

네비게이트 된 후, 뒤로가기 했을 경우 기존 페이지로 넘어가는 것을 막기 위해서는 replace: true를 설정하면 된다.

 

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate();
navigate(-1);

페이지를 뒤로가고 싶을 땐 -1

 

 

 

 

마무리

---

작성하기 페이지와 수정하기 페이지가 거의 같은 형태의 UI라 DiaryEditor라는 컴포넌트를 만들어 공통적으로 사용할 수 있게 구현하니

수정하기 페이지를 구현할 땐 훨씬 개발 속도가 빨라진 걸 체감할 수 있었다.

개발을 하면서 중복된 코드가 있는 경우 효율적으로 코드를 관리하기 위해 공통 컴포넌트로 묶는 방법을 항상 생각해야겠다.

 

일기 작성하기 페이지

일기 수정하기 페이지