๋กœ์ผ“๐Ÿพ
article thumbnail
๋ฐ˜์‘ํ˜•

ajax ์‚ฌ์šฉํ•˜๋˜ ์ค‘ ํ•œ๊ฐ€์ง€ ์˜๋ฌธ์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. ์™œ JSON.stringify๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋ฉด ์™œ ์Šคํ”„๋ง @RequestBody์—์„œ ๋ฐ›์งˆ ๋ชปํ•˜๋Š”์ง€ ๋ง์ž…๋‹ˆ๋‹ค. 

 

๊ทธ๋ž˜์„œ data : {test : "test"} ์™€ data : JSON.stringify์˜ ํƒ€์ž…๋“ค์„ ์ฝ˜์†”๋กœ ์ฐ์–ด๋ณธ ๊ฒฐ๊ณผ ์ „์ž๋Š” object์ด๊ณ  ํ›„์ž๋Š” string์ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์•„ํ•˜! ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ํ”ํžˆ ๋งํ•˜๋Š” json๊ณผ js์—์„œ ์‚ฌ์šฉํ•˜๋Š” javacscript Object๋Š” ๋‹ค๋ฅธ๊ฑฐ๊ตฌ๋‚˜! ๊ทธ๋ž˜์„œ ์ด๊ฑฐ์— ๋Œ€ํ•ด ๊ธ€์„ ์ฐพ์•„๋ณธ ํ›„ ์ •๋ง ์ž˜ ์„ค๋ช…ํ•ด์ฃผ์‹  ๊ธ€์ด ์žˆ์–ด์„œ ๊ฐ€์ ธ์™€๋ดค์Šต๋‹ˆ๋‹ค.

 


์ด๊ธ€์€ yongseong.log ๋‹˜์˜ ๊ธ€์ž…๋‹ˆ๋‹ค.

 

 

[๊ฐœ๋ฐœ์ƒ์‹] JSON๊ณผ JavaScript Object์˜ ์ฐจ์ด์ 

์•ˆ๋…•ํ•˜์„ธ์š”. ๊น€์šฉ์„ฑ์ž…๋‹ˆ๋‹ค.์ •๋ง ๋น„์Šทํ•˜๊ฒŒ ์ƒ๊ฒจ๋จน์€ ๋…€์„๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ํ”ํžˆ๋“ค ์‚ฌ์šฉํ•˜๋Š” JSON(JavaScript Object Notation)๊ณผ JavaScript Object์ธ๋ฐ์š”. ์ด ๋‘˜ ๊ฐ„์—๋Š” ์–ด๋–ค ์ฐจ์ด์ ์ด ์žˆ์„๊นŒ์š”?

velog.io

 

์ •๋ง ๋น„์Šทํ•˜๊ฒŒ ์ƒ๊ฒจ๋จน์€ ๋…€์„๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.
๋ฐ”๋กœ ํ”ํžˆ๋“ค ์‚ฌ์šฉํ•˜๋Š” JSON(JavaScript Object Notation)๊ณผ JavaScript Object์ธ๋ฐ์š”. ์‚ฌ์‹ค ๋‘˜์€ ์•„์ฃผ ์œ ์‚ฌํ•œ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ์— ๊ฐ™์€ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ์ข…์ข… ์žˆ์Šต๋‹ˆ๋‹ค. (์ € ์—ญ์‹œ ๊ทธ๋žฌ์Šต๋‹ˆ๋‹ค. ๐Ÿค” )

์˜ค๋Š˜์€ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด ๋‘˜์˜ ์ฐจ์ด๋ฅผ ์„ค๋ช…ํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ฐจ์ด์ 

JS Object๋Š” JS Engine ๋ฉ”๋ชจ๋ฆฌ ์•ˆ์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์ด๊ณ , JSON์€ ๊ฐ์ฒด์˜ ๋‚ด์šฉ์„ ๊ธฐ์ˆ ํ•˜๊ธฐ ์œ„ํ•œ text ํŒŒ์ผ์ด๋ผ๋Š” ์ ์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค. JSON์€ "ํŒŒ์ผ"์ด๋ฏ€๋กœ ํ™•์žฅ์ž ๋ช…์ด .JSON์ธ ํŒŒ์ผ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

 

