강의 | Chap 19 JS 데이터 실습
#3. JSON
JSON: 키/속성 - 값 - 쌍 (key / attribute - value pairs and array data types)으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷.
https://ko.wikipedia.org/wiki/JSON
JSON 알아둘 점
1) string에 ""만 사용 가능함. (아래 사진 참고)
2) JSON 포맷에서는 키/속성을 따옴표로 묶어두어야 한다. (다른 것들도 그러한데, JS 파일 안에서는 ''나 "" 붙이지 않아도 괜찮다. 다만 특수기호가 들어가면 인식이 잘못될 수 있기 때문에 위 기호 사용해야 함.)
3) JSON 파일은 기본적으로 문자 데이터이다. 다만 import되면 객체 데이터처럼 보임!
4) JSON.stringify(objectName): JSON의 형식처럼 문자 데이터화 하는 명령어. (JS 파일에서 쓰임)
5) JSON.parse(constName) : 특정 변수를 JSON 형식대로 분석, 재조립해서 JS에서 사용 가능하게 만듬. (실제 객체 데이터처럼 출력됨.)
JSON의 예시.
#4. Storage
브라우저 내 데이터를 저장할 수 있는 곳.
위치: 개발자 도구 ➜ Application ➜ Storage
local VS session storage
로컬 스토리지에 저장한 데이터는 만료되지 않는다. (반영구적) 해당하는 도메인에(하나의 사이트에) 종속된다.
세션 스토리지의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
일반적으로는 로컬 스토리지를 더 많이 사용한다.
Storage 명령어
ex. 로컬 스토리지에 접근, 항목 추가하기 localStorage.setItem('myCat', 'Tom');
위에서 추가한 항목 읽어오기const cat = localStorage.getItem('myCat'); // const cat = 'Tom'
제거하기 localStorage.removeItem('myCat');
Storage 이용방법
첫 번째 + 두 번째 인수 모두 문자데이터를 쓰는게 좋고, 쓰지 않을 경우 제대로 저장이 안될 수 있음!
하여 JSON.stringify 와 JSON.parse를 사용해야 함.
추가할 경우
객체/배열 데이터 JS형식에 맞게 변환하는 법:
객체/배열 데이터 생성 ➜ JSON.stringify로 문자 데이터화 시키고 setItem 메소드로 데이터 저장
➜ 위에서 저장된 데이터를 JSON.parse 해서 재분석 ➜ JS 파일 내부 내 데이터로 활용
1) array / object를 생성하기
2) setItem 메소드와 함께 user를 stringify 하기 :
localStorage.setItem('user', JSON.stringify(user))
! 주의. localStorage.setItem('user', user) 라고만 쓰면
로컬 스토리지에는 key = user, value = [object Object]라고만 보인다.
(user의 원 데이터는 array 아니고 object. 아래에서 살짝 보임)
첫 번째 인수는 저장할 이름('user'), 두 번째 인수는 가져올 데이터 이름 (const user)
(세션 스토리지에 넣어야 하면 sessionStorage로 교체하면 될 것 같다)
3) JSON.parse로 JSON 내용을 JS 내용으로 변환하기
console.log(JSON.parse(localStorage.getItem('user')))
해석. 이제는 문자데이터가 된 'user'의 내용을 로컬 스토리지에서 가져와서,
이 내용을 JSON.parse하여 JS 내용으로 변환한 것을 콘솔에 출력해라!
수정할 경우
const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 22 // obj 내 age키의 value를 22로 변경
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj)) // 변경된 내용을 다시 적용!위 내용은 lodash의 Lowdb를 사용해서 적용할 수도 있다. (npm으로 적용해보기!)
