에러1 차트가 이상하다.[mongodb 날짜 하루 차이 수정]

애먹은 이유: 라이브러리는 잘 적용했지만, 그걸 프론트에서부터 시작해서 dateFormat()으로 형식전환하여 server로 보내는 일련의 과정 및 방식을 몰랐기 때문.

 

수정 방법 : node.js 에서든 , 프론트에서든 수정하려면 둘다 가능하다.

 

아래 링크에서 node.js로 간단히 수정가능하다. 내껀 프론트로 수정해보려 한다.

 

https://velog.io/@cindy0817-web/Node.js%EC%97%90%EC%84%9C-mongoDb%EC%97%90-%ED%95%9C%EA%B5%AD-%EC%8B%9C%EA%B0%84%EC%9D%84-%EB%84%A3%EC%96%B4%EC%A3%BC

 

---

내 코드 상황.

1.  현재 지출, 비용 두가지 폼으로 db를 구성해 놓음. ㅡ> 각각 수정이 필요.

2.  폼으로 두 정보를 각각 받아서 node 서버를 통해, 날리고 있는 구조.  

3.  날짜 관리 컴포넌트도 따로 만들어 둔 상황임.

 

결론. 날짜 관리 컴포넌트 점검 후, 보내는 form의 구조를 잘 살펴보면 됨.

 

 

우선 아시아/서울 기준으로 만들고 세팅. 

import moment from "moment-timezone";

export const dateFormat = (date) => {

  // 주어진 날짜를 서울 시간대로 변환하고, "YYYY/MM/DD" 형식으로 포맷팅

  return moment.tz(date, "Asia/Seoul").format("YYYY-MM-DD");

};

 

---

윗 컴포넌트를 export 해와서 date 변수에 초기화 시켜서 비용을 추가시키는 상태변수에 집어 넣는다. 

import { dateFormat } from "../../utils/dateFormat";

 

unction ExpenseForm() {

  const { addExpense, error, setError } = useGlobalContext();

  const [inputState, setInputState] = useState({

    title: "",

    amount: "",

    date: "",

    category: "",

    description: "",

  });

  const { title, amount, date, category, description } = inputState;

  const handleInput = (name) => (e) => {

    setInputState({ ...inputState, [name]: e.target.value });

    setError("");

  };

  const handleSubmit = (e) => {

    e.preventDefault();

    // Date 객체를 올바른 형식으로 변환

    const formattedDate = date ? dateFormat(date) : "";

    const payload = {

      ...inputState,

      date: formattedDate, // 변환된 날짜 데이터를 payload에 포함

    };

    addExpense(payload); // 수정된 payload를 사용하여 서버에 전송

    // 폼 제출 후 입력 상태 초기화

    setInputState({

      title: "",

      amount: "",

      date: "",

      category: "",

      description: "",

    });

  };

---

expenseForm 내용만 수정한 모습.

프론트에서 2/13일로 정보 입력.

 

---

income form은 아직 수정 전인 상태여서 날짜가 하루 늦게 나온다.