JSON 데이터 주고 받기(1)(JSON 파싱)

Posted by ITPangPang
2016. 10. 6. 00:34 안드로이드(android)/JSON


JSON 데이터 주고 받기(1)

(JSON 파싱)



ㆍ 이번에는 서버에 데이터를 보내고 받을때

    사용하는 Json에 대해 알아보도록 하겠습니다.


ㆍ 뭐 Json의 역사 이런걸 알아볼건 아니고 그냥

    주고 받는 정도..


ㆍ GSON인가 뭐시기 있던데 그건 안써봐서

    얼마나 편한지 모르겠습니다.. 그냥 JSON도

    어려운 부분이 없어서..



JSON 어떻게 생긴거니?


기본 형태 : {"KEY":"VALUE"}


JSON 데이터는 기본적으로

Key값과 VALUE값으로

이루어져있습니다.


그리고 

KeyValue값을

{}으로 한번 감싸게 됩니다

brace(중괄호)라고 하죠


그리고 brace로 감싸진 형태를

JSONObeject라고 부릅니다



[{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}]


자 이번에는

기본형태에서 조금 업그레이드 된


square bracket(대괄호)

전체를 감싸고 있는

모습을 볼 수 있습니다.


이렇게 대괄호가 감싸고 있는

형태를 JSONArray라고 부릅니다


이렇게 형태는

2가지가 있다고 정도만

 알고계시면 됩니다


JSONObject

JSONArray



먼저 Json형태로 서버에 보내는 방법


서버로 보내는 방법은

간단합니다.


강제로 걍 만들어주면

됩니다

{" " : " "}


물론 좀 더 편하게 보내는

방법이 있긴 한데 저는 그냥

만들어서 보내는게 편해서

다른 방법은 안써봤습니다.

(put같은..)


바로 실전으로 넘어가서

형태를 만들어서 보내보겠습니다


1. 서버에 ID와 PW를 보낼때


먼저 로그인할때 로그인정보인

ID와 PW를 서버에 전송한다고

가정해보겠습니다.


이때 서버에서는 JSON형태인

{"userid":"idvalue","password":"passwordvalue"}

이런 형태로 보내달라고 합니다


그럼 간단하게

EditText 2개와 버튼 하나만

만들어보도록 하겠습니다


그리고 버튼을 눌렀을때

JSON 형태로 저장한 후에

그 값을 TextView에 찍어보겠습니다


아주 대충대충 심플한

xml 코드입니다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.tistory.itpangpang.jsonex.MainActivity">

<EditText
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="ID 입력해보거라"/>
<EditText
android:id="@+id/et2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="패스워드 입력해보거라"/>
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="이것은 로그인버튼"/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="변환 결과값" />
</LinearLayout>


이렇게 만들면

대충 옆에 Preview에서

아래처럼 생겼다고 하네요


EditText에 2가지 정보를

입력후에 버튼을 누르면

변환하는 코드를 만들어보도록

하겠습니다.


public class MainActivity extends AppCompatActivity
{

EditText et;
EditText et2;
Button btn;
TextView tv;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

et = (EditText)findViewById(R.id.et);
et2 = (EditText)findViewById(R.id.et2);
btn = (Button)findViewById(R.id.btn);
tv = (TextView)findViewById(R.id.tv);

btn.setOnClickListener(myClickListener);
}

View.OnClickListener myClickListener = new View.OnClickListener()
{
@Override
public void onClick(View v)
{

String temp = "{\"userid\""+":"+"\""+et.getText().toString()+"\""+ ","
+ "\"password\""+":" + "\"" + et2.getText().toString() + "\"" + "}";
tv.setText(temp);
}
};
}


뭐 다른 부분은

볼 것 없고


String temp = "{\"userid\""+":"+"\""+et.getText().toString()+"\""+ "," + "\"password\""+":" + "\"" + et2.getText().toString() + "\"" + "}";


여기만 보면 되겠죠?


위에서 말했듯이 그냥

그대로! 똑같이~ 만들어서

보내주면 됩니다


{"key":"value","key":"value"}

이렇게 보내야 되는데

key값은 이미 알고 있으니


{"userid":"value","password":"value"}

이렇게 되는거고


value값에는 EditText에서 적어준값을

뽑아내서 넣어주면 됩니다


복붙해서 써봐도 되나

그래도 잠깐 봐야되는 부분은

"(쌍따옴표)를 문자열로 인식시키기 위해서

쌍따옴표 앞에 \붙인다는 것을 확인해주세요!


한번 결과값을 보겠습니다


