<div id="readability-page-1" class="page"><div id="dkContent" role="main">

					

					<p>
						<h2><span>네로개발일기</span></h2>
					</p>

					                
                    
						


						
							
							

							<div><h3 data-ke-size="size23"><b>JSON.parse()와&nbsp;JSON.stringify()</b></h3>
<p data-ke-size="size16">- 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법</p>
<h4 data-ke-size="size20"><b>JSON이란?</b></h4>
<p data-ke-size="size16">JSON은 Javascript Object Notation의 약자로, 데이터를 문자열의 형태로 나타내기 위해서 사용된다. 이름이 보여주듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 언어에서 지원하는 데이터포맷이다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다.</p>
<p data-ke-size="size16">JSON으로는 객체, 배열, 숫자, 문자열, 불린(boolean), 널(null)과 같은 다양한 데이터를 나타낼 수 있다.</p>
<h4 data-ke-size="size20"><b>JSON 내장 객체</b></h4>
<p data-ke-size="size16">자바스크립트에서는 JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON 이라는 객체를 내장하고 있다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다.</p>
<p data-ke-size="size16">JSON 내장 객체는 Javascript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다.</p>
<p data-ke-size="size16">- JSON.parse()</p>
<p data-ke-size="size16">- JSON.stringify()</p>
<h4 data-ke-size="size20"><b>JSON.parse(): JSON 문자열을 Javascript 객체로 변환</b></h4>
<p data-ke-size="size16">JSON 문자열을 Javascript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용한다. parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 javascript 객체를 반환한다.</p>
<pre id="code_1667724318678" data-ke-language="javascript" data-ke-type="codeblock"><code>const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;</code></pre>
<p data-ke-size="size16">JSON.parse()<span><span>&nbsp;</span>메서드에<span>&nbsp;</span></span>str<span>을 인자로 넘겨 호출해 결과값을<span>&nbsp;</span></span>obj<span>라는 변수에 저장한다.</span></p>
<pre id="code_1667724373974" data-ke-language="javascript" data-ke-type="codeblock"><code>const obj = JSON.parse(str);</code></pre>
<p data-ke-size="size16">obj 에 저장된 값을 콘솔에 출력해보면 JSON 문자열 형태의 데이터가 Javascript 객체의 형태로 변환되어 출력되는 것을 확인하자.</p>
<pre id="code_1667724520890" data-ke-language="javascript" data-ke-type="codeblock"><code>console.log(obj);

{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}</code></pre>
<p data-ke-size="size16">JSON 문자열에서는 key 를 나타낼 때 반드시 쌍따옴표로 감싸주어야 하지만, Javascript 객체에서는 쌍따옴표를 꼭 사용할 필요가 없다.&nbsp;</p>
<p data-ke-size="size16">Javascript로 변환된 데이터는 .이나 [] 기호를 활용하여 각 속성에 접근할 수 있다.</p>
<pre id="code_1667724598024" data-ke-language="javascript" data-ke-type="codeblock"><code>&gt; obj.name
&lt; '홍길동'
&gt; obj.age
&lt; 25
&gt; obj.married
&lt; false
&gt; obj.family
&lt; {father: '홍판서', mother: '춘섬'}
&gt; obj.family.mother
&lt; '춘섬'
&gt; obj.hobbies
&lt; ['독서', '도술']
&gt; obj.hobbies[1]
&lt; '도술'
&gt; obj.jobs
&lt; null</code></pre>
<p data-ke-size="size16">외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 역직렬화(deserialization)이라고 한다. 클라이언트에서 JSON 포맷으로 데이터를 보내면 서버에서 우선 Javascript 객체로 변환 후, 데이터를 처리한다.</p>
<h4 data-ke-size="size20"><b>JSON.stringify(): Javascript 객체를 JSON 문자열로 변환</b></h4>
<p data-ke-size="size16">역으로 Javascript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용한다. stringify() 메서드는 Javascript 객체를 인자로 받고 JSON 문자열을 반환한다.</p>
<pre id="code_1667724740504" data-ke-language="javascript" data-ke-type="codeblock"><code>const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
}; // javascript 객체</code></pre>
<p data-ke-size="size16">JSON.stringify() 메서드에 obj 를 인자로 넘겨 호출해보자.&nbsp;</p>
<pre id="code_1667724811622" data-ke-language="javascript" data-ke-type="codeblock"><code>const str = JSON.stringify(obj);

console.log(str);
'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'</code></pre>
<p data-ke-size="size16">str에 저장된 값을 콘솔로 출력해보면 Javascript 객체의 형태인 데이터가 JSON 형식의 문자열로 변환되어 출력되는 것을 확인할 수 있다.</p>

