HTTP 통신

HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길입니다.

FTP : 파일
Smtp : 간단한메일
http : 텍스트 / 하이퍼텍스츠

TTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있다.
한명이 요청을 하게 되면 받는서버쪽에서 응답을 하게된다.

HTTP 요청(Request)과 응답(Response)

HTTP 요청(Request)

프론트 엔드 화면에서 기본적인 유저 정보들을 입력후 등록하게 되면
백엔드에서 데이터를 검증하고 데이터베이스에 저장 해달라고 요청합니다.

HTTP 응답(Response)

요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답합니다.

back-end 컴퓨터는 응답할 때, 응답 상태코드 라는 것도 함께 보내줍니다.
상태코드는 현업에서 사용하는?? 규칙? 마다 다르다.
내가 다녔던 회사는 플래그 라고 명칭을 했었다.

200 == success
500 == serverError
400 == FrontError

API

API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능입니다.

Back-end 개발자가 만든 함수이다.
API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게되는 데이터가 API 함수의 return 데이터다.

API 종류(. -API vs graphql-API)

API의 종류는 크게 rest-API, graphql-API 로 2가지가 있다.

rest-API 와 graphql-API 는 몇가지 차이점이 있다.

RESTAPI
백엔드에서 주는 데이터를 무조건 다 받아야만 한다.

graphql
백엔드에서 주는 모든 데이터를 다 받을필요가 없고
원하는 데이터만 골라서 받아올수 있다.

API 차이점을 확인해보자

사용툴 postMan

접속 Api KoreanJson

RESTAPI

위 그림과 같이 선택할수 있는 조건은 없다 RestApi는 백엔드에서 보내주는 데이터를 그대로 다 받아야 한다.

graphql
graphqlApi는 back-end에서 주는 데이터들을 프론트에서 원하는 데이터만 가져와서 구성할수 있다.

요약하자면
REST에서는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전히 분리되어 있습니다.
REST에서는 Resource의 크기와 형태를 서버에서 결정하지만, GraphQL에서는 Resource에 대한 정보만 정의하고, 필요한 크기와 형태는 client단에서 요청 시 결정합니다.
REST에서는 URI가 Resource를 나타내고 Method가 작업의 유형을 나타내지만, GraphQL에서는 GraphQL Schema가 Resource를 나타내고 Query, Mutation 타입이 작업의 유형을 나타냅니다.
REST에서는 여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요하지만, GraphQL에서는 한번의 요청에서 여러 Resource에 접근할 수 있습니다.
REST에서 각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리하지만, GraphQL에서는 요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리합니다.

graphql은 vs코드로 적용시킨 코드로 확인

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql `
    query fetchBoard ($number:Int){
        fetchBoard(number:$number){
            number
            title
            contents
            writer
           
        }
    }
`;
const fetchBoardQuery = () => {
    const router = useRouter();
    const {data} = useQuery(FETCH_BOARD , { 
            variables: {
                number:Number(router.query.number)
            }
    });
    return(
        <div>
            <div>{data?.fetchBoard.number} 번 게시글</div>
            <div> 작성자 : {data?.fetchBoard.writer}</div>
            <div> 제목 : {data?.fetchBoard.title}</div>
            <div> 내용 : {data?.fetchBoard.contents}</div>
        </div>
    )
}

export default fetchBoardQuery;

$number 값은 사용자가 입력하는값을 가져올수 있도록 가공 했고
값의 해당하는 상세정보를 가져 오는데 원하는 값만 가져와서 화면에 보여주고 있다.
( number ,title ,contents ,writer )
사실 데이터를 뜯어보면 더많은 데이터들이 있지만 게시판에 필요한 정보만 가져아서 사용자에게 보여줄수 있다.

이런 차이로 인해 생기는 장단점은 무엇이 있는가?
GraphQL 은 다음과 같은 장점을 가진다.
HTTP 요청의 횟수를 줄일 수 있다.
RESTful 은 각 Resource 종류 별로 요청을 해야하고, 따라서 요청 횟수가 필요한 Resource 의 종류에 비례한다.
반면 GraphQL 은 원하는 정보를 하나의 Query 에 모두 담아 요청하는 것이 가능하다.
HTTP 응답의 Size 를 줄일 수 있다.
RESTful 은 응답의 형태가 정해져있고, 따라서 필요한 정보만 부분적으로 요청하는 것이 힘들다.
반면 GraphQL 은 원하는 대로 정보를 요청하는 것이 가능하다.

끝으로 위 처럼 graphql 이 restApi보다 효율적인건 사실이라고 본다.
하지만 실제로 프로젝트를 통해 개발을 해나간다면 어떤 충돌이 있을지 아무도 모른다.

가장 중요한건 내가 필요한 데이터와 내가 만들고자 하는 기능의 정확한 목적을
가지지 않고 프로젝트를 한다면 후에 엄청난 후폭풍이 몰려올것이다.

글쓴이도 지금으로선 가볍게 알고 있고 장단점이야 구글링해서 알수 있고 오~~ 그래 graphql 이놈이 효율적이구나! 라고 할수 있지만 실제로 프로젝트에서 구현을 해본적이 없어서 어떤 형식과 방식이 더 효율적인지는 모르겠다.