전 날보다 조금 일찍 자서 3시간 30분 정도 잤다 :)
몸이 아직 자고싶을 떄 자고 일어나고 싶을 때 일어나는 생활패턴에서 벗어나질 못하는 까닭에 역시나 죽을 맛이다.
(이 몸뚱아리..

눈물을 감출 새도 없이 3일차 수업에 들어갔다.

HTTP 통신

HTTP.. 낯이 좀 익은 친구다. 어디서 봤나 했더니만 인터넷 주소 앞에 붙어있는 저녀석인 것 같다. 뭐의 약자일까 싶어서 봤더니 Hyper TextTransferProtocol 의 약자라고 한다.

하이퍼텍스는 뭔지 대충알고.. 그럼 프로토콜은 뭔데?... 라고 나처럼 생각하는 분들을 위해 준비했다.

• 통신 프로토콜 또는 통신 규약은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다.

:) 대충 통신하는 체계인..것..같다... 일단 뭔진 알았으니 넘어가도록 하자..

통신이라는 것을 하려면 일단 주는게 있어야하고 받는게 있어야 하는데.. 설명보단 그림으로 보도록하자. (귀찮은거 아님.. 아무튼 그럼)

웹 페이지에서 홈페이지(프론트엔드)가 실행중일 때, 작성한다는 요청을 백엔드 컴퓨터에 보낸다. 혹은 저장되어 있는 데이터를 불러와 달라고 프론트엔드 쪽에서 요청한다.그러면 백엔드는 그 요청에 대한 정보를 프론트엔드로 넘겨준다 정도로만 이해하도록 하자.

백엔드에서 정보(데이터)를 넘겨줄 때, 친절하게도 상태코드라는 것도 같이 보내주는데, 앞으로 내가 친해져야 할 오류코드도(특히 400번대) 이에 해당한다. 통상 200번대는 성공, 400번대는 실패를 뜻한다.

그렇다면 프론트엔드에서 '요청' 이라는 것을 어떻게 보낼까....

API가 바로 주인공이다. 멘토님께서 API는 쉽게 말해 "백엔드로 요청을 보내는 함수" 라고 말씀해주셨다.(이 말씀이 없었으면 이해 못했을지도 :)) API는 크게 4가지 방식으로 구분되는데

생성

• Create, 새로운 것을 생성하는 API

조회

• Read : 기존의 것을 조회하는 API

수정

• Update : 기존의 것을 수정하는 API

조회

• Delete : 기존의 것을 삭제하는 API

API를 다루는 방법은 두 가지가 있는데, 첫 날에 Class폴더에 설치한 Axios, apollo가 바로 그 것이다. 사용법은 나중에 보기로 하고..

다음 사진은 백엔드 쪽에서 미리 만들어 놓은 API명세서 이다.

• 사용할 수 있는 API가 몇 개이고, 어떠한 형식을 갖고 있는지 보여준다.

이 명세서의 형식을 지켜서 API를 백엔드로 전송하면, 우리는 JSON이라는 타입으로 우리가 보낸 API에 대한 답을 받는다.

JSON이란 JavaScript Object Notation 의 줄임말이다. 자바스크립트 의 객체 형식이라는 뜻이 되겠다.
,,,,,,그냥 객체로 받는단 뜻이다.

마지막으로 grapql 사용법이다.

query{
	fetchBoard(page: 1){
    	number
        writer
        title
        contents
    }
}

• query : 조회를 위해 query문을 사용합니다.
• fetchBoards : query 문 안의 형식 중 fetchBoards 를 사용합니다.
• page: 1 : fetchBoards 를 사용하기 위한 인자로 page 값을 입력합니다. (조회하기 위한 인자의 키값은 백엔드 API 페이지에 있는 Docs를 참조하면 된다.)
• number, writer, title, contents : 데이터 전송 후 백엔드 서버에서 받아오는 정보들의 키 값입니다.

Day.03 후기

그나마 숨을 좀 술 수 있는 날이었다고 생각한다..(실제로 귀가 시간이 좀 빠르긴 했다.)..오늘만 같았으면 좋겠지만..? 어림도없지.. 그 와중에 fetch에 필요힌 인자 자체가 객체 (이중객체) 인 경우는 어려웠다..