์ด ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ œ๊ฐ€ ๋งํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์€ JS Object๋กœ HTTP ํ†ต์‹ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, JSON์œผ๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ HTTP ํ†ต์‹ ์„ ํ•  ๋•Œ์—๋Š” JS Object๊ฐ€ ์•„๋‹Œ JSON์œผ๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ฒƒ์ด๊ธฐ ๋–„๋ฌธ์— ํ”„๋ก ํŠธ์—”๋“œ์—์„œ JSON ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” JS Object๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ์ด๊ณ , ๋˜ํ•œ ๋ฐฑ์—”๋“œ์— JSON ์–‘์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋„ ๋ฉ”์†Œ๋“œ๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ์ด์ฃ .

 

  • JSON์„ JS Object๋กœ ํŒŒ์‹ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ๋ฉ”์†Œ๋“œ๊ฐ€ JSON.parse() ๋ฉ”์†Œ๋“œ๋ผ๋Š” ๊ฒƒ์ด๊ตฌ์š”.
  • JS Object๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ์ด JSON.stringify() ๋ฉ”์†Œ๋“œ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

๋ฌผ๋ก  JSON ์ด๋ผ๋Š” ๋…€์„์˜ ์ด๋ฆ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด, ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ• ์ž์ฒด๋Š” JS Object๋กœ๋ถ€ํ„ฐ ์ฐฉ์•ˆ์„ ํ•œ ๊ฒƒ์ด ๋งž์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ํ•œ๋ฒˆ ์‚ดํŽด๋ณผ๊นŒ์š”?

 

//compare.js

const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`;

const obj = {data:[{name:'yongseong',info:['student','27']}]};

 

str์ด๋ผ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น ๋œ ๊ฒƒ์€ JSON ํ˜•ํƒœ์ด๊ณ , obj๋ผ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น ๋œ ๊ฒƒ์€ JavaScript object ํ˜•ํƒœ์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ์ฐจ์ด์ ์ด ๋ณด์ด์‹œ๋‚˜์š”?

 

  • JSON์—์„œ๋Š” ๋ชจ๋“  ํ‚ค ๋ฅผ ๋”ฐ์˜ดํ‘œ๋กœ ๋ฌถ์–ด์•ผํ•˜์ง€๋งŒ JavaScript object์—์„œ๋Š” ์ด๊ฒƒ์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • JSON์˜ type ํ˜•ํƒœ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ string์ž…๋‹ˆ๋‹ค.
  • JSON์€ ํ•จ์ˆ˜๋ฅผ ๊ฐ’์œผ๋กœ ํ• ๋‹นํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

(์ถœ์ฒ˜: https://developer.mozilla.org/)

JSON.parse()

JSON.parse()๋Š” JSON์„ JavaScript Object๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค.

 

const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`; 
obj=JSON.parse(str) 
console.log("My name is",str.data[0].name) // Uncaught TypeError: Cannot read property '0' of undefined 
console.log("My name is",obj.data[0].name) // My name is yongseong

 

์ด๋ ‡๊ฒŒ JSON.parse() ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด์„œ JSON์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(์ถœ์ฒ˜: https://developer.mozilla.org/)

JSON.stringify()

JSON.stringify()๋กœ๋Š” JSON.parse() ์™€ ๋ฐ˜๋Œ€์˜ ๊ณผ์ •์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

const obj = {data:[{name:'yongseong',info:['student','27']}]}; 
str=JSON.stringify(obj) 
console.log(str) //{"data":[{"name":"yongseong","info":["student","27"]}]} 
console.log(typeof(str)) //string

(์ถœ์ฒ˜: https://developer.mozilla.org/)

๋งˆ๋ฌด๋ฆฌ

์ด์ƒ์œผ๋กœ JSON๊ณผ Object์˜ ์ฐจ์ด ๋ฐ ๋ณ€ํ™˜ ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.
JSON๊ณผ JS Object๋Š” ์—„์—ฐํžˆ ๋งํ•˜๋ฉด ๋‹ค๋ฅธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ์ž˜ ์•Œ์•„๋‘์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์š”.
๋˜ํ•œ ์ •ํ™•ํ•œ ์˜๋ฏธ๋ฅผ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ํ˜ผ์šฉํ•ด์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค:)

๋ฐ˜์‘ํ˜•
profile on loading

Loading...