JavaScript Date 타입을 Java LocalDateTime으로 전달하기

Spring과 React를 활용해서 토이프로젝트 개발 진행 중 자바스크립트의 Date 타입을 자바의 LocalDateTime 형태로 어떻게 전달할 수 있을지 고민하였고, 찾아본 결과 date-format 라이브러리를 활용하면 쉽게 전달할 수 있다는 것을 알게되었다.

 

date-format 라이브러리의 활용 방법을 토이프로젝트의 일부 코드를 통해 공유하고자 한다.

[React]

client.js

import axios from "axios";

const client = axios.create();

export default client;

api.js

import client from './client';

export const createSchedule = (
  memberId,
  name,
  startDate,
  endDate,
  isUse,
  todoList,
) =>
  client.post(`/api/schedule/member/${memberId}`, {
    name,
    startDate,
    endDate,
    isUse,
    todoList,
  });

ScheduleCreateContainer.jsx

 import format from 'date-format';
 import { createSchedule } from '../../lib/api';
 
 ...
 
 const createScheduleRequest = async ({
    name,
    startDate,
    endDate,
    isUse,
    todoList,
  }) => {
    try {
      createSchedule(memberId, name, startDate, endDate, isUse, todoList);
    } catch (e) {
      console.log(e);
    }
  };
  
  const handleCreateSchedule = (name, startDate, endDate, isUse, todoList) => {
    const sDate = format.asString(startDate);
    const eDate = format.asString(endDate);
    createScheduleRequest({
      name,
      startDate: sDate,
      endDate: eDate,
      isUse,
      todoList,
    });
    navigate(`/member/${memberId}/schedule`);
  };

...

 

date-format의 asString 메서드에 Date 타입 파라미터를 추가하면 ISO8601 형태의 값을 얻을 수 있다.

ex) 2017-03-14T14:10:20.391

ScheduleCreateForm.jsx

import { useState } from 'react';

...
  
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  
...

 

---

[Spring]

ScheduleController.java

    @PostMapping("/member/{member_id}")
    public ResponseEntity createSchedule(@PathVariable(name = "member_id") Long memberId,
                                         @RequestBody @Valid CreateScheduleRequest request) {
        log.info("[createSchedule] call, memberId = {}", memberId);

        scheduleService.createSchedule(memberId, request);

        return new ResponseEntity(HttpStatus.OK);
    }

CreateScheduleRequest.java

    @Getter
    @ToString
    public static class CreateScheduleRequest {

        @NotBlank
        private String name;

        @NotNull
        private LocalDateTime startDate;

        @NotNull
        private LocalDateTime endDate;

        @NotNull
        private IsUse isUse;

        @NotNull
        @UniqueElements
        private List<Long> todoList;
    }

 

 

REFERENCE

https://www.npmjs.com/package/date-format