useFormik 값이 무얼 뜻하는지 backend에서 찾기 (서버 전송)

 

 

📂 Front 소스 : React

1. 내가 찾고 싶은 useFormik의 onSubmit을 살펴서 await를 찾는다

const restRequest = useFormik({
    initialValues: {
        id: 0,
        restType: '',
    },
    validate: (values) => {},
    onSubmit: async (values) => {
    	const res = await CompanyService.restdayRequest(forms);
        if (res?.result) {
        	// 요청 성공 모달
            setOpenSuccessRequestModal(true);
            props.reFresh();
        } else if (res?.data.message){
        	// 요청 실패 후 서버에서 에러 메세지를 보내줬을 경우
            showNotification(tr('실패 이유: '), res?.data.message + '.', 'danger');
            failedRequest();
        } else {
            // 요청 실패 후 에러 메세지 없는 경우
            failedRequest();
        }
    },

 

👩‍💻 const res = await CompanyService.restdayRequest(forms);

CompanyService.restdayRequest(forms)를 호출해서 연차(휴가) 신청 요청을 서버에 보냄
await 때문에 요청이 끝날 때까지 기다린 후 결과를 res에 저장
forms는 서버로 보내는 데이터(연차 신청 정보)

 

2. CompanyService 를 import 시킨 페이지로 가서 restdayRequest 찾기

📂 ..경로~ /CompanyService.js

/**
 * 연차 신청
 * @method POST
 * @param {OBJECT} restday
 * =========================
 * @param {INTEGER} companyId
 * @param {INTEGER} restdayId
 * @param {STRING} memo
 * @param {DATE} createdAt
 */
restdayRequest: (restday) => _post2('/bini/restday-request', restday),

 

👩‍💻 @method POST

HTTP POST 방식으로 요청을 보냄.
👩‍💻 @param {OBJECT} restday

함수의 인자는 객체(restday) 형태입니다.
👩‍💻 객체 속성:
companyId → 회사 ID (정수)
restdayId → 연차 종류 ID (정수)
memo → 메모 (문자열)
createdAt → 생성일 (날짜)

 

👩‍💻 restdayRequest: (restday) => _post2('/attend/restday-request', restday),

restdayRequest 함수 정의

연차 신청 데이터를 서버에 POST 요청으로 보내는 함수

 

** 사용법
restdayRequest({ companyId: 1, restdayId: 2, memo: '휴가', createdAt: '2025-11-28' })

** 내부 동작
_post2()라는 함수를 호출합니다.
첫 번째 인자: '/attend/restday-request' → API 경로(서버 주소 + 엔드포인트)
두 번째 인자: restday → 서버에 보낼 데이터(JSON 형태)

 

 

 

📂 Backend 소스 : Java

3. /restday-request 전체 검색

@PostMapping(
	value = "/restday-request",
    consumes = { MediaType.MULTIPART_FORM_DATA_VALUE },
    produces = { MediaType.APPLICATION_JSON_VALUE }
)
public ResponseEntity<ResponseDto<Object>> restday2(@ModelAttribute("request") RequestDto dto) {
    return ResponseDto.getResponse(HttpStatus.OK, requestService.restday2(dto));
}

 

1. Spring Controller의 POST 요청 핸들러
👩‍💻 @PostMapping("/restday-request")
/restday-request 경로로 POST 요청이 들어오면 호출됨
👩‍💻 consumes
클라이언트에서 보내는 데이터 타입(multipart/form-data)
👩‍💻 produces
서버가 반환하는 데이터 타입(application/json)

2. 파라미터
👩‍💻 @ModelAttribute("request") RequestDto dto
클라이언트에서 보낸 데이터를 RequestDto 객체로 받음

3. 반환
👩‍💻 ResponseEntity<ResponseDto<Object>>
HTTP 상태와 JSON 형태 데이터를 반환
실제 로직은 requestService.restday2(dto)가 처리함

 

4. ResponseDto 타고 그 페이지로 들어가기

ResponseDto란?

서버가 클라이언트에 데이터를 보낼 때 통일된 형식으로 감싸주는 객체