Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원/8월

22.08.19 - [ WAS ] Ajax - Json 활용해서 응답하기 ( feat. Gson )

giggs 2022. 9. 2. 11:05

 

-- Index --

 

 

1. JSON 이란? 2. Gson 3. toJson()
JSON 폼 문자열
{ key : value }		 라이브러리
toJson()		 객체보내기
리스트보내기
객체안에 객체보내기

 

 

 

 

 

 

 

1. JSON 활용해서 객체를 문자열로 만들어서 응답하기

 

 

1-1 : JSON 이란?

  • JavaSctipy Object Notation
  • json은 그냥 문자열이다.
  • 근데 그냥 문자열이 아니라 – javascript 객체 문법 { ket: value } 형식으로 만들어진 문자열
  • 네트워크 전송은 문자열로만 이루어진다.

 

 

 

 

 

1-2 : JSON 라이브러리를 사용하지 않고  ajax 응답 결과로 객체를 전달하려면?

 

 

# 서블릿 쪽에서 클라이언트 쪽으로 객체를 보낼 때 #

# 라이브러리 사용안하고 보내려면 이런 작업 필요 #

 

 

 

 

 

1-3 : JSON을 사용하면 얻는 이점은?

 

 

#1. JSON 타입의 문자열로 변환하는 작업을 쉽게 처리 가능

  • 객체를 응답해주기 위해 위의 작업처럼 -
  • 번거롭게 { key : value } 형태의 문자열로 바꿔주는 작업을 자동으로 해준다.

 

 

#2. 클라이언트쪽에서 JS객체로 바로 사용 가능하다.

  • 이렇게 JSON 타입으로 자동 변환하여 보내주면 - 
  • 응답을 받는 쪽 = CLIENT 쪽에서는 parse() 작업만을 통해 이 문자열을 JS 객체로 바로 사용 가능하게 된다. 

 

 

 

 

 

무슨 이야기냐면

  • json 폼  { key: value }에 맞춰서 문자열을 보내기만 하면(응답을 보내주면)
  • javaScript 에서는 이 문자열을 객체로 바로 사용할 수 있다는 이야기!

 

 

즉, 클라이언트 쪽에서의 작업

  • 응답받은 문자열 잘라서 객체로 만드는 작업 = { 키 : 밸류 } 형식으로 만들어주어야 했던 작업을
  • JSON을 통해 보내주면 - 쉽게 처리할 수 있도록 해준다는 의미!
  • JSONparser 가 자동으로 문자열 --> object로 변환해주는 것!

 

 

 

 

 

 

 

1-4 : 응답받는 쪽 ( 클라이언트쪽 )에서 2가지 경우로 처리해보기

 

 

 

 

  • #1 - 응답받은 결과(key:value형식으로 만들어 준 문자열)를 그대로 출력해보기
  • #2 - 응답받은 결과(key:value형식으로 만들어 준 문자열)를 JSON.parse()해서 출력해보기

 

 

1번은 문자열 그대로 출력 - 2번은 객체로 만들어진 것 확인

 

 

 

 

클라이언트 쪽에서는 JSON.parse() 해주면

응답받은 문자열이

{ key : value } 형식에 맞다면

JSON 타입의 문자열이 맞다면

JSON.parse() 메서드 호출만으로 쉽게

자동으로 자바스크립트 객체로 만들어 주는구나

 

 

체크 완료

 

 

 

 

 

 

 

 

 

2. Gson 이란? 

 

 

 

