시베리안 허숙희의 자바스크립트 비기닝 24 (JSON 유틸)

자바스크립트

by e7e 2023. 6. 20. 12:10

Math, Date는 표준 내장(built-in) 객체당, 아주 자주 쓰는 JSON이라는

표준 내장(built-in)객체가 더 있는뎅, 사용법은 너무도 간단하여 아래 처럼

2개 메소드밖에 없당! ( 의외로 고민 1도 없이 에러가 나면 당연히 화를 낸당!)

    JSON.stringify(객체); // 객체를 문자열화(serialize)
    JSON.parse(문자열);  // 문자열을 객체화(deserialize)

객체를 문자열화하는 것을 멋진말로 시리얼라이즈(serialize)라 하고,

반대(문자열->객체)를 디시리얼라이즈(deserialize)라 한당! (무슨 의미, 왜 필요?)

초보자들에겐 실행결과만 성취감으로 남고, 개념이나 과정은 잔상조차 안 남으니,

특단의 말도 안되는 억지 무지막지 과장된 강제 뇌새김 표현이 필요하당!

당신의 키 크고(190이상, 당신은 175), 자상하고, 유머 넘치고, 교양있고, 매너 넘치는

절대 포기할 수 없는 HTML 프로그램의 신인 남친이 미국 출장 중에 생일이라서

한국에서 현대차 캐스퍼를 감동의 선물로 보내고 싶어 당신은 안달X10 이당!

실제차(객체)를 미국에 보내는 건 이만 저만 요래조래 귀찮은 일이 아니당!

천재인 당신은 아이디어 번쩍 캐스퍼를 다 분해해서 구조와 부품을 글로 욜씨미

적은 다음 그 구조화된 글을 남친에게 보낸당!.(인터넷상에서 이 일은 너무 쉽당)

당신을 이미 많이 닮아버려 천재가 된 남친은 당신의 글을 보고 부품제작후 구조대로

조립하여 캐스퍼를 맹글고 기뻐한당.(컴터세계에서 이일은 쉽고 빠르게 이루어진당)

다시 한줄 억지 요약 비유하면, 실체를 구조화된 문자열로 바꾸는 것이 시리얼라이즈,

전달받은 구조화된 문자열을 객체화 하는 거시 디시리얼라이즈당. (머지 쉽당!)

완벽한 비유는 아니지만, 당신 마음의 짐을 쪼메 덜어주는 데는 대략 충분할 거시당.

좀더 깊게 개념을 느끼고 싶다면, 대부분의 사용 패턴이 객체를 문자열화 해서 전송하고

전송 받은 문자열을 객체화해서 사용하는데, 이런 사용에는 어떤 어떤 장점이 있는가?

의 답변을 생각해 보는 것이다. (귀찬타면 괜찬탕, 시간은 당신 편이당!)

마리 기럭지가 기러졌당. 사용예를 보장 (너우무~~ 쉽당, 결과만 잘 체크하장)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
let myRoze = {
    name:"로제",
    age: 26,
    friend: ["제니","리사","지수"],
}
console.log("원 객체",myRoze);

// 문자열화(serialize)
let myRozeStr = JSON.stringify(myRoze);
console.log("stringify",myRozeStr);

// 문자열 다시 객체화(deserialize)
let myRozeObj = JSON.parse(myRozeStr);
console.log("parse",myRozeObj);
</script>

자주 만나는 고달픈 케이스(경우)를 한번 보장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
let myRoze = {
    name:"로제",
    age: 26,
    friend: ["제니","리사","지수"],
}

let myRozeObj = JSON.parse(myRoze);
console.log("parse",myRozeObj);
</script>

이미 객체인 걸 객체화 하려고 하면, 이미 밥통인데 밥통으로 만들려면 당근 에러!

Uncaught SyntaxError: "[object Object]" is not valid JSON

아래처럼 사용하는 경우는 거의 보기 어려운데, 문자열로 객체형식을 표현할 때, 속성명에

