2. restApi 사용 방법

 

restApi Class의 경우 x2bee-core에 있는 restApiUtil을 사용하여 동작합니다.

기본적인 사용법은 1번에서 설명하였던 restApiUtil과 모두 동일합니다.

단지 함수 이름은 조금 달라서 밑에서 표로 설명 하겠습니다.

1. Server Component

서버 컴포넌트의 경우 기본적으로 get만 있을 경우가 높아서 get만 코드를 설명하였습니다.

import { restApi } from '@/lib/common/plugins/restApi';

const SearchPage = async () => {
  const options = {
    headers: {
      Cookie: 'site_no2=1;',
    },
  };

  const data = await restApi.get(
    'http://localhost:8888/api/sample/samples/searchtest3',
    options
  );

  console.log(data.payload);
  console.log(data.code);
  console.log(data.message);
  console.log(data.httpStatus);
  console.log(data.headers.get('x2bee-token'));

  return (
    <>
      test1111
    </>
  );
};

export default SearchPage;

 

2. Client Component

'use client';

import { restApi } from '@/lib/common/plugins/restApi';
import { useEffect, useState } from 'react';

const TestPage = () => {
  const [data, setData] = useState({});
  
  useEffect(() => {
    const fetchData = async () => {
      const options = {
        headers: {
          Cookie: 'site_no2=1;',
        },
      };

      const test = await restApi.get(
        'http://localhost:8888/api/sample/samples/searchtest3',
        options
      );

      console.log(test.payload);
      console.log(test.code);
      console.log(test.message);
      console.log(test.headers.get('x2bee-token'));

      setData(test || {});
    };

    fetchData();
  }, []);

  async function apitest1() {
    const data = {
      seq: '111111',
      log: '22222',
      testValue: '4444kkkkkk키키키키키',
    };

    const res = await restApi.post('/api/sample/samples/apitest1', {
      params: {
        test1: '11111',
        test2: '22222'
      },
      body: data,
    });

    console.log(res);
  }

  return (
    <>
      test2222 
      <button onClick={() => apitest1()}>api test1</button>
    </>
  );
};

export default TestPage;

 

- 파일업로드

'use client';

import { restApi } from '@/lib/common/plugins/restApi';
import { useEffect, useState } from 'react';

const TestPage = () => {
  const [fileList, setFileList] = useState([]);
  
  function file() {
    browse().then((files) => {
      setFileList(files);
    });
  }

  async function file2() {
    const files = await browse('image/*');
    setFileList(files);
    console.log(files);
  }

  function file3() {
    browse('*', true).then((files) => {
      setFileList(files);
    });
  }

  function upload() {
    console.log(fileList);

    const data = {
      seq: '111111',
      log: '22222',
      testValue: '3333kkkkkk카카카카카카',
    };

    const form: globalThis.FormData = new FormData();
    form.append(
      'data',
      new Blob([JSON.stringify(data)], { type: 'application/json' })
    );

    restApi
      .uploadPost('/api/sample/samples/testFiledata1', { form, files: fileList })
      .then((res) => {
        console.log('테스트 파일 업로드');
        console.log(res);
      });
  }

  async function upload2() {
    console.log(fileList);

    const data = {
      seq: '111111',
      log: '22222',
      testValue: '3333kkkkkk키키키키키',
    };

    const form = new FormData();
    form.append(
      'data',
      new Blob([JSON.stringify(data)], { type: 'application/json' })
    );

    const res = await restApi.uploadPost('/api/sample/samples/testFiledata2', {
      form,
      files: fileList,
    });

    console.log(res);
  }

  async function upload3() {
    console.log(fileList);

    const data = {
      seq: '111111',
      log: '22222',
      testValue: '4444kkkkkk키키키키키',
    };

    const form = new FormData();
    form.append(
      'data',
      new Blob([JSON.stringify(data)], { type: 'application/json' })
    );

    const res = await restApi.uploadPut('/api/sample/samples/testFiledata3', {
      form,
      files: fileList,
    });

    console.log(res);
  }
  
  return (
    <>
      test2222 
      <button onClick={() => file()}>파일 테스트</button>
      <button onClick={() => file2()}>파일 테스트2</button>
      <button onClick={() => file3()}>파일 테스트3</button>
      <button onClick={() => upload()}>파일 업로드</button>
      <button onClick={() => upload2()}>파일 업로드2</button>
      <button onClick={() => upload3()}>파일 업로드3</button>
    </>
  );
};

