자바 스크립트(js) 입문 공부 16. JSON 제이슨, localStorage로컬스토리지

 

JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)을 뜻하며, 

이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷입니다. 

 

즉, 자바스크립트에서 사용하는 표기법을 다른 환경이나 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용합니다.  

 

문자열은 거의 모든 현대 프로그래밍 언어에서 사용할 수 있기 때문에 다른 프로그래밍 언어에서도 호환할 수 있기 때문입니다. 

 

JSON 표현법

 

JSON 형식은 자바스클비트 객체 리터럴 표기법에 기반을 두고 있습니다. 

객체 키와 문자열은 따옴키로 묶습니다. 

 

객체 리터럴의 모양

객체 리터럴의 모양	JSON 표기법
const todo = {     todoContent : "공부하기",       todoDone : false,               todoDate : new Date(),         todoWith : ["도로시", "양철로봇"] }	const todo = {     "todoContent" : "공부하기",       "todoDone" : false,               "todoDate" : new Date(),         "todoWith" : ["도로시", "양철로봇"] }

 

JSON 표기를 도와주는 내장 객체 JSON의 두 메소드를 사용하면 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 진행할 수 있습니다. 

 

 

 

예시를 통해 살펴보겠습니다. 

아래와 같은 객체 리터럴이 있습니다. 

// 자바스크립트의 객체 리터럴 

let dooly = {
    character : "둘리",
    species: "공룡",
    birth : new Date (1992, 04, 22)
}

 

자바 스크립트에서 작성한 이 코드를 다른 프로그래밍인 자바에서 사용하기 위해서는 

해당 자바에 호환될 수 있는 형식으로 바꾸어주어야 합니다. 

 

//문자열로 전체를 백틱으로 감싸준 뒤, name을 따옴표로 감싸 자바스크립트의 객체를 문자열로 변환합니다. 
// 다른 환경에서도 쓸 수 있게.. 
let dooly_str = `{
    "character" : "둘리",
    "species": "공룡",
    "birth" : "1992년 04월 22일"
}`

 

이렇게 문자열 전체를 백틱으로 감싸준 뒤, name을 따옴표로 감싸 자바스크립트의 객체를 문자열로 변환합니다. 

이제 다른 환경에서 호환되는 문자열이 됩니다. 

이 과정을 손쉽게 하기 위해서, 자바 스크립트의 형식을 유지하되 호환될 수 있도록 하기 위해서 사용하는 것이 JSON 입니다. 

 

JSON.stringify(dooly)

 

JSON을 사용해주면 해당 열이 전부 문자로 변환해줍니다. 

그럼 아까 문자열로 하나하나 바꿔두었던 dooly_str 을 자바스크립트의 객체로 변환해보겠습니다. 

 

JSON.parse(dooly_str)

 

이 내용을 콘솔로도 확인해겠습니다. 

 

console.log(JSON.stringify(dooly))
console.log(JSON.parse(dooly_str))

 

JSON은 배열 또한 적용이 가능합니다.   예제를 아래에서 확인해볼게요. 

const todos = [{
    todoContent : "밥먹기",
    todoDate : new Date()
},{
    todoContent : "독서하기",
    todoDate : new Date()
}]

console.log(JSON.stringify(todos))

 

배열은 아니지만 배열 형식으로 쓰여져있는 문자열을 확인할 수 있습니다. 

 

자바스크립트에서 사용하고 있는 객체나 배열을 다른 곳에서는 호환이 되지 않을 수 있지만, 

문자열로 바꾸면 호환되는 경우가 상당히 많습니다. 

그렇기 때문에 다른 협업을 하거나, 외부에서 가져온 요소들을 적용할 때 JSON을 주로 활용합니다. 

 

---

 

로컬스토리지 window.localStorage

 

localStoage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해줍니다. 
로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로,

여기에는 데이터를 영구적으로 보관할 수가 있습니다. 
데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며,

이때 데이터 타입은 문자열 형태만 허용됩니다. 

 

여기에서 영구적으로 보관한다는 말은? 
브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 뜻입니다. 

즉, 새로고침해도 처음의 상태로 돌아가지 않고 추가한 내용이 영구적으로 보관하기 위함입니다. 

브라우저가 제공하는 작은 메모리 공간으로 도메인에 저장됩니다. 

 

로컬스토리지 사용법

로컬스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해서 접근합니다. 

 

 

우리가 메소드 기능으로 읽고 쓰게 되면 그 내용을 크롬 개발자 메뉴를 열어보면 로컬스토리지를 열어볼 수 있습니다. 

 

 

한가지, 여기에서 보이는 Key와 Value의 값은 배열의 키와 밸류가 아닌 로컬스토리지 안에 기재하는 Key 와 Value 내용입니다. 이것은 모두 문자열로 저장이 됩니다. 

직접 로컬 스토리지에 저장을 해볼게요. 

 

localStorage.setItem("secret", "내 귀에 도청장치가 있다.")

 

로컬스토리지에 코드를 작성한 뒤 지우고 다시 실행을 해도 로컬스토리지에는 해당 내용이 영구히 저장 되어 있습니다. 

 

 

 

작성했던 코드를 모두 지우고 로컬스토리지의 영구 데이터를 읽어볼게요. 

 

let content = localStorage.getItem("secret")
alert(content)

 

 

 

 

해당 도메인에 대해서만 스토리지가 할당 됩니다. 이것을 지우기 위해서는 clear 을 입력해주면 됩니다. 

 

let content = localStorage.clear("secret")

 

여기까지 JSON과 로컬 스토리지에 대해서 알아보았습니다.

이 다음에는 이것을 활용한 투두리스트의 작성 미니프로젝트를 진행해보고, 

그 다음으로는 보다 다양한 배열 메소드를 활용하는 방법을 확인해보겠습니다.