클라이언트에서 서버 데이터 전송 방법

HTTP 메서드의 역할

• GET : 조회, 서버 상태 변경 X
• POST : 등록, 서버 상태 변경 O
• PUT : 수정(전체), 자원 교체
• PATCH : 수정(일부), 자원 일부 변경
• DELETE : 삭제, 자원 삭제

이렇게 RESTful 하게 개발하는 이유는 직관적인 API 설계를 통해,

개발자들끼리 딱 봐도 이해가 가고, 문서화, 자동화, 보안 유지보수에 유리하기 때문이다.

---

1. 클라이언트 → 서버 (String) : Query Parameter(String) : Get (조회)

const workplaceCode = row.item.workplaceCode
console.log('workplaceCode', workplaceCode)

function getWorkplaceDetail(workplaceCode: string) {
  return logiApi.get(`${WORKPLACEDETAIL_URL}`, {
    params: {
      workplaceCode, // String 형식
    },
  })
}

 

요청 (bash)

GET /workplaceInfo?workplaceCode=W001

Spring 서버

@RequestMapping(value = "/workplaceInfo", method = RequestMethod.GET)
    public ModelMap getWorkplaceInfo(@RequestParam @ApiParam(value = "사업장코드") String workplaceCode) {
        return workplaceSF.getWorkplaceDetailList(workplaceCode);
    }
// @RequestParam : 쿼리 파라미터를 받아오는 어노테이션
// String workplaceCode : 클라이언트에서 보낸 값이 String 이므로 타입 String 설정
// @ApiParam : Swagger 문서용 설명(실제 데이터 처리에는 영향 없음)

---

2. 클라이언트 → 서버 (데이터 여러개일 경우) : Query Parameter(String) : Get (조회)

const clientdata = {
        companyCode: companyCode.value,
        empCode: empCode.value,
        empName: empName.value,
        empEngName: empEngName.value,
        socialSecurityNumber: socialSecurityNumber.value,
        hireDate: hireDate.value,
        retirementDate: retirementDate.value,
        userOrNot: 'Y',
        birthDate: birthDate.value,
        gender: gender.value,
    } 

function getEmployeeAdd(clientdata: any) {
    console.log(clientdata)
    return logiApi.get(${EMPLOYEE_ADD_URL}, {
        params: clientdata
    })
}

요청 (bash)

GET /employee/add?companyCode=xxx&empCode=yyy&empName=zzz&...

Spring 서버

@RequestMapping(value = "/employeeAdd", method = RequestMethod.GET)
    public void getEmployeeAdd(@RequestParam Map<String, String> clientdata){
        System.out.println(clientdata);
        employeeServiceFacade.getEmployeeAdd(clientdata);
    }
// 쿼리 파라미터를 받기 위해 @RequestParam 어노테이션 사용
// 서버로 전달한 데이터의 형식이 Key=value 형태의 문자열 이기 때문에
// Map<String, String> 이 가장 적합한 타입이다.

// Bash = GET /example?name=Tom&age=25 이런 형태이기 때문에
// Map<String, String> = { "name" : "Tom:, "age" : "25" } 형태로 Spring이 처리한다.

---

3. 클라이언트 → 서버 (데이터 여러개일 경우) : JSON(Request Body) : Post (등록)

const clientdata = {
    customerCode: customerCode.value,
    workplaceCode: workplaceCode.value,
    customerName: customerName.value,
    customerType: customerType.value,
    customerCeo: customerCeo.value,
    businessLicenseNumber: businessLicenseNumber.value,
    socialSecurityNumber: socialSecurityNumber.value,
    customerBusinessConditions: customerBusinessConditions.value,
    customerBusinessItems: customerBusinessItems.value,
    customerZipCode: customerZipCode.value,
    customerBasicAddress: customerBasicAddress.value,
    customerDetailAddress: customerDetailAddress.value,
    customerTelNumber: customerTelNumber.value,
    customerFaxNumber: customerFaxNumber.value,
    customerNote: customerNote.value,
  }
  
  function addGeneralClient(clientdata: any) {
  return logiApi.post(`${ADD_GENERAL_CLIENT_URL}`, clientdata)
}

 

HTTP 요청의 Body 에 포함 post (등록)

Body: { "name": "Tom", "age": 25 }

Spring 서버

@ApiOperation(value = "일반거래처 등록")
@PostMapping("/base/insertClient")
public void insertClient(@RequestBody @ApiParam(value = "일반거래처JSON") Client clientdata) {
    ClientSF.insertClient(clientdata);
}

// @PostMapping : HTTP 요청 중 POST 방식을 처리하겠다는 의미이다. 
	// @RequestMapping(method = RequestMethod.POST) 의 축약형
    
// @RequestBody : 클라이언트가 HTTP 요청 Body에 담은 JSON 데이터를
	// java 객체로 자동 변환해서 바인딩 해주는 역할
    // 이걸 DTO 인 Client 객체로 변경해준다.
    // requestBody 가 없다면 400 Bad Request 오류가 발생한다.

// @ApiOperation : API 에 대한 설명, 제목 등을 문서화 할 때 사용
// @APIParam : Swagger 용 어노테이션, RequestBody, RequestParam 받는 파라미터에 대한 설명을 붙여줌

---

4. 클라이언트 → 서버 (String) : URL Path Parameter 방식(Path) : Delete (삭제)

const accountAssociatesCode = selecteditem.value

function deleteFinanceClient(accountAssociatesCode: string) {
  return logiApi.delete(
    `${DELETE_FINANCE_CLIENT_INFO}/${accountAssociatesCode}`,
  )
}

경로 변수(Path)

 

/delete/{...}

Spring 서버

    @ApiOperation(value = "금융거래처 삭제")
    @DeleteMapping("/base/deleteFinance/{accountAssociatesCode}")
    public void deleteFinance(@PathVariable @ApiParam(value = "금융거래처JSON")String accountAssociatesCode){
        ClientSF.deleteFinance(accountAssociatesCode);
    }
    // URL : /base/deleteFinance/{accountAssociatesCode}
    // 요청이 /base/.../FIN001 이런식으로 오면
    // FTN001 이라는 문자열이 accountsociatesCode 변수에 자동으로 바인딩 된다.
    
    // @PathVariable : URL 경로 안 {}로 지정된 값을 변수로 추출한다.