[드림코딩 by 엘리] 자바스크립트 기초 강의_(4) + css

1. JSON

- JavaScript Object Notation : simplest data interchange format

• key-value
• 프로그래밍 언어나 플랫폼에 독립적

 

- Object to JSON : stringfy(value,replacer?)

json=JSON.stringify(['apple','banana']); //["apple","banana"]

const rabbit={
    name:'tori',
    color:'white',
    size: null,
    birthDate: new Date(),
    //함수는 json에 제외 +symbol도 제외
    jump: ()=>{
        console.log(`${this.name} can jump!`);
    },
};
json=JSON.stringify(rabbit);
console.log(json);

 

+ 원하는 property만 전달 가능

json=JSON.stringify(rabbit,["name"]); // {"name":"tori"}

 

+ replacer 사용

json=JSON.stringify(rabbit,(key,value)=>{
    //이름만 변경 가능
    return key==='name'?'jieun':value;
});
console.log(json);

 

- JSON to Object : parse(value, reviver?)

json=JSON.stringify(rabbit);
const obj=JSON.parse(json);
console.log(obj);

• 함수는 JSON으로 전달되지 않기때문에 다시 object로 변환하여도 x

rabbit.jump(); //can jump!
obj.jump(); //error

• 형식을 지정하여 parse가능

console.log(obj.birthDate);

const obj2=JSON.parse(json,(key,value)=>{
    return key==='birthDate'? new Date(value):value;
});
console.log(obj2.birthDate);

 

 

+ CSS : em vs rem

• parent 기준: %, em
• browser기준: v*, rem
• box 기준: %, v*
• font 기준: em, rem

- em vs rem 

• rem은 root 기준이기때문에 어떤 박스에서 사용해도 크기가 일정
• em은 parent 기준이기 때문에 상위요소일때와 conponent안에 있을때의 크기가 다름