JSON 에 대해 알아보자
과제 진행중에 Mock data 를 fetch 하여 UI 를 그리는 작업을 한다는데
data를 json 파일로 저장해서 활용한다고 한다
최근에 To-do-list 를 만들때 JSON.stringifi 혹은 parse 명령어를 사용해서
로컬스토리지에 저장하고 하는 작업을 해본적이 있다
그럼에도 아직 JSON 파일을 어떨때 쓰고 쓰는 이유가 무엇인지 정확하게 모르기에
찾아보았다
JavaScript Object Notation
줄여서 JSON 이라고 한다
과거 웹 초기 시절부터 사용된 XML 이라는 마크업 언어는
헤더와 태그 등의 여러 요소로 가독성이 떨어지고,
쓸데없이 용량을 잡아먹는다는 단점이 있다.
많은 대안책이 제시되어 왔지만 최근에는 간결하고 통일된 양식으로
JSON을 주로 사용한다.
JSON은 아주 유연해서 거의 대부분의 언어로
자료를 JSON화 -> JSON 을 자료화 할 수 있고
브라우저 뿐 아니라 모바일에서도 서버와 데이터를 주고받을 때,
또는 서버와 통신을 주고받지 않을때도 오브젝트를 파일시스템에 저장할 때 사용할 수 있다
JavaScript 에서의 JSON
실습을 통해 알아보았다
1. object to json
const obj = {
name: 'sam',
hair: 'black',
age: 20,
birth: new Date()
}이런 오브젝트가 있다고 가정해보자
이 오브젝트를 JSON 형식으로 변경하고 싶다면
const json = JSON.stringify(obj)stringify 메소드를 사용하면 된다
{"name":"sam","hair":"black","age":20,"birth":"2022-08-04T05:29:31.447Z"}이러한 형식으로 저장이 된다
또한 파라미터를 이용해 여러가지 옵션을 줄 수 있는데
예를들어
// 이름만 json
const jsonOnlyName = JSON.stringify(obj, ['name'])
// {"name":"sam"}특정값만 추출한다거나,
const jsonNameChangeMike = JSON.stringify(obj, (key, value) => {
return key === 'name' ? 'mike' : value;
})
//'{"name":"mike","hair":"black","age":20,"birth":"2022-08-04T05:29:31.447Z"}'콜백함수를 사용하여
이런식으로 name 이 있으면 mike 로 바꿔주세요 하고 짤 수도 있다
2. json to object
json 파일을 object 로 다시 변환하려면
const parseJson = JSON.parse(json){"name":"sam","hair":"black","age":20,"birth":"2022-08-04T05:29:31.447Z"}
// =>
{name: 'sam', hair: 'black', age: 20, birth: '2022-08-04T05:59:05.718Z'}
age: 20
birth: "2022-08-04T05:59:05.718Z"
hair: "black"
name: "sam"
[[Prototype]]: Object다시 오브젝트 형태로 변환되는 것을 볼 수 있다
몇가지 주의해야 할 점이 있는데,
함수와 심볼은 제이슨으로 변환할 수 없기때문에 제이슨으로 변환할 때 변환되지 않기때문에
다시 데이터로 변활할때도 포함되지 않는다
예를들어
console.log(obj.birth)
// Thu Aug 04 2022 15:07:53 GMT+0900 (한국 표준시)처음에 정의한 오브젝트로는 정상적으로 함수의 실행이 되지만
console.log(parseJson.birth)
// '2022-08-04T06:07:53.299Z'재변환한 오브젝트에서는 스트링 값이 반환된다
이걸 해결하기 위해서는
const parsePalameter = JSON.parse(json, (key, value) => {
return key === 'birth' ? new Date(value) : value;
});
// Thu Aug 04 2022 15:07:53 GMT+0900 (한국 표준시)이런식으로 고쳐주면 된다
총평
강의를 보고 과제의 대강의 갈피를 잡았다
data 1. profile 데이터
- 닉네임
- 설정해놓은 프로필사진 url
data 2. feed 데이터
- 피드넘버 혹은 피드고유ID
- 해당 게시글 작성시간
- 해당 게시글 작성자
- 작성자가 올린 사진 url
- 해당 피드 댓글 데이터
- 유저네임
- 해당유저가 작성한 댓글내용
- 작성시간
이런식으로 대강의 JSON mock data 를 구상해봤다
SNS를 하지 않아서 정확한 기능은 잘 알지 못하지만..
이런식의 Feed UI 가 있다고 가정했을 때
피드 갯수는 피드 데이터의 length 값으로 결정이 될 것이고,
피드생성부분
1. 피드데이터를 읽어서
2. id 로 체크를 시작할건데,
헤더부분
1. id에 해당하는 작성자를 읽어온다
2. 헤더 작성자 부분에 값을 집어넣는다
3. 작성자에 해당하는 프로필데이터를 읽어서
4. 사진을 집어넣는다
사진부분
1. id에 해당하는 사진을 읽어온ㄷ나
2. 사진을 집어넣는다
댓글부분
1. id에 해당하는 댓글목록을 오브젝트 형식으로 가져온다
2. 해당 오브젝트는 작성자, 댓글내용, 작성시간 으로 구성되어 있다
3. 작성 시간이 가장 빠른 순으로 정렬한다
4. 정렬한 데이터 값으로 작성자값과 댓글내용을 값으로 갖는 li 태그를 만들건데,
5. 템플릿 형식으로 변수를 만들어 할당한다간단히 생각해봤는데도 엄청 복잡하다
😇😇😇
