Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

coding etude

200927 [parse / parsing / JSON / json()] 본문

Javascript TIL

200927 [parse / parsing / JSON / json()]

코코리니 2020. 9. 27. 15:04

정말 오랜만에 포스팅을 하는.. 쿨럭..

정신줄 놓고 sprint 끝내는거에만 집중 해서인지.. 그동안 복습을 하나도 안했다는... 

이러다가 진짜 아무것도 못하게 될까봐.. 다시 한번 정신을 붙잡고.. 쿨럭....

 

fs(file system) 이라는것이 처음 나왔다.. 여기서부터는 서버와 DB의 영역으로 들어서는 듯한데.. 당췌 이해하기가 어렵다.. 일단 개연성 없이 주어진 데이터를 머리속에 입력해 보자. 

아무튼 이 fs를 정확하게 인지하고자 검색을 했다.(en.wikipedia.org/wiki/File_system

해석하자면 컴퓨터에서 데이터를 저장하고 불러올 때 메모리에 그냥 저장만하면 구분없는 하나의 큰 데이터로 표시 될것이고 원하는 파일을 찾을 수 없게 되는데, 이러한 상황을 방지하기 위해 데이터를 조각내고 조각낸 데이터에 이름을 붙여 저장하는 방식을 사용한다.(이것이 fs 이다.) 

이 fs 는 데이터를 조각내고 각각의 조각에 이름을 붙여 분리와 구분을 쉽게 만들어주었고, 이 데이터의 그룹을 file 이라고 부른다. 이런 그룹과 이름을 관리하는 데 사용되는 구조 및 논리 규칙을 "파일 시스템"이라고 한다.

 

 

갑자기 왜 이런 fs가 튀어나온걸까... 데이터를 불러와서 그 데이터를 가공 후에 return 하기 위한 연습과정 쯤으로 생각하면 될것 같다.( 본인 뇌피셜.. 서버 통신에 앞서 데이터를 불러오고 가공해서 다시 보내고 하기위해 일단 가공부터 연습하는 것 같음..)

 

그럼 파일을 불러오는 것은 생각보다 단순하다.(nodejs.org/dist/latest-v14.x/docs/api/fs.html)

참조 된 node.js 의 공식 홈페이지에 fs의 사용법이 나와있다.

fs.readfile(filepath, [option]) 이렇게 나와 있는데.. filepath는 불러오고싶은 데이터의 파일명 or 위치 이고 oprtion은 어떤것을 이용해서 불러올것인지의 옵셥이다.  

fs.readfile(filepath, 'utf8')

위의 예시처럼 옵션을 넣어주면 된다. ( utf8은 ... 검색해 보자.. 상세하게 잘나온다..)

 

 

 

자!!! 그럼 여기서부터가 본론인데!!!!!

 

이 데이터들은 가공하기 위해서 parsing 이란것을 해야하고 이 parsing 을 보니 JSON 도 있고 json() 도 있고 막 헷갈리기 시작했다.. (그래서 기초공부가 중요한것이다... 일전에 배운건데.. 뭐지?? 하고 그냥 넘어갔더 기억이....)

 

그래서 정확하게 알고자 비교검색을 해봤다. 

 

일단 parsing 이란 무엇인가??(en.wikipedia.org/wiki/Parsing)

우리의 위키가 알려주는 내용은 뭐 여러 분야에서 parsing 를 사용하는데

'컴파일러 및 인터프리터 작성을 용이하게하기 위해 입력 코드를 구성 요소 부분으로 구문 분석하는 것을 말합니다'

라고 정의하고 있다. 그래서 구문분석을 또 검색해 보니,

'문장이나 일련의 단어를 컴퓨터로 연산자, 피연산자, 블록, 식과 같은 구성 성분으로 분석하는 것을 의미한다'

라고 설명하고 있다.

 

종합해보면 입력된 정보를 컴퓨터의 언어로 분석해서 분리하고 그것을 컴퓨터가 받아들일 수 있게 조합한다..?정도로 이해하면 될것 같다.

 

자,, 그럼 이제 나의 궁금증은..... 그럼 JSON.parse()/JSON.stringify() 와 body.json() 의 차이가 무엇인지 궁금해 졌다.그래서 stackoverflow 를 검색해 보니 다음과 같이 단순하게 설명해 줬다.. 물론 예시도 있다.

`JSON.parse() is for "parsing" something that was received as JSON.JSON.`
`stringify() is to create a JSON string out of an object/array.`

이것을 알기 위해서는 client 에서 server로 요청을 보내거나 응답을 받을 때의 상황을 알고 있어여 한다.

서보로 보낼때는 string 타입으로 보내야하고 받은 데이터를 읽으려면 객체/배열 의 형태를 가지고 있어야 한다.

그래서 fetch(file, {method : 'POST'})  (= server로 데이터를 보내는것) 를 하기 전에는 JSON.stringify()를 통해서 데이터를 가공해야 하고 받은 데이터는 JSON.parse() 를 사용해서 재가공 해줘야 하는것이다.

// JSON.stringify() 예시

let my_object = { key_1: "some text", key_2: true, key_3: 5 };

let object_as_string = JSON.stringify(my_object);  
// "{"key_1":"some text","key_2":true,"key_3":5}"  

typeof(object_as_string);  
// "string"  
// JSON.parse() 예시

let object_as_string_as_object = JSON.parse(object_as_string);  
// {key_1: "some text", key_2: true, key_3: 5} 

typeof(object_as_string_as_object);  
// "object" 

 

그럼 이제 마지막인 json() 은 무엇일까?? (medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5)

 

mdn(body.json()) 에서는 서버와의 통신에서 payload(body)(= payload를 이해하려면 client/server을 조금은 알고 있어야 한다.) 의 데이터를 모두 받기 위해서는  response(body).json() 을 사용해야 정상적인 데이터를 받을 수 있다고 설명하고 있다. 

이 말은 데이터를 받아올때 데이터의 개수가 10개라고 가정하면 보통 1개의 데이터를 받아오면 응답을 종료하기때문에 정상적인 데이터를 받아오지 못한다는 것다.

response = [{1},{2},{3},{4},{5},{6},{7},{8},{9},{10}]

 

위의 예시처럼 응답이 있을 때, json()을 사용하지 않으면, {1}을 반환하고 송신이 끝나지만 반대의 경우에는 모든데이터를 수신한다는 말이다. 즉 json()은 데이터 가공의 역할이 아니라 데이터 수신의 역할을 하는 메소드라고 정의하면 된다.

 

이상 parse에 대해서 알아봤지만 영문 자료를 번역하고 뇌피셜로 이해하다 보니 정확하지 않은 정보가 있을 수 있다..

혹시 이상이 있는 자료에 대해서 댓글로 남겨주셨으면 감사하겠습니다.... 굽신굽신..