[크롤링] 데이터 수집을 위한 크롤링 3편 : JSON, 더 자세한 설명

 데이터 수집을 위한 크롤링 연속 포스팅 

[크롤링] 데이터 수집을 위한 크롤링 1편 : 크롤링이란 무엇인가?

[크롤링] 데이터 수집을 위한 크롤링 2편 : 크롤링에 필요한 필수 요소들

[크롤링] 데이터 수집을 위한 크롤링 3편 : JSON, 더 자세한 설명

[크롤링] 데이터 수집을 위한 크롤링 4편 : Java의 설치와 간단한 Jsoup 예제

[크롤링] 데이터 수집을 위한 크롤링 5편 : Yahoo 파이낸스를 이용한 환율 크롤링

1. 크롤링이란?

 이번 글에서는 JSON과 Javascript단에서 어떻게 사용하는지를 자세히 설명하려고 한다. 또한 앞서 모든 예제는 자바스크립트로 구성될 예정이므로, 잘 이해가 안된다면 웹 브라우저에서 F12(개발자모드)를 열어 예제 코드를 입력해보자.

  우선 JSON은 Javascript와 ECMA에 토대를 두고 있지만, 아무래도 웹의 데이터 통신에 사용되는 경량 형식이므로 대부분의 언어에서 JSON을 처리하는 라이브러리를 지원한다. 따라서 대충만 알고 자신이 필요한 언어 라이브러리 또는 구글에 JSON + 언어명을 치면 정말 다량의 정보가 쏟아져 나올 것이다.  

 JSON은 Javascript Object Notation의 약어로, 자바스크립트상에서 오브젝트를 표현하는 형식이다. 우선 형식을 제대로 이해하기 앞서 자바스크립트의 변수에 관련해서 더 상세히 알아보자. 

 자바스크립트는 대부분의 학부 과정 혹은 그전에 배웠던 C, C++, Java등과 달리 Dynamic Typing을 지원한다는 것을 잊으면 안된다.  

아래와 같은 코드를 보자.

  (1) 자바스크립트의 동적 형식

이 코드는 나이를 체크해서 18세 이하이면 '오류 메시지'를, 아니면 나이 값을 담는 코드이다.

var ageDataForOutput = '';

function login(age){
   if(!isNaN(age) && age > 18){
   	ageDataForOutput = age;
   }else{
        ageDataForOutput = '올바르지 않거나, 나이가 너무 어립니다.';
   }
}

 여기서 알 수 있는 것은 변수 ageDataForOutput를 타입 var(variable) 및 ''(공백문자) 정의하였다. (대부분의 초보자들은 변수 타입을 자신이 배운언어인 int, char등을 써서 syntax오류를 발생시킨다.)

 아무튼 var 타입과 5, 7번째 문장에서 알 수 있듯 자바스크립트의 변수타입은 미리 정해지지 않는다(없는게 아니다). 즉, 값이 대입되는 순간 그 타입과 값이 정해지게 된다.

   (2) 자바스크립트의 변수 타입

 이제 자바스크립트의 동적 타이핑에 대한 설명을 했으니, 어떤 타입들이 존재하는지에 대해서 알아볼 필요가 있다. 자바스크립트에는 크게 6가지 타입이 있다.(ECMA6이전, 이후에는 1가지 타입이 추가되었음)

1. 기본 자료형 (Primitive data type)
   1. boolean 불린값(참, 거짓)
   2. null (null값)
   3. undefined (값이 할당되지 않은 변수가 가지는 값)
   4. number 숫자(정수, 소수 모두 포함)
   5. string  문자열(문자열, 1개의 문자도 문자열로 처리)
   6. symbol(ECMA6에서 추가됨)
      
      
 복합 자료형 (Composite data type)
