JSON & XML
XML
xml은 EXtensible Markup Language의 약자로
HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.
보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다.
XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다.
JSON
JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.
JSON과 XML의 공통점
JSON과 XML은 다음과 같은 공통점을 가지고 있습니다.
-
데이터를 저장하고 전달하기 위해 고안되었습니다.
-
기계뿐만 아니라 사람도 쉽게 읽을 수 있습니다.
-
계층적인 데이터 구조를 가집니다.
-
다양한 프로그래밍 언어에 의해 파싱될 수 있습니다.
-
XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있습니다.
JSON과 XML의 차이점
하지만 JSON과 XML은 다음과 같은 차이점도 가지고 있습니다.
-
JSON은 종료 태그를 사용하지 않습니다.
-
JSON의 구문이 XML의 구문보다 더 짧습니다.
-
JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있습니다.
-
XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있습니다.
-
XML은 XML 파서로 파싱되며, JSON은 자바스크립트 표준 함수인 eval() 함수로 파싱됩니다.
REDUX
리덕스는 Flux 아키텍처의 구현체 ==>
데이터의 흐름을 예측할 수 없게 만들었던 문제를 해결하기 위해서 고안되었다.
흥미로웠던 등장 배경에 대해:
잘 알려진 사례 중 하나는 2014년 컨퍼런스에서 소개된 페이스북의 채팅 버그입니다. 읽지 않은 메시지 상태를 나타내는 카운트를 확인하고 사용자가 메시지를 확인해도 어느새 좀비처럼 카운트 숫자가 되살아나면서 사용자를 괴롭히던 버그였습니다. 다시 확인했을 때 새로운 내용은 아무것도 없는데 말이지요.
개발자가 버그를 수정해도 잠시 동안은 괜찮아 보였다가 계속해서 같은 버그가 보고되는 상황이 연출됐습니다. 이러한 경험을 거치면서 페이스북 팀은 설계에 기반한 근본적인 문제가 있다고 판단했다고 합니다.
그리고 그 해결책으로 애플리케이션의 데이터가 단방향으로 흐르는 방법을 고안하게 됩니다. 그것은 플럭스 아키텍처의 핵심 멘탈 모델, 다시 말해서 사고 과정, 동기, 철학적 배경 등에 대해 깊이 이해할 수 있게 하는 하나의 모델이 되었고 그 구현체인 리덕스는 애플리케이션을 위한 상태 컨테이너로써 단방향 데이터 흐름을 활용하여 시스템을 예측 가능하게 만들어서 시스템을 보완하는 역할을 하게 됩니다.
리덕스의 간략한 구조를 설명하자면
전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장하며,
상태를 변경 객체 액션(action)을 내보내는(dispatch)하는 것이 유일한 방법입니다.
그리고 액션이 상태를 어떻게 변경할지 명시하기 위해
리듀서(reducer)작성
리덕스의 문제
-->
리덕스는 복잡하고 길다....
REDUX TOOLKIT (1)
createReducer()
// 기존 스위치 문으로 이루어진 카운터 리듀서 함수입니다.
// 많은 보일러플레이트 코드와 에러를 발생시키기 쉬운 구조를 보여주고 있습니다.
function todosReducer(state = [], action) {
switch (action.type) {
case 'UPDATE_VALUE': {
return {
...state,
first: {
...state.first,
second: {
...state.first.second,
[action.someId]: {
...state.first.second[action.someId],
fourth: action.someValue,
},
},
},
};
}
default: {
return state;
}
}
}
// 하지만 createReducer 함수를 사용하면 아래처럼 간단히 작성할 수 있습니다.
const todosReducer = createReducer(state = [], (builder) => {
builder.addCase('UPDATE_VALUE', (state, action) => {
const {someId, someValue} = action.payload;
state.first.second[someId].fourth = someValue;
})
})
