๐Ÿ“’Javascript JSON :)

zooyahoยท2022๋…„ 4์›” 25์ผ
0

study with me

๋ชฉ๋ก ๋ณด๊ธฐ
13/19
post-thumbnail

JSON (JavaScript Object Notation)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•

- npm init -y

: package.jsonํŒŒ์ผ์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•จ

- JSON ๋ฌธ๋ฒ•

  • string: ""๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•จ!!!
    -> ๊ฐ์ฒด์˜ ์†์„ฑ๋ช…์— ""์„ ์‚ฌ์šฉํ•จ!!!
  • undefined๋Š” ๋ฐ์ดํ„ฐ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ!!!
  • .jsonํŒŒ์ผ์€ ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋œ๋‹ค!!!

- import๋กœ ๊ฐ€์ ธ์˜จ .json์˜ ํ™•์žฅ์ž๋Š” ์ƒ๋žตํ•  ์ˆ˜ ์—†์Œ

ex)
import myData from './myData.json'
: .jsonํ™•์žฅ์ž ํ•„์ˆ˜ ์ž‘์„ฑ

- .jsonํŒŒ์ผ์€ ํ•˜๋‚˜์˜ ๋ฌธ์ž ๋ฐ์ดํ„ฐ์ž„!!

๐Ÿ”ต JSON์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ „์—ญ๊ฐ์ฒด์ž„

๐Ÿ‘พ
ex) const str = JSON.stringify(user)
const user = {...}
console.log(typeof str) // string

  • JSON.stringify(๋ฐ์ดํ„ฐ): ๋ฌธ์ž๋ฐ์ดํ„ฐํ™” ์‹œํ‚ด
    --> jsonํ™” ์‹œํ‚ด(ํ•˜๋‚˜์˜ ๋ฉ”๋ชจ๋ฆฌ๋งŒ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ž๋ฐ์ดํ„ฐ๋กœ ๊ฒฝ๋Ÿ‰ํ™”๋จ.)
    --> js์—์„œ ์ƒ์„ฑํ•œ ๊ฐ์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ํ•˜๋‚˜์˜ ๋ฌธ์ž๋ฐ์ดํ„ฐ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ localStorage์— ์ €์žฅํ•  ๋•Œ ์‚ฌ์šฉํ•จ!!

  • JSON.parse(๋ฐ์ดํ„ฐ): ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„์„ํ•˜์—ฌ ์›๋ž˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋ฐ˜ํ™˜์‹œํ‚ด
    --> ์‹ค์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ดํ„ฐ์ฒ˜๋Ÿผ ๋ณ€๊ฒฝ์‹œํ‚ด

๐Ÿ”ต local storage mdn

  • Window.localStorage
    : Document ์ถœ์ฒ˜์˜ Storage๊ฐ์ฒด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Œ
    : localStorage์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋Š” ํ•ด๋‹น ๋„๋ฉ”์ธ์— ์ข…์†๋˜์–ด ์ €์žฅ์ด๋จ
    : sessionStorage์— ๋น„ํ•ด ๋ฐ์ดํ„ฐ๊ฐ€ ๋งŒ๋ฃŒ๋˜์ง€ ์•Š์Œ
    (= ์ฆ‰, ํŽ˜์ด์ง€๋ฅผ ๋‹ซ์„ ๋•Œ ์‚ฌ๋ผ์ง€์ง€ ์•Š์Œ->๋ฐ˜์˜๊ตฌ)
    : ํ•˜๋‚˜์˜ ์‚ฌ์ดํŠธ์— ์ข…์†์ด ๋จ

  • localStorage.setItem('Key', 'Value')
    : ๋ฌธ์ž๋ฐ์ดํ„ฐ๋กœ ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ๊ณ ํ•จ
    : ๊ฐ์ฒด๋Š” JSON.stringify(๋ฐ์ดํ„ฐ)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์ž๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๋จ
    : localStorage์—์„œ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ์ดํ„ฐ๋Š” JSON.parse(๋ฐ์ดํ„ฐ)๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋จ

  • localStorage.getItem('Key')
    : ์ฝ์–ด์˜ค๋Š” ๋ฐฉ๋ฒ•, key๊ฐ’๋งŒ ์ธ์ˆ˜๋กœ ์ž‘์„ฑ

  • localStorage.removeItem('Key')
    : ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•, key๊ฐ’๋งŒ ์ธ์ˆ˜๋กœ ์ž‘์„ฑ

  • localStorage์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ
    ๐Ÿ‘พ
    ex)
    const user = {..., age = 12, ...} // ๊ฐ์ฒดํ˜•
    const str = localStorage.getItem('user') //๋ฌธ์ž
    const obj = JSON.parse(str) // ๊ฐ์ฒดํ˜•
    obj.age = 22 // ๊ฐ’๋ณ€๊ฒฝ
    console.log(obj)
    localStorage.setItem('user',JSON.stringify(obj))

๐Ÿ‘‰๐Ÿป ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š”๋ฒ•์ด ๋„ˆ๋ฌด ์›์‹œ์ ์ž„
๐Ÿ‘‰๐Ÿป lodash ํŒจํ‚ค์ง€์˜ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•ด์„œ localStorage๋ฅผ ํ•˜๋‚˜์˜ DB์ฒ˜๋Ÿผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Œ!!

  • localStorage๋ฅผ DB์ฒ˜๋Ÿผ ๊ด€๋ฆฌ: lowdb ํŒจํ‚ค์ง€
    : lodash๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋˜์–ด์žˆ์Œ

    lowdb: https://github.com/typicode/lowdb

profile
์ฆ๊ฒ๊ฒŒ ๊ฐœ๋ฐœํ•˜์ž ์ฅฌ์•ผํ˜ธ๐Ÿ‘ป

0๊ฐœ์˜ ๋Œ“๊ธ€