1. object 복합 자료형(모두 Object 취급)
   
   
   

 1) boolean은 다들 잘 알고 있듯 true, false이다.

 2) null의 경우 object 타입 변수는 할당되었지만 값이 빈 경우를 뜻한다.

 3) undefined은 선언만 되었을 뿐, 그 값이 할당되지 않은 것을 의미한다.

  조금 모호할 수 있는데 null은 상수이고, 초기화에 사용한다고 생각하자. undefined의 경우 동적 타이핑으로 인해 생기는 타입으로, var a;와 같이 선언만 한 경우 undefined로 처리된다.

 예를 들어, var a = null, b; 라고한다면, a의 타입은 "object"이며 값은 null이다. 반면 b의 타입은 "undefined"이며, 값 또한 undefined이다.

var a = null, b;

console.log(typeof a, a, typeof b, b);

 4) number는 영단어 그대로 숫자를 저장하는 타입이다. 다만, 실수 정수 상관없이 모두 담을 수 있다.

var a = 5.4;
console.log(typeof a, a);
a = 3;
console.log(typeof a, a);

5) string은 문자열으로, 특이하게 다른언어가 1개의 문자로 이루어진 것을 '문자'타입으로 구분하는것과 달리, 길이와 관계 없이 모두 문자열로 처리한다.

또한 홑따옴표와 곁따옴표를 구분하지 않고 괄호처럼 가장 가까이 페어만 맞아 준다면 혼용해서 쓸 수 있다.

console.log(typeof 'a', typeof 'abc', typeof "a", typeof "abc");
console.log(typeof "'a'", typeof '"abc"');

6) object, 자바스크립트에서 기초 자료형을 제외한 모든 복합 자료형을 Object로 구분한다.

 이번 포스팅에서 다루는 JSON, Date, 배열 등등 모두 Object 타입(엄밀히 말해 Key-Value페어의 Collection)이다.

 따라서 이러한 오브젝트들의 타입을 찍어보면 모두 "object"로 나오며, 우리가 기존에 알고 있던 것처럼 배열과 오브젝트를 구분하기 위해서는 Array.isArray(a)와 같이 Array 오브젝트의 멤버함수를 이용해야 한다.

 또한 모든 object는 key-value이다. 또한 키 정렬(언어별로 Hashmap, dictionary등으로 구현된 것과 같다고 보면 된다)이 되므로, 향후에 데이터 탐색등을 이용할때 편리하다.

   (3) 결국 JSON이란?

 사실상 Javascript에서는 object 타입이지만, 웹을 통해 데이터 전송에 쓰이게 되면 Javascript Object Notation으로 불린다. 또한 데이터 전송시에는 JSON을 문자열로 전달해야하므로 이를 문자열로 변경해주는 기능 모든 JSON 라이브러리에 포함된다.(이는 Javascript도 마찬가지)

var obj = { name : '123', age : 3 };
console.log(obj);

var strObj = JSON.stringify(obj);
console.log(strObj);

var parsedObj = JSON.parse(strObj);
console.log(parsedObj);

    (4) JSON 알아보기 

 이까지 알아보았다면, 이제 JSON은 자바스크립트의 단순한 object 타입이라는 것을 알게 되었을 것이다. 크게 웹 데이터 전송용 타입이라고 두려워할 필요도, 어려울 것도 없다.  

 조금 더 예제를 들어서 설명해보자.

 1) JSON 형식 (object라고 혼용해서 표현할 예정)

  object는 Key와 Value로 구성된 데이터 집합이다. Key는 Value를 가르키는 값으로 데이터 베이스상 Primary Key와 같이 object내에서 Value를 구분하는 유일한 값이되어야 한다.

 object에서 Key, Value 페어는 콜론(:)으로 구분하며, K-V 페어들은 콤마(,)로 구분한다. 또한 Key값은 항상 문자열 타입(string)으로 표기하지 않아도 알아서 인식하므로 편한 방법을 사용하면 된다.

