날짜를 읽을 때(TZ로)
- 따라서 서버로 전송된 날짜는 읽을 때 tz 형식으로 제공됩니다.
- tz는 시간대를 나타냅니다.
- YYYY-MM-DDTHH:mm:ss.00Z
- 2023-02-12T16:00:00.000Z
- 이런 형태입니다.
- 읽은 데이터
- 이벤트 목록에서
- 아마도 수정
- 두 번 사용됩니다.
- 이것의 문제는 한국의 시간이 GMT+09:00인데 한국 표준시(GMT+09:00)를 서버에서 데이터베이스에 입력해도 GMT로 입력된다는 점이다.
- 따라서 해당 국가에 맞는 시간으로 변경하여 리셉션에 시간을 제시할 필요가 있습니다.
- 즉, 접수는 3시로 보내고 서버도 3시로 보내는데 모멘트로 날짜 객체로 변환하면 서버에서 받은 데이터는 (+9)가 됩니다.
그리고 12시가 됩니다.
- 즉, 접수는 3시로 보내고 서버도 3시로 보내는데 모멘트로 날짜 객체로 변환하면 서버에서 받은 데이터는 (+9)가 됩니다.
이벤트 목록으로
- 초기 이벤트 목록은 순간으로 형식이 지정됩니다.
- 목록에 날짜를 표시하기만 하면 되므로 문자열 형식일 수 있습니다.
- 목록에 날짜를 표시하기만 하면 되므로 문자열 형식일 수 있습니다.
- 2023-02-12T16:00:00.000Z는
{moment(Date.parse(event.open)).add(-9, “h”).format(“YYYY-MM-DD”)} {/* {이벤트 .open.slice(0, 10)} * /}
{순간(Date.parse(event.open)).add(-9, “h”).format(“hh:mm A”)} – {순간(Date.parse(event.close)).add(- 9, “h”).format(“hh:mm A”)}
- 2023년 2월 12일 오후 4시 – 오후 6시까지
- 위의 주석 조각도 가능하지만 아래 시간 부분에서 매우 하드코딩됩니다.
- 위의 주석 조각도 가능하지만 아래 시간 부분에서 매우 하드코딩됩니다.
- 순간 도서관의 힘을 배운 곳이 바로 여기였습니다.
- moment.js자바스크립트에서 사용되는 날짜 관련 라이브러리 중 가장 많이 사용되는 라이브러리이다.
- 현재는 업데이트가 없다고 하지만 2011년 이후로 가장 많이 사용되는 날짜 관련 라이브러리입니다.
- moment.js자바스크립트에서 사용되는 날짜 관련 라이브러리 중 가장 많이 사용되는 라이브러리이다.
이벤트 변경의 경우
- 서버에서 받은 날짜는 이벤트 변경 시 기존 날짜 선택기에 나타나야 하므로 날짜 객체로 변경해야 합니다.
- 그러므로
- const (startDate, setStartDate) = useState( new Date(new Date(updateEvent.open).getTime() – 9 * 60 * 60 * 1000), ); const (endDate, setEndDate) = useState( new Date(new Date(updateEvent.close).getTime() – 9 * 60 * 60 * 1000), ); const (startTime, setStartTime) = useState( new Date(new Date(updateEvent.open).getTime() – 9 * 60 * 60 * 1000), ); const (endTime, setEndTime) = useState( new Date(new Date(updateEvent.close).getTime() – 9 * 60 * 60 * 1000), );
- 그렇게 취급했다
- 각 상태는 날짜와 시간으로 구분되며, 이 경우 모든 날짜와 시간은 9시간을 빼고 날짜와 시간으로 나누므로 단위는
- 먼저 날짜 객체로 만들고 getTime을 사용하여 ms 단위의 숫자로 만들고 9시간(9 * 60 * 60 * 1000)을 빼서 다시 날짜 객체로 만듭니다.
- 이렇게 하면 사용자가 이벤트를 등록하고 이벤트를 편집하기 위해 돌아올 때 날짜 선택기에 날짜가 정상적으로 표시됩니다.
쿠폰 추가 시
- 이벤트 등록 시 여러 개의 쿠폰을 추가할 수 있습니다.
- 그러나 현재 이러한 쿠폰에 대해서도 CRUD가 가능합니다.
- 이벤트 작성 (단, 이때 이벤트 날짜가 주어지면 기본적으로 쿠폰 날짜도 포함됩니다.
)- (선택 사항) 쿠폰을 추가합니다.
- (선택) 위에서 추가한 쿠폰을 변경합니다.
- (선택) 위에서 추가하거나 수정한 쿠폰을 삭제합니다.
- 이벤트 등록 (추가, 추가, 변경된 바우처를 한번에)
- (선택 사항) 쿠폰을 추가합니다.
- 지금까지 우리가 한 일은 이벤트를 만들고 등록하는 것뿐이며 이제 (선택)해야 합니다.
- 이벤트 날짜 지정 시 쿠폰 날짜 기본값 설정
- 쿠폰 설정을 클릭하면 기존 시가 및 종가 값이 거래로 전송되고 쿠폰 추가 구성 요소에서 확인됩니다.
const (startDate, setStartDate) = useState( addFormStartExpDate === "" ? false : new Date(addFormStartExpDate), ); const (endDate, setEndDate) = useState( addFormStartExpDate === "" ? false : new Date(addFormEndExpDate), ); const (startTime, setStartTime) = useState( addFormStartExpDate === "" ? false : new Date(addFormStartExpDate), ); const (endTime, setEndTime) = useState( addFormStartExpDate === "" ? false : new Date(addFormEndExpDate), );
{ setCouponState(참); 디스패치(_postAddFormStartExpDate(open)); 디스패치(_postAddFormEndExpDate(닫기)); }} > 쿠폰 설정 - 쿠폰 추가 시 이벤트 등록과 마찬가지로 datepicker로 날짜를 등록하고 useEffect로 시가를 변경합니다.
- 단, 여기에 쿠폰을 저장하면 서버로 바로 전송되는 것이 아니라 스토어로 먼저 전송됩니다.
- 그런 다음 이벤트에 등록하기 전에 상점에서 바우처 목록을 편집 및 삭제할 수 있습니다.
_postCoupon: (state, action) => { console.log(action.payload); state.coupon.unshift(action.payload); },
- 그런 다음 이벤트에 등록하기 전에 상점에서 바우처 목록을 편집 및 삭제할 수 있습니다.
- 이제 방금 추가한 쿠폰을 변경하는 기능을 구현해야 합니다.
쿠폰 변경의 경우
- 위에서 추가한 쿠폰을 변경하는 것이기 때문에
- 기본적으로 YYYY-MM-DD HH:mm 형식으로 쿠폰을 추가할 때 상점에 저장된 데이터를 표시하려면
const (startDate, setStartDate) = useState( new Date(new Date(couponData.startExpDate).getTime()), ); const (endDate, setEndDate) = useState( new Date(new Date(couponData.endExpDate).getTime()), ); const (startTime, setStartTime) = useState( new Date(new Date(couponData.startExpDate).getTime()), ); const (endTime, setEndTime) = useState( new Date(new Date(couponData.endExpDate).getTime()), );
- .
- 이후에는 쿠폰을 추가하는 것과 동일합니다.
- 솔루션이기 때문에
- _updateCoupon: (state, action) => { for (let i = 0; i < state.coupon.length; i++) { if (i === action.payload.idx) { state.coupon(i) = action. 페이로드 바우처 } } },
- 관련 쿠폰만 편집하려면 이 옵션을 사용하십시오.
- 여기서 idx는 쿠폰 목록이 검색될 때의 인덱스입니다(useSelector 사용).
- 목록을 그릴 때 보통 map 함수를 사용하는데 이때는 index 속성을 사용하고 있습니다.
- (처음에는 서버의 아이디를 사용했는데 백엔드에서 DB의 아이디를 사용하지 않는 것이 좋다는 말을 듣고 이 방법을 받아서 수정과 삭제 모두 사용했습니다.
아주 좋아요!
)
function Items({ currentItems, updateState, deleteState }) { return ( <Fragment> {currentItems && currentItems.map((v, idx) => ( <CouponCard event={v} idx={idx} updateState={updateState} deleteState={deleteState} /> ))} </Fragment> ); }
- 삭제는 수정과 비슷하지만
- _deleteCoupon: (state, action) => { const deleteCoupon_list = state.coupon.filter((v, index) => { return index === action.payload ? false : true; }); state.coupon = deleteCoupon_list; },
- 나랑 해