2-1 : Gson 라이브러리 사용하는 이유?

  • 서블릿 쪽에서 ajax로 객체를 응답 보낼 때 { key : value } 형식으로 보내야 하는데 그 작업을 쉽게 하기 위해서 사용
  • 응답 보내는 쪽 ( 서버쪽 )에서 보다 쉽게 작업하기 위해서 사용

 

  • ajax에서 JASON.parse() 를 활용하여 문자열을 객체로 만들기 위해서는
  • 응답을 보내는 쪽 - 서블릿 쪽에서는 - { key: value } 형식으로 문자열을 전달하여야 한다.

 

  • { key : value } 형식을 맞춰서 응답을 보내주기 위해서
  • - 위에서 보았듯이 일일이 out.write( " " )해서 보내주어야 했었다.
  • 너무 힘들기도 하고, 번거롭기도 하고, 오류 가능성도 높아진다.
  • 이 작업을 쉽게 할 수 있도록 만들어 놓은 jar 파일 사용할 것이다.
  • 누가 만든 거 사용할까요?
  • 철수/영희 꺼 말고 – 구글이 만들어준 코드로 사용해보자

 

 

2-2 :  Gson 라이브러리 사용 준비

 

maven repository 검색 - gson 검색

 

 

문제점 발생한거 말고, 이용자 수 많은 것으로 jar파일 다운 - 서버 lib 연결

 

 

 

 

 

 

2-3 :  Gson 어떤 메서드를 사용해야 할까?

  • 라이브러리에 있는 클래스 이용해서 gson객체 생성한 후
  • 객체 안에 있는 메서드 활용해서 작업할 것이다.

 

 

 

 

이중에서도 우리가 사용할 메서드는

우리가 필요한 것은 parseVo 메서드이다.

( 이름은 다르겠지만 parse 해주는 기능 가진 메서드)

 

 

 

 

.toJson( ) 메서드 사용

 

 

 

 

 

 

 

 

 

3. Gson - .toJson( ); 메서드 사용해보기 

 

 

3-1 :  객체 보내기 

  1. 객체 vo 를  .toJson() 메서드의 파라미터로 넣어주고 ------ .toJson(vo) 
  2. 그 결과 값을 String 변수에 담아서 ------ String jsonStr
  3. 문자열을 응답해주면 된다. ------ out.write(jsonStr)
  4. 이렇게 응답된 문자열을 클라이언트 쪽 ( ajax ) 에서 JSON.parse(jsonStr) 해주면 객체로 바로 생성됨

 

 

# 2번 과정에서 vo객체가 --> { key : value } 형식으로 = JSON타입으로 바뀌어서 문자열로 반환된다 #

 

 

 

 

즉!  객체를 응답 보내기 위해서 - 아래의 작업을 해야 하는데

 

 

 

 

1번 작업을 수월하게 하기 위해서

  • 라이브러리와 메서드를 사용한 건데 – 내가 만들긴 복잡하니까 – 남이 만든 거 사용
  • Gson 객체의 toJson() 메서드 사용 – 객체를 JSON타입의 문자열로 만들어주고
  • String 문자열을 클라이언트에게 전달

 

 

2번 작업 체크

  • 원래는 응답받은 문자열을 잘라서 key, value 분리한 다음
  • 객체로 만들어주는 작업 = { key : value } 형태로 만들어주는 작업이 필요했는데
  • 1번의 작업으로 - JSON 타입으로 응답받은 문자열은
  • JSONparser 라는 애를 이용하여 JSONparser.parse() 해주면
  • 원래 복잡하고 귀찮은 작업 필요 없이 JS 객체로 바로 사용 가능하게 된다!

 

 

 

 

3-2 :   리스트 보내기 

 

  • #1. 테스트할 리스트 생성하고 객체 담아주기 ( 10개 )

 

 

 

 

 

  • #2. toJson(list) 로 보내고 잘 갔나 확인

 

 

출력 확인

 

 

 

 

3-3 :  객체 안에 객체 보내기

 

  • #1. 객체 안에 객체 (클래스)준비하기

 

 

 

  • #2. 이 객체를 포함하고 있는 객체(클래스) 세팅

 

 

이제 멤버vo객체는 scroeVo객체 포함하고 있는 상태

 

 

 

  • #3. 객체 안에 객체 보내보기

 

 

 

 

list [ ] 안에 객체 { } 10개가 있고

 

 

 

 

객체 { } 안에 객체 { } 가 있다.

list에 있는 - 객체 0 에 -  score 객체가 들어있다.

 

 

 

 

 

 

저작자표시 (새창열림)