기술면접_JavaScript_10

프론트엔드 개발자 입문 | JSON

Contents

1. JSON파일이란?
   
2. 파일변환
   

• 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
  
• 영상에서 언급되지 않은 내용이 포함되어 있음
  
• Tutorial Video_10
  

JSON파일이란?

HTTP(Hypertext Transfer Protocol)

• 브라우저위에서 동작하고 있는 웹 등의 클라이언트가 서버와 통신할 수 있는 방법정의
  
• 클라이언트가 서버에 데이터를 요청할 수 있고, 서버가 이에 응답할 수 있음
  
• Hypyertext에는 링크,문서,이미지 등이 모두 포함됨
  

JSON(JavaScript Object Notation)

• HTTP를 이용하여 서버와 통신할 수 있는 방법
  
• 자바스크립트 오브젝트 표기법이란 뜻으로 서버와 클라이언트 통신 시 데이터를 손쉽게 표기해서 전달할 수 있는 장점이 있음 (ex.날씨,교통 - 정보 등 서버 데이터를 클라이언트에 표기하는 등 네트워크를 통해 데이터를 전송할 때 유용)
  
• Key와 Value로 이루어져 있음
  
• 프로그래밍 언어나 플랫폼에 무관하게 사용할 수 있음
  

파일변환

Object to JSON(오브젝트를 JSON파일로 변환)

• stringfy API를 통해 변환가능
  
• 오브젝트 내 함수나 Symbol과 같이 JavaScript에만 존재하는 데이터 타입은 변환되지 않음
  

//stringfy(obj)
const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  brithDate: new Date(),
  jump: () => {
    console.log(`${name} can jump!`)
  }
}

json = JSON.stringify(rabbit);
console.log(json)


//stringfy(obj): 콜백함수를 사용하여 위 코드 대비 변환을 통제하는 경우
json = JSON.stringify(rabbit, ["name"]); //rabbit obj의 특정 Property만 변환하고자 하는 경우 사용

json = JSON.stringify(rabbit, (key,  value) => { //rabbit obj의 특정 Property의 값을 변경하여 변환하고자 하는 경우 사용
  return key == 'name' ? 'ellie' : value;
}); 

Appendix

JSON관련 사이트

JSON Diff/JSON Beautifier/JSON Parser

1. JSON Diff: 서버에서 첫 번째로 받아온 데이터와 두 번째로 받아온 데이터의 어느 부분이 다른지 확인가능
   
2. JSON Beautifier: 서버에서 받아온 JSON파일의 포맷이 망가져 있을 경우사용
   
3. JSON Parser: JSON파일을 Object형태로 출력
   
4. JSON Validator: JSON파일 내 error debug