쌍따옴표(")를 사용하지 않으면 에러가 발생한당.(모르면 크게 황망할 수 있당. 디버깅을 위해 기억하장!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 속성명에 쌍따옴표를 안 쓴 케이스
let  objStr = "{'name':'로제','age':26,'songs':['gone','ground']}";
let  ckObj = JSON.parse(objStr)
</script>

SyntaxError: Expected property name or '}'

위의 내용은 아래 코드처럼 바깥쪽을 홑따옴표('), 안쪽을 쌍따옴표(")로 하면 해결된당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 속성명에 쌍따옴표를 안 쓴 케이스
let  objStr = '{"name":"로제","age":26,"songs":["gone","ground"]}';
let  ckObj = JSON.parse(objStr)
console.log("ckObj 문자열: ",ckObj);
</script>

테스트로 자주 부닥치는 아래와 같은 코드는 어디에 문제가 있는지 한번 직접 찾아보장!

(개발자는 누니 좋아야 하고, 누니 좋다면 당신은 훌륭한 무기를 갖추었당!);

문제가 1개밖에 없을 거라고 지레 짐작했다면, 그건 큰 오산이당, 힌트: 2곳이당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
let  objStr = `[
    {"name":"로제","age":26,"special":"음색"},
    {"name":"제니","age":26,"special":"이슈"},
    {"name":"자스","age":26,"special":"JSON"}
    {"name":"리사","age":26,"special":"댄스"},
    {"name":"지수","age":26,"special":"꽃"},
]`;

let  ckObj;
try {             // 괘니 try catch도 한번 써봄!
    ckObj = JSON.parse(objStr);
} catch(error){
    throw new Error(`요기 에러용 ${error}`);
}

alert("요건 뜰가용 안뜰가용?");
</script>

웹 프로그래밍에서 전송 데이터 타입으로 XML을 누르고 거의 표준처럼 사용되는 데이터 타입 JSON !!

오해가 아주 많은 부분은 클라이언트와 서버, 서버와 서버가 실제로 주고받는 데이터 타입은 JSON객체가

아니고, 문자열이며 그 문자열의 형식이 JSON형식임을 기억해야 한당!

(의미가 의미 심장하고, 의미 있게 이미 뇌에 와 있거나, 쫌 전에 왔다면 훌륭하당!)

아래 코드는 JSON.stringify를 문자열, 숫자,불린등에 적용하여 본 코드다.(꼬옥 참고하장)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    alert(JSON.stringify("로제"));
    alert(JSON.stringify(272));
    alert(JSON.stringify(true));
    alert(JSON.stringify(NaN));
    alert(JSON.stringify(undefined));
    alert(JSON.stringify(null));
</script>

프로그램을 공부하다 보면 유틸리티 변환 라이브러리들을 꽤나 많이 만나게 된당~~

인간 삶에 빗대면 요랬다/조랬다, 엎었다/뒤집었다를 반복하는 왕따 당할 변덕장이인데~~

컴퓨터 세계에선 없으면 불편함에 쩔어버릴것이당.

변덕장이는 나쁘다는 편견을 버리고 당신 옆 가까이에 변덕장이 친구를 하나 맹글어 보장!

시간이 흐른 뒤 그 친구 덕분에 당신 삶이 훨씬 알차고 풍부해졌음을 분명 알게 될 거시당!

https://www.youtube.com/watch?v=oTr5VmXGnLE

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 26 (리팩토링...) (0)	2023.06.21
시베리안 허숙희의 자바스크립트 비기닝 25 (LocalStorage...) (0)	2023.06.21
시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..) (0)	2023.06.19
시베리안 허숙희의 자바스크립트 비기닝 22 ( sort 확장...) (1)	2023.06.18
시베리안 허숙희의 자바스크립트 비기닝 21 (sort 직접 맹글깅) (1)	2023.06.16