<p data-ke-size="size16">stringify() 메서드의 3번째 인자로 들여쓰기 할 공백의 크기도 지정해줄 수 있다.</p>
<pre id="code_1667724886622" data-ke-language="javascript" data-ke-type="codeblock"><code>const str2 = JSON.stringify(obj, null, 2);
console.log(str2);

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}</code></pre>
<p data-ke-size="size16">당연하게도, JSON 형식의 문자열로 변환된 데이터는 더이상 . 이나 [] 기호를 사용하여 속성에 접근할 수 없다.</p>
<pre id="code_1667724930187" data-ke-language="javascript" data-ke-type="codeblock"><code>&gt; str.name
&lt; undefined</code></pre>
<p data-ke-size="size16">특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을 직렬화(serialization)이라고 한다.&nbsp;</p>

<p data-ke-size="size16"><span><b>&nbsp;출처&nbsp;</b></span></p>
<p data-ke-size="size16"><a href="https://www.daleseo.com/js-json/" target="_blank" rel="noopener">https://www.daleseo.com/js-json/</a></p>
<figure id="og_1667719536442" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="JSON.parse()와 JSON.stringify()" data-og-description="Engineering Blog by Dale Seo" data-og-host="www.daleseo.com" data-og-source-url="https://www.daleseo.com/js-json/" data-og-url="https://www.daleseo.com/js-json/" data-og-image="https://scrap.kakaocdn.net/dn/egfGYI/hyQtq7GgEl/kBYkLrkpLsNhUka24O3Gx0/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"><a href="https://www.daleseo.com/js-json/" target="_blank" rel="noopener" data-source-url="https://www.daleseo.com/js-json/">

<div>
<p data-ke-size="size16">JSON.parse()와 JSON.stringify()</p>
<p data-ke-size="size16">Engineering Blog by Dale Seo</p>
<p data-ke-size="size16">www.daleseo.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/egfGYI/hyQtq7GgEl/kBYkLrkpLsNhUka24O3Gx0/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"></figure>
</div>
							

							
								
							

							


						
					
                    
                

					

					

					

					

					

					
				</div></div>

개구린개구리

JSON.parse()와 JSON.stringify()
- 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법
JSON이란?
JSON은 Javascript Object Notation의 약자로, 데이터를 문자열의 형태로 나타내기 위해서 사용된다. 이름이 보여주듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 언어에서 지원하는 데이터포맷이다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다.
JSON으로는 객체, 배열, 숫자, 문자열, 불린(boolean), 널(null)과 같은 다양한 데이터를 나타낼 수 있다.
JSON 내장 객체
자바스크립트에서는 JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON 이라는 객체를 내장하고 있다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다.
JSON 내장 객체는 Javascript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다.
- JSON.parse()
- JSON.stringify()
JSON.parse(): JSON 문자열을 Javascript 객체로 변환
JSON 문자열을 Javascript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용한다. parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 javascript 객체를 반환한다.
const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;
JSON.parse() 메서드에 str을 인자로 넘겨 호출해 결과값을 obj라는 변수에 저장한다.
const obj = JSON.parse(str);
obj 에 저장된 값을 콘솔에 출력해보면 JSON 문자열 형태의 데이터가 Javascript 객체의 형태로 변환되어 출력되는 것을 확인하자.
console.log(obj);
{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}
JSON 문자열에서는 key 를 나타낼 때 반드시 쌍따옴표로 감싸주어야 하지만, Javascript 객체에서는 쌍따옴표를 꼭 사용할 필요가 없다. 
Javascript로 변환된 데이터는 .이나 [] 기호를 활용하여 각 속성에 접근할 수 있다.
> obj.name
< '홍길동'
> obj.age
< 25
> obj.married
< false
> obj.family
< {father: '홍판서', mother: '춘섬'}
> obj.family.mother
< '춘섬'
> obj.hobbies
< ['독서', '도술']
> obj.hobbies[1]
< '도술'
> obj.jobs
< null
외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 역직렬화(deserialization)이라고 한다. 클라이언트에서 JSON 포맷으로 데이터를 보내면 서버에서 우선 Javascript 객체로 변환 후, 데이터를 처리한다.
JSON.stringify(): Javascript 객체를 JSON 문자열로 변환
역으로 Javascript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용한다. stringify() 메서드는 Javascript 객체를 인자로 받고 JSON 문자열을 반환한다.
const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
}; // javascript 객체
JSON.stringify() 메서드에 obj 를 인자로 넘겨 호출해보자. 
const str = JSON.stringify(obj);
console.log(str);
'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'
str에 저장된 값을 콘솔로 출력해보면 Javascript 객체의 형태인 데이터가 JSON 형식의 문자열로 변환되어 출력되는 것을 확인할 수 있다.
 
stringify() 메서드의 3번째 인자로 들여쓰기 할 공백의 크기도 지정해줄 수 있다.
const str2 = JSON.stringify(obj, null, 2);
console.log(str2);
{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}
당연하게도, JSON 형식의 문자열로 변환된 데이터는 더이상 . 이나 [] 기호를 사용하여 속성에 접근할 수 없다.
> str.name
< undefined
특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을 직렬화(serialization)이라고 한다. 
 
 출처 
https://www.daleseo.com/js-json/

[Javascript] JSON.parse()와 JSON.stringify()

댓글