코드캠프3일차 TIL: HTTP 통신, Graphgl, postman

jinwoo mok·2022년 11월 2일
0

개발에서 통신이 뭘까? 사실 처음에 통신이라고 해서 뭔가 거창하고 복잡하고 어려운 전문지식일 것이라 생각해서 덜컥 겁부터 났다. 하지만 코드캠프의 멋진 노원두 멘토님의 강의를 들으니 전혀 어렵지 않고 우리의 코딩공부의 새로운 지평을 넓혀줄 개념이었다. (사실 이러한 어려워 보이는 전문용어 때문에 왠지 모르게 개발이 어렵게 느껴지는것 같다.)

통신! 전혀 어렵지 않아요!

통신은 사용자가 입력한 데이터를 프론트엔드가 만든 코딩이 받아서 한번 걸러준 다음에 그것을 백엔드로 보내주는 것이다. 즉 전화하듯이 백엔드와 프론트엔드가 서로 핑퐁하듯 데이터나 필요한것들을 주고받는 것이다. 우리는 데이터베이스와 API(이에 대해선 이 글 후반부에 또 설명할 것이다)를 통해서 백엔드가 만들어준 엑셀데이터에 여러가지 요청(이 요청에는 등록, 삭제, 수정 등등 이 있겠다.)

이때 프론트엔드가 백엔드에게 요청하는 것을 Request 라고 하고 이에 백엔드가 응답하는 것을 Response라고 한다. 여기서 Request에 대한 응답은 보통 숫자로 Response가 오는데 하는데 일반적으로 성공에는 2로 시작하는 숫자가 오고 에러는 4로 시작하는 숫자가 오며 백엔드 에러는 5로 시작하는 숫자로 Res(response를 짧게 줄여서 표기한 것이다. Request는 Req로 줄여서 쓴다.)가 온다.

그런데 이렇게 프론트가 백엔드에게 요청을 하기 위해서는 요청의 종류에 따라서 다양한 함수를 써야 하는데 그것이 바로 API라고 할 수 있다. 예를 들어 '상품 데이터 등록'을 하려면 '상품등록함수'를 사용해야 하며 '프로필조회'를 하려면 '프로필조회함수'를 사용해야 하는데 이것들이 API이며 백엔드에서 미리 만들어 두면 우리가 메뉴판 처럼 골라서 함수를 사용해 요청할 수 있는 것이다.

그리고 이러한 API가 특정 기능을 구현하기 위해서 만들어 질때는 보통 CRUD는 기본적으로 존재해야 한다. CRUD는 또 모야? 또다시 전문용어가 나와서 우리의 머리를 아프게 한다. ㅠㅠㅠ 하지만 이것도 어렵게 생각할것 없다. 그러드란 Create, Read, Update, Delete 의 약자로 생성,C 읽기, 수정, 삭제 API를 의미한다. 쉽게 생각해서 우리가 자유게시판을 만들었다면 당연히 게시물 등록(C), 읽기(R), 수정(U), 삭제(D)를 위한 API가 필요한 것이다.

이렇게 우리는 통신을 위해 API가 필요한데 API를 쓰는데는 보통 2가지 방식이 있다. 바로 REST API와 GRAPHQL 방식이다. 전자는 소규모 서비스에서 쓰이지만 페이스북 같은 대량의 사용자가 있는 대규모 서비스는 주로 후자가 더 자주 쓰인다고 볼 수 있다. 이유는 전자는 특정 정보를 불러올때 정보가 들어간 데이터를 전부 불러오는데 반해 후자는 필요한 데이터만 쏙쏙 골라올 수 있기 때문에 '통신료절감'의 이득이 있기 때문이다.

(원하는 데이터만 골라담아 봅시당~)

여기서 데이터는 JSON 형식으로 담겨서 통신 상에서 오고가는데 이는 정보가 객체 형식으로 담기는 것으로 이해하면 된다.(뜬금없지만 오늘 배운것이고 꼭 필요한 지식이기 때문에 ㅎㅎ)

또한 Graphql은 CRUD의 'CUD'부분은 MUTATION을 통해서, R은 QUERY를 통해서 한다면 rest api는 post, put, delete, get등을 통해서 하며 Graphql은 api가 일반 함수 형식이라면 rest apis는 주소형식 이라는 차이가 있다.

오늘은 Graphql에서 프로필 등록, 상품등록, 게시글 등록, 각종 수정 등등 다양한 작업을 해봤는데 오늘 해본 것들 중에서 한가지만 코드 예시를 통해서 쓰다면 다음과 같다.

만화 케릭터 나루토의 프로필을 등록해 보자

mutation{ createProfile(name: "나루토", age:15, school: "나뭇잎마을"){ _id number message } }

이와같이 요청하면 다음과 같은 응답이 오게 된다.

{ "data": { "createProfile": { "_id": null, "number": null, "message": "프로필이 정상적으로 등록되었습니다." } } }

그렇다면 POSTMAN을 통해 정보를 가져오려면 어떻게 해야 하나?

이런 방식으로 API를 작성하면?

이런 방식으로 응답이 오게 된다.

이렇게 오늘 배운 깨알 정보를 정리해 봤다. 내일은 같은작업을 vscode에서 실습하게 될것이다. 그동안 게시글을 입력하면 수많은 사용자들이 입력할텐데 그걸 다 내가 어떻게 관리하나 고민하고 있었는데 이렇게 하면 손쉽게 가능하다는 것을 알게 되니 너무나 즐겁다.

profile
이제 막 개발공부 시작한 핫! 한 개발자

0개의 댓글