상권's
TIL 3 (2021.10.07) 본문
자바스크립트와 JSON

JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준입니다.
따라서 JSON 데이터는 자바스크립트가 자주 사용되는 웹 환경에서 사용하는 것이 유리합니다.
JSON으로 변환된 객체의 타입은 문자열입니다. 발신자는 객체를 직렬화한 문자열을 누군가에게 객체의 내용을 보낼 수 있습니다. 그렇다면 수신자는 이 문자열 메시지를 어떻게 다시 객체의 형태로 만들 수 있을까요? JSON.stringify와 정반대의 작업을 수행을 하는 메소드 JSON.parse 를 사용할 수 있습니다.
자바스크립트 객체 | JSON | |
키 | 키는 따옴표 없이 쓸 수 있음 | 반드시 큰따옴표를 붙여야 함 |
문자열 값 | 문자열 값은 어떠한 형태의 따옴표도 사용 가능 | 반드시 큰따옴표로 감싸야 함 |
let packet = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
// JSON 문자열
let obj = JSON.parse(packet)
console.log(obj)
{sender: '김코딩', receiver: '박해커', message: '해커야 오늘 저녁 같이 먹을래?', createdAt: '2021-01-12 10:10:10'}
// 자바스크립트 객체
자바스크립트에서 JSON 데이터를 분석하고 사용하는 것은 매우 간단합니다.
자바스크립트는 JSON 데이터를 처리하기 위한 다음과 같은 메소드를 제공하고 있습니다.
JSON.stringify() 메소드
JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다.
객체를 직렬화(serialize) - JSON.stringify
JSON.parse() 메소드
JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다.
직렬화된 객체를 객체의 형태로 변환(deserialize) - JSON.parse
toJSON() 메소드
자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환합니다. 따라서 이 메소드는 Date.prototype 객체에서만 사용할 수 있습니다.
Response.json()
The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.
Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.
=> json() 메소드는 respose stream을 받고 나서 읽고, body text를 파싱한 결과를 리턴한다.
메서드의 이름이 지정되었음에도 불구하고 json()결과는 JSON이 아니라 JSON을 입력으로 사용하고 이를 구문 분석하여 JavaScript 객체를 생성한 결과입니다.
JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)
JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.
배열일 경우 배열 내부를 순회할 때 재귀,
객체의 경우 키와 벨류에 재귀.
function stringifyJSON(obj) {
if ( typeof obj === 'boolean' || typeof obj === 'number' || obj === null ) return String(obj)
// true나 false, 숫자, null은 문자의 형태로 만들어준다.
if ( typeof obj === 'string' ) return `"${obj}"`
// 문자는 stringifyJSON 함수를 이용할 경우 '문자'가 되어야 합니다.
if ( typeof obj === "undefined" || typeof obj === "function") return undefined
// 타입 undefined이거나, 함수일 경우에는 'undefined' 를 리턴한다.
if (Array.isArray(obj)) { // 배열일 경우에는,
let result = []
for ( el of obj ) { // 배열의 요소들을 돌면서,
result.push(stringifyJSON(el)) // 요소들을 다시 stringifyJSON 함수에 돌리고, 해당 값들을 빈 배열에 추가한다.
}
return `[${result}]` // `${}` 중간에 배열이 들어갈 경우 배열이 전부 다 풀려서 확인된다!! 그래서 다시 []을 걸어준다.
}
if (typeof obj === 'object') { // 객체일 경우에는,
let str = ''
for ( let key in obj ) { // 객체의 key들을 돌면서
if ( obj[key] === undefined || typeof obj[key] === 'function') {
// 빈 객체이거나 함수일 경우에는 빈 객체를 리턴한다.
return "{}";
}
let stringfyKey = stringifyJSON(key)
let stringfyEl = stringifyJSON(obj[key])
str = str + `${stringfyKey}:${stringfyEl},`;// 키와 값 사이에 공란을 없앤다.
}
str = str.slice(0, -1) // 맨 마지막에 추가된 , 를 없애준다.
return `{${str}}` // {} 걸어주고 리턴한다.
}
}
Boiler-plate
React js
리액트의 가상돔
Virtual DOM(VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
이러한 가상돔은 이전에 가상돔에서 찍어놓은 스냅샷과 현재의 상태를 비교해서 바뀐 부분에 대해서만 실제 돔에서 바꿔준다.
바벨 Babel
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜줌
웹팩 webpack
웹사이트를 만들 때, 파일, 라이브러리, 프레임워크의 양이 많아지는데, 웹팩을 이용해서 번들(bundle)화 해서 간단하게 만들어준다. - create-react-app 을 할 경우, src 폴더를 웹팩이 관리해준다.
npm 과 npx
npm 은 node package manager 로 node js의 오픈 소스 레포지토리이다.
이러한 npm은 기본적으로는 local에 저장이 되는데, 이는 프로그램마다 다운로드 받아진다.
npm install -g 를 할 경우에는, 컴퓨터 자체에 다운이 받아지게 되는데, 다른 프로젝트에서 사용하지 않을 경우, disk space가 낭비될 수 있다.
npm create-install-app이 아닌,
npx create-react-app을 하면, npx가 npm registry에서 create-react-app을 찾아서 다운로드 없이 실행시켜주기 때문에 disk space를 낭비하지 않을 수 있으며, 항상 최신 버전을 사용할 수 있게 된다!.
'~2022 작성 글 > TIL' 카테고리의 다른 글
TIL 6 (2021.10.12) (0) | 2021.10.12 |
---|---|
TIL 5 (2021.10.11) (0) | 2021.10.11 |
TIL 4 (2021.10.08) (0) | 2021.10.08 |
TIL 2 (2021.10.06) (0) | 2021.10.06 |
TIL 1 (2021.10.05) (0) | 2021.10.05 |