JSON이란? 두번째 글(서버와 클라이언트의 데이터 교환)
내 블로그에 가장 많은 유입검색어, 조회수가 바로 json이다.
그만큼 JSON이 뭔지 애매하고 이해하기 어렵고 나같은 초보자들이 제일 궁금해 하는 것이다.
검색을 하면 'JavaScript Object Notation', '데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식','객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다'. 이런 말들이 나오는데 여전히 이해하기 어렵다.
백문이 불여일견이라더니 드디어 눈으로 직접 보니까 이해가 되는 것 같다.
내가 fetch를 공부하며 느껴본 JSON에 대해 자세히 써보려고 한다.
자 일단 html form에서 데이터를 보내는 방법은 저번에도 포스팅했으니 간략히 리뷰만 하고 넘어간다.
form의 method에 post로 입력하고 뭔가 submit이 되면 해당 url(위에서는 입력하지 않음. default로 지금 현재url로 연결됨.)의 라우터와 연결된 controller에서 req.body로 사용자가 입력한 data를 받을 수 있다. 위 사진을 예로들면 req.body 에 {title:"사용자 입력", description:"사용자 입력", hashtags:"사용자 입력"}이런 object가 들어있는 것이다. 그래서 백엔드에서 이런 데이터를 사용할 수 있다.
그렇다면 한단계 더 들어가서 html과 연결된 프론트엔드 브라우저에서 백엔드 서버로 데이터를 보낼 수 있을까?
할 수 있다. 이 때 fetch가 필요하다.
fetch(보내고자 하는 url,{내용})
마찬가지로 method는 Post, body에 text변수를 담아서 보냈다. 그럼 해당 url로 라우터를 지정하고, controller를 만들어서 서버에서 req.body를 불러오면 text가 있겠지?
아쉽지만 body는 빈 object가 찍힌다.
브라우저를 확인해보니
나는 분명히 body:{text:text} 이렇게 보냈으니 {text: "~~~~"}이런게 있어야 하는데 왜 없을까?
text가 아니라 이상한게 갔다. 아마 개발을 공부하다 보면 여러번 봤을텐데 object가 string으로 바뀌었을때 나오는 것이다.
이렇게 object가 string으로 바뀌면 저런게 나온다. 근데 object가 string으로 바뀌다니? 왜?
우리가 fetch로 데이터를 보내면 브라우저는 우리가 안보이는 곳에서 이것을 string 형태로 바꿔서 보낸다.
서버와 데이터를 주고받으려면 string형태로 바꿔야하기 때문이다.
Number 나 Boolean같은건 string으로 바꿔도 형태가 똑같은데, object는 이상하게 저런게 나온다.
그냥 바꾸면 [object Object]같은게 나오니까
이 object를 서버와 주고 받을 수 있는 특별한 모양의 string으로 바꿔야 한다. 그게 바로 JSON데이터다.
JSON.stringify()
그냥 string이 아니라 JSON데이터.
그럼 우리 서버는 JSON데이터를 받았겠지? 근데 그 JSON데이터는 그자체로 쓸수가 없다.
중괄호 안에 담긴 알파벳 무더기들을 어디에 쓰겠는가? 감상용?
그래서 서버는 이것을 다시 자바스크립트 object로 바꿔야 한다.
그게 바로 JSON.parse()
위는 알파벳덩어리지만 아래는 자바스크립트 object이다.
이때 서버가 JSON데이터로 잘 바꿀 수 있도록 express.json()미들웨어가 필요하고
브라우저가 애초에 보낼때 "나 데이터 보내는데 이거 그냥 string아니고 JSON이다? 받아서 다시 object로 만들어야된다?"
라고 말해줘야한다.
그게 바로 headers의 역할이다.
드디어 콘솔에 원하는 모양이 보인다.
즉, 서버와 브라우저가 데이터를 주고받으려면 string의 형태가 필요하다. 근데 우리가 대부분 사용하는 데이터는 object 형태이다.
이 Object를 서버와 브라우저가 제대로 주고받을 수 있는 string의 형태가 JSON이라고 할 수 있다.
이 JSON은 텍스트이므로 용량도 굉장히 적고 빠르기 때문에 데이터 전송에 많이 사용한다고 한다:)
