728x90
javascript fetch() → java/Spring 반환
프런트 엔드에서 백엔드로 비동기 데이터 전송
- 기존에는 javascript의 비동기 기능으로 XMLHttpRequest를 이용해 비동기를 구현했는데 이 기능은 사용하기에는 다소 불편한 점이 있어 좀 더 편하게 사용하기 위해 Jquery 라이브러리를 따로 받고 이에 포함되어 있는 ajax을 이용해 비동기를 구현했는데, ES6부터는 javascript 자체적으로 fetch(비동기 기능)을 지원한다. 이 fetch() 비동기 기능을 활용하여 Spring(java)로 데이터를 전송하는 테스트를 하려 한다
- 프런트엔드에서는 fetch()를 통해 데이터를 보내고 백엔드에서는 JSONObject를 통해 데이터를 받아 가공 및 사용한다.
- 메서드 타입은 REST API에 맞춰서 GET, POST, PUT, DELETE를 사용하여 좀 더 사용하고자 하는 목표와 맞는 의미가 표현되게 사용하는 것이 좋다
- 데이터의 전송, 반환에는 JSON을 주로 사용한다
fetch() 기본 구성
- fetch( Url, Option )
.then(response ⇒ { })
.catch(error ⇒ { })- Url : mapping할 주소
- Option : Method, Header, body
- then( ) : 비동기 데이터 전송 및 반환에 성공 시 실행
- catch( ) : fetch 실행 중 에러 발생 시 catch 의미 그대로 에러를 잡아낸다
Method에 사용 가능한 타입
- GET : 데이터를 반환을 요청
- POST : 데이터 추가를 요청
- PUT : 데이터 수정을 요청
- DELETE : 데이터 삭제를 요청
기본적으로 알아야 할 사항
- JSONObject : 스트링을 json 객체로 만들어준다
- JSONArray : JSONObject를 JSONArray에 추가할 경우 추가적으로 배열 형태로 저장이 가능하다
- JSONParser : JSON 형태의 String 문자열이 들어올 경우 JSON 형태로 변환해주어 JSONOBject, JSONArray에 추가할 수 있다.
- JSON.stringify : JSONParser의 반대 형태로 JSON을 String 형태로 바꿔 전송한다.
테스트는 두 가지로 해보려 한다 (PUT, GET)
GET 방식을 프론트 엔드와 백엔드로 나타냈다.
다소 간단하게 표현했고, Get은 Option으로 들어갈 정보가 필요 없다.
- 프런트엔드
function asyncTest(){
let url = '/test';
// Get 비동기 쿼리스트링 전송
fetch(url + "?num=1&message=hello_word")
.then(res=>{
res.text().then(function(text){
console.log("text 안에 데이터 = " + text);
})
/* 주의사항
fetch의 then 안에서 res.json() 또는 res.text()로 데이터를 받았을 경우
한번 더 위 기능을 사용하면 에러가 발생한다.
res.json() 이후에는 무조건 then 또는 catch가 발생하는 조건으로 형성되어 있다.
*/
})
.catch(err=>{
console.log(err);
})
}
- 백엔드
@GetMapping("/test")
public String posttest(@RequestParam(name = "num") int num, @RequestParam(name = "message") String message) {
System.out.println("\n\n\n\n\n");
System.out.println("ParamData num = " + num);
System.out.println("ParamData message = " + message);
return "GET 보내기 성공!";
}
1. 백엔드 데이터 받은 결과
2. 프런트엔드 성공 문자 받은 결과
PUT으로 데이터를 보내기, 프런트엔드와 Spring 백엔드로 나누어 코드를 작성했다.
- 프론트엔드
function asyncTest(){
let jsonObj = new Object();
let jsonArray = new Array();
const names = ["철수","영희","길동"];
const hobbies = ["축구","여행","봉사활동"];
for(let i = 0; i < names.length; i++){
jsonObj.name = names[i];
jsonObj.hobby = hobbies[i];
jsonArray.push(jsonObj);
jsonObj = {};
/* 주의사항으로...
Object 초기화, 해당 사항을 해주지 않으면 객체에는 마지막 데이터만 남게된다.
아래와 같이 말이다
jsonArray[0].name = "길동",
jsonArray[1].name = "길동",
jsonArray[2].name = "길동"
이렇게 되는 이유는 무엇일까? jsonArray.push(jsonObj) 를 하게 될 경우
단일 데이터가 저장되는 것이 아닌 jsonObj 객체를 선언한 주소값이 저장되기 때문에
jsonArray의 각각의 배열에는 jsonObj의 동일한 주소값을 바라보고 있는 것이다.
*/
}
jsonObj.commons = {
"학교" : "서울고등학교",
"나이" : "18세",
"동아리" : "밴드부"
}
jsonArray.push(jsonObj);
// Put 비동기
let url = '/put-test';
fetch(url,{
method : 'put',
headers: {
"Content-Type": "application/json",
},
body : JSON.stringify(jsonArray)
}).then(res=>{ // javascript로 데이터를 받아 json 형태로 return 시키고
return res.json();
})
.then(json=>{ // 다시 then으로 받아 json으로 출력하면 결과값이 나온다
console.log(json);
})
.catch(err=>{
console.log(err);
}
- 백엔드
@PutMapping("/test")
public String puttest(@RequestBody String jsonData) {
JSONArray jsonArray = new JSONArray(jsonData);
JSONObject jsonObject = null;
String name = null;
String hobby = null;
try {
for (int i = 0; i < jsonArray.length(); i++) {
jsonObject = jsonArray.getJSONObject(i);
if (jsonObject.isNull("name")) { // name을 검색했는데 null이 아니면
System.out.println("-------------------------------------");
System.out.println(jsonObject.getJSONObject("commons"));
// 위에 보이는 commons를 json객체로 다시 받아서 데이터를 뽑아낸다.
jsonObject = jsonObject.getJSONObject("commons");
System.out.println("commons data : " + jsonObject.get("나이"));
System.out.println("commons data : " + jsonObject.get("동아리"));
System.out.println("commons data : " + jsonObject.get("학교"));
} else {
System.out.println("-------------------------------------");
name = String.valueOf(jsonObject.get("name"));
hobby = String.valueOf(jsonObject.get("hobby"));
System.out.println("JSON " + i + "번째 데이터");
System.out.printf("name : %s, hobby : %s\n", name, hobby);
}
}
} catch (Exception e) {
e.printStackTrace();
}
JSONObject response = new JSONObject();
response.put("1번째 데이터", "프로그래밍");
response.put("2번째 데이터", "너무");
response.put("3번째 데이터", "재밌쥬?");
System.out.println(response.toString());
return response.toString();
}
1. 보내기 전 JSON 형태로 만든 데이터 확인
2. 자바에서 받은 JSON 데이터 + 마지막 줄은 반환해줄 데이터
3. 반환받은 데이터 JSON으로 변환해서 출력
728x90
'Software Frontend > react & Javascript' 카테고리의 다른 글
에러, React Proxy error: Could not proxy request /favicon.ico from localhost:3000 to http://localhost:8000/. (0) | 2022.03.25 |
---|---|
자바스크립트를 이용해서 차트를 구현하고 PDF로 다운로드 Chart js, jspdf (4) | 2021.08.28 |
React Downgrade(버전 낮추는) 방법 (0) | 2021.06.01 |
에러, Line 6:19: 'React' is not defined no-undef (0) | 2021.04.25 |