var obj1 = { key : '우리집 열쇠', pwd : '486' };
var obj2 = { 'key' : '너희집 열쇠', 'pwd' : 48.6 };

  value에는 어느 값이든 넣을 수 있다. 따라서 계층적으로 Object안에 Object를 넣을 수 있다.

 2) 조금더 복잡한 JSON 예제

 이전 포스트에 썼던 것과 같이 http://coinlist.xyz/api/v1/top50 에서 반환되는 값을 가지고 알아보자.

 위의 API에서는 { "success" : true, "data" : [] } 의 형태의 JSON 1개를 응답한다. 여기서 success는 성공 여부를 담고 있는 boolean 타입,  data는 object(배열)을 담고 있다.

 그렇다면 data를 키로하는 object(배열)은 { "name", "code", "type", "supply", "h24Volue", "change", "price" }의 JSON을 배열 형태로 담고 있다.

따라서 위 API에서 반환되는 데이터 형식은 아래와 같다.

// 전체 응답 JSON 하나
{
  // 전체 응답 JSON의 KEY는 success, data
  // success는 boolean 타입
  "success" : true,
  // data는 object(array) 타입
  "data" : [
    // data의 value인 object는 아래의 object를 연속으로 가지는 배열이다.
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }, 
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }, 
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }, 
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }, 
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }, 
    { "name", "code", "type", "supply", "h24Volue", "change", "price" }
  ]
}

 사실 JSON이 굉장히 포맷에 유연하기 때문에 복잡해질 수도 있지만, 데이터를 전송해야하는 API 특성상 일정한 틀에 맞추어 데이터를 전달해준다.

 이러한 틀은 대부분의 API를 서비스하는 업체에서 개발자 정보등의 항목으로 설명하고 있으므로 크게 걱정하지 않아도 된다.

  (5) JSON의 기타 활용

1) 키값 찾기

 object의 키값을 찾기 위해서는 Object.keys 함수를 호출하여주면 된다. 이때 반환되는 타입은 object(배열)이다.

var obj = { 'key' : '우리집 열쇠', pwd : '486' };
var keys = Object.keys(obj);
console.log(typeof keys, keys);

  2) Key를 가지고 Value를 참조하는 방법

 이미 기존에 정의된 key라면 멤버 변수처럼 obj.key로 참조하면 되고, 아니라면 obj['key']형태로 참조해도 된다. 물론 없는 값을 참조하는 경우 undefined가 리턴된다.

var obj = { 'key' : '우리집 열쇠', pwd : '486' };
console.log(obj.key, obj['key']);

 

  3) 데이터 추가 및 삭제

 추가는 참조하듯이 자연스럽게 lvalue를 써주고 rvalue에 값을 넣으면 된다. 삭제의 경우 delete에 lvalue를 주면 삭제된다. 하지만 if(obj.key)와 데이터 존재를 확인하므로 ''(빈 문자열) 또는 undefined으로 값을 갱신해도 무방하다.

var obj = { 'key' : '우리집 열쇠', pwd : '486' }

// 추가
obj['nKey'] = '1234';

//삭제
delete obj['key'];

//갱신
obj['key'] = ''; //갱신같은 삭제
obj['key'] = undefined;

  

  이까지가 JSON에 대한 기본 지식이며, 추가적인 내용은 실제 사용하다가 불편한 점이 있다면 구글링해보는 것이 좋다. 다음 포스팅부터는 Jsoup으로 크롤링 예제를 보이면서 진행하도록 하자.  

 

  데이터 수집을 위한 크롤링 연속 포스팅 

[크롤링] 데이터 수집을 위한 크롤링 1편 : 크롤링이란 무엇인가?

[크롤링] 데이터 수집을 위한 크롤링 2편 : 크롤링에 필요한 필수 요소들

[크롤링] 데이터 수집을 위한 크롤링 3편 : JSON, 더 자세한 설명

[크롤링] 데이터 수집을 위한 크롤링 4편 : Java의 설치와 간단한 Jsoup 예제

[크롤링] 데이터 수집을 위한 크롤링 5편 : Yahoo 파이낸스를 이용한 환율 크롤링