export default TestPage;





-------------------------------------------------------
스프링 자바 코드


@PostMapping(value = "/testFiledata1", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
	public ResponseEntity<Response> testFiledata1(@RequestPart("data") TestLog data, HttpServletRequest httpServletRequest) throws IOException {
		log.debug("data : {}", data);

		MultipartHelper.handle(httpServletRequest, (fieldName, fileName, fileSize, inputStream, multipartFile) -> {
			log.debug("fieldName : {}, fileName : {}", fieldName, fileName);
		});

		Response body = Response.builder()
				.payload("OK")
				.build();

		return ResponseEntity.ok().body(body);
	}

	@PostMapping(value = "/testFiledata2", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
	public ResponseEntity<Response> testFiledata2(@RequestPart TestLog data, @RequestPart(required = false, name = "files") List<MultipartFile> files) throws IOException {

		log.debug("data : {}", data);

		if (files != null) {
			for (MultipartFile file : files) {
				log.debug("file : {}", file);
			}
		}

		Response body = Response.builder()
				.payload("OK")
				.build();

		return ResponseEntity.ok().body(body);
	}

	@PutMapping(value = "/testFiledata3", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
	public ResponseEntity<Response> testFiledata3(@RequestPart("data") TestLog data, HttpServletRequest httpServletRequest) throws IOException {
		log.debug("data : {}", data);

		MultipartHelper.handle(httpServletRequest, (fieldName, fileName, fileSize, inputStream, multipartFile) -> {
			log.debug("fieldName : {}, fileName : {}", fieldName, fileName);
		});

		Response body = Response.builder()
				.payload("OK")
				.build();

		return ResponseEntity.ok().body(body);
	}

 

3.  restApi(restApiUtil) 제공 함수 종류

x2bee-core에 있는 restApiUtil의 경우 파일 업로드 formPost, formPut 인것은 formData 기반으로 데이터를 전송하기 때문에 그렇고
restApi Class의 경우 이름을 바로 알 수 있도록 upload로 하였습니다.

restApi.get()	restApiUtil.get()	GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용
restApi.post()	restApiUtil.post()	POST 메소드는 주로 새로운 리소스를 생성(create)할 때 사용
restApi.put()	restApiUtil.put()	PUT는 리소스를 생성 / 업데이트하기 위해 사용
restApi.delete()	restApiUtil.delete()	DELETE 메서드는 지정된 리소스를 삭제 하기 위해 사용
restApi.uploadPost()	restApiUtil.formPost()	파일 업로드용 POST
restApi.uploadPut()	restApiUtil.formPut()	파일 업로드용 PUT

 

4.  restApi(restApiUtil) Argument

url		요청 url
options	headers	요청 header
	params	요청 parameter(query). 설정시 해당값을 url 뒤에 붙여서 완성함
	body	요청 data
	form	파일 업로드시 사용. body로 전송되는 FormData정보
	files	파일 업로드시 사용. Array<FileList> 형태이며, file[0], file[0], files등의 이름으로 FormData에 추가함.

 

5.  restApi(restApiUtil)  Response

ResponseEntity	timestamp	시간
	code	결과 코드
	message	결과 메시지
	isProcess	process 여부
	payload	payload. response data값
	error	error 여부
	httpStatus	http status값 (200, 400, 500등등)
	headers	response 헤더값 ex. res.headers.get('test')