JSON 형태로 잘 나온것을

확인 할 수 있습니다.


잘 나왔다는 것은

temp값 그대로

서버에 보내도 이상없다는

말이 됩니다



2. 첫번째 연습에서

Object형태를 억지로

만들어서 보내는것을

해봤으니 이번에는

Array로 해보도록

하겠습니다


위에서 예를 들었던

[{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}]

이렇게 한번 만들어 볼까요?


xml은 건드릴게 없을거 같네요

대충 hint만 바꾸겠습니다


이런식으로 바꿔놓고

추가 버튼을 누를때마다


데이터값을 json형태로

늘려나가보겠습니다.


첫번째 클릭 : 

[{"name":"minsu", "gender":"male"}]


두번째 클릭 :

[{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}]


세번째 클릭 :

[{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}, {"name":"minju","gender":"female"}]


이런식으로 나타내주면 되겠죠?



음..

사실 실제로는

데이터가 몇개 일지 모를때

List형태로 보관하다가

for문써서 쫙 보내는 형태가

될텐데  


대충 이런식으로 처리해서

보낼 수 있다는것을

보여드리겠습니다.


public class MainActivity extends AppCompatActivity
{

EditText et;
EditText et2;
Button btn;
TextView tv;
StringBuffer sb = new StringBuffer();

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

et = (EditText)findViewById(R.id.et);
et2 = (EditText)findViewById(R.id.et2);
btn = (Button)findViewById(R.id.btn);
tv = (TextView)findViewById(R.id.tv);

btn.setOnClickListener(myClickListener);
}

View.OnClickListener myClickListener = new View.OnClickListener()
{
@Override
public void onClick(View v)
{
String startJson = "[";
String endJson ="]";

if(!sb.toString().equals(""))
{
sb.append(",");
}
String temp = "{\"name\""+":"+"\""+et.getText().toString()+"\""+ ","
+ "\"gender\""+":" + "\"" + et2.getText().toString() + "\"" + "}";
sb.append(temp);
tv.setText(startJson+sb+endJson);
}
};
}


음 코드를 간단하게

보겠습니다.


일단 우리가

[{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}]


요형태로 만들어야 되는데

거슬리는 부분이

[ ] 이놈과 , 쉼표 이거잖아요


나머지는 똑같이 { } 반복이므로

신경 안써도 되고


위 코드를 보면 그래서

StringBuffer를 한번 써봤습니다


tv.setText(startJson+sb+endJson);


startJson : [

여는 대괄호와


endJson : ]

닫는 대괄호는


항상 처음과 끝에 붙여줍니다


그리고 그 사이에

{"name":"minsu", "gender":"male"}, {"name":"sujin","gender":"female"}

이걸 넣으면 되겠죠

근데 여기서 ,(쉼표) 얘가 속을 썩입니다


근데 생각해보면 처음 추가할때만 제외하면

두번째 부터는 항상 앞에 ,(쉼표)만 붙여주면 되잖아요?


그래서 조건문을 하나 달아서

StringBuffer의 값이 없을때

즉 처음 추가할때는

,(쉼표)를 안붙이고

그 다음부터는 무조건

앞에 ,(쉼표)를 붙인다는 것을

써줬습니다


if(!sb.toString().equals("")) { sb.append(","); }

이 부분이겠죠


이런식으로 어떤 형태이든지

우리가 강제로 만들어줘버리면

보내는데는 아무 어려움없이

보낼 수 있습니다.


리스트나 배열이나

count를 세든 size를 쓰든해서

위와같이 걸리는 부분을

처리해주면서 JSON 형태

만들어주면 됩니다


저는 처음 쓸때부터

형태를 계속 만들어서 그런지

익숙해져서 이 방법이 편한것 같습니다


결과를 보면 순서대로

이렇게 나타나게 됩니다.


(한명 추가)



(두명 추가)


(세명 추가)


잘 나왔죠?


실제로는 위와 같은

형태로만 오는 것이 아니라


복잡하게

JSONObject와 JSONArray를

혼합해서 어지럽게 보내야되는

경우도 있는데 

당황하지 마시고


천천히

어느 부분이 반복되는지

처음과 끝을 구분해 나가면서

만들어 나가면 잘 해결할 수 있습니다


이번글 하나에서 JSON 데이터를

주고 받는 부분 다 해보려고 했는데

은근히 길어진 것 같아서

받아서 파싱하는 부분은

다음글에서 써보도록 하겠습니다.


두번째 예제 실행시키는 영상을

밑에 붙이면서 끝내도록 하겠습니다