TIL_20.05.23~24(토,일) - client, server

주말 짱 빨라

client

주중에 특히나 약했던 개념인 client를 다시 구현 해보려고 했는데, 잘 안되고 있다...

그래서 레퍼런스 코드를 보면서 이해하는 것을 목표로 했다. 우선
fetch를 통해서 GET, POST하는 개념이 익숙치 않았는데 여러개로 메소드를 나눠서 작업하다 보니깐 더 쉽게 이해할 수 있었다.

ex) 버튼 이벤트를 만들어 POST할때 보내지는 데이터를 컨트롤하는 것과

특정 메소드에서 직접 DOM을 건드려선 안된다면?-> 메소드를 쪼개자!

또 이해가 되지 않았던 것들 중 하나가 데이터를 어떻게 받아오는 건지 였는데, 일단 아래와 같은 코드가 있으면

fetch: () => {
    fetch(app.server)
      .then(resp => {//json 형식으로 가져오고
        return resp.json();
      })
      .then(json => {// 가져온 데이터를 렌더링
        //json은 배열인데 제이슨 데이터가 담겨있는 배열
        //console.log(json);
        //이터러블 하기 때문에 forEach 사용가능
        json.forEach(app.renderMessage)});
  }
    

fetch의 promise...
console로 확인해 본 결과 배열이었기 때문에 forEach로 돌려서 출력할 수 있었고,

renderMessage: ({ username, text, date, roomname }) => {
    console.log(username);
//생략
  }

각 데이터는 {username:'dfgf',text:'fgfgd',date:'fg',roomname:'fgd'} 이런 형식이므로 구조분해 할당을 이용해서 간단히 사용할 수 있었다.

server

chuck는 버퍼이고 이를 어떻게 다룰 수 있는지 이것 저것 많이 만져보았다.

우선 chuck를 담을 변수를 선언해서 ' '(빈문자열) 로 선언하면

let save = '';
      
// chuck 버퍼, 2진 데이터를 담는 객체 
request.on('data',(chuck)=>{
  save += chuck;
});
request.on('end',()=>{
  save = save.toString();
  //JSON.parse(save) 안넣어주면 오류가 난다.
  // stirng 객체를 JSON객체로 변환
  data.results.push(JSON.parse(save));
  console.log(data);
  response.writeHead(201, headers);
  //JSON객체를 string 객체로 변환
  response.end(JSON.stringify(data));
});

이런 식으로 사용할 수 있었고,
chuck를 담을 변수를 선언해서 [ ] (빈배열) 로 선언하면

let save = [];
      
// chuck 버퍼, 2진 데이터를 담는 객체 
request.on('data',(chuck)=>{
  save.push(chuck)
});
request.on('end',()=>{
  save = Buffer.concat(save).toString();
  //JSON.parse(save) 안넣어주면 오류가 난다.
  // stirng 객체를 JSON객체로 변환
  data.results.push(JSON.parse(save));
  console.log(data);
  response.writeHead(201, headers);
  //JSON객체를 string 객체로 변환
  response.end(JSON.stringify(data));
});

위와 같이 사용하면 되었다.

그리고 헷갈렸었던 JSON.parse와 JSON.stringify를 명확히 개념을 알게 되었다.