---3일차
오늘 적을 내용은 통신 입니다
통신!
개발자가 통신을 한다는 의미는 어떤 의미일까요??
-통신을 하는데 도움을 주는 프로그램을 작성하고 규칙을 작성해주는게 개발자가 통신을 한다는 의미라고 생각합니다!
통신
컴퓨터 간에 데이터를 전송하는 방법
인터넷이 되는 환경에서 특정프로그램을 설치하고 설정을 하게 되면 컴퓨터끼리 데이터를 주고받을 수 있게됨
대표3가지 도구
FTP(File Transfer Protocol)
-파일을 주고받을 때 사용합니다.
SMTP(Simple Mail Trasfer Protocol)
-메일을 주고 받을 때 사용합니다.
HTTP(Hyper Text Transfer Protocol)
-텍스트/하이퍼텍스트(쉽게말해 html) 즉 문자열이나 html을 주고받을 때 사용합니다.
이중에서 오늘 포스팅 할 것은 바로 #HTTP#입니당!
전송을 하는 컴퓨터와 전송을 받는 컴퓨터로 구분을 해서 설명을 드리겠습니다.
전송을 받는 컴퓨터는 쉽게말해 Backend 컴퓨터라고 할수있습니다.
이 Backend컴퓨터 뒤에는 DB컴퓨터가 존재하고용
이 Backend컴퓨터는 API검증을 통해 검증을 하게되고 이후 DB컴퓨터에 전송하게됩니다.
간단하게 3개의 컴퓨터로 이야기를 드렸지만,
DB컴퓨터의 경우 실제로는 못해도 최소 2군데 이상의 컴퓨터에 저장을 해놓게 됩니다.
왜 그럴까요??
DB컴퓨터가 한개만 있게되는 경우 DB컴퓨터가 문제가 발생하게 되면 이와관련된 서비스들이 작동을 하지않게 되거나 심하게는 저장된 데이터가 날아가게 되겠죠!
그래서 2개이상의 컴퓨터에 저장을 하게됩니다.
물론 지리적문제가 생길수도있기에 같은장소가 아닌 서로 다른 장소에서 보관을 하게됩니다!
설명은 이정도로 하고
저희는 프론트 엔드를 공부하고있기 때문에
프론트 엔드 설명으로 넘어오겠습니다.
저희가 집중해야할것은 바로!
Backend 컴퓨터에 어떻게 보내야 할지를 고민하고 집중해야합니다!
먼저
HTTP의 규칙을 보겠습니다
HTTP규칙
크게
request(요청)과 response(응담)으로 나눠집니다
간단히 req 또는 res로 불리기도 합니다
그럼 어떤것을 요청할까요??
게시글 등록을 한다고 가정해봅시다
작성자 비밀번호 제목 내용등 여러가지 내용을 입력을 받겠죠??
이 텍스트를 Backend 컴퓨터에 전송하며 게시물을 등록해달라고 req하게 됩니다
(*req아까 설명 드렸죠? request의 약자입니다)
그렇게 되면 Backend 컴퓨터에서 검증을 하게되고
res를 주게됩니다 (*res는 response)
검증이 완료된경우 케이스에 따른 메세지를 주겠죠??
이때 Backend컴퓨터가 res를 주면서 상태코드같이 줍니다.
상태코드란?
Backend 개발자분이 작성해서 보내주는 내용입니다.
만약 한글로 작성을 하게되면
frontend 개발자가 보기에는 상태를 보고 "아~ 완료됬구나" 또는 " 아~ 안됬구나" 라고 인식할수있을것입니다.
하지만 컴퓨터가 이해할수는 없겠죠?
그렇기에 이 메세지를 코드로 만들어서 보내주게 되는것입니다!
대략적으로 코드들의 구성을 아시려면 HTTP상태코드를 구글에서 검색해서 보시면 쉽게 아실 수 있습니다 .
(보시기 쉽게 링크 첨부해드렸어요!)
링크: https://developer.mozilla.org/ko/docs/Web/HTTP/Status
출처 : MDN Web Docs
그다음에 볼것은 바로 API입니다!
API란?( Application Programming Interface)
앞서 포스팅한 내용을 잠깐 다시 정리해보겠습니다.
서버에 req를 보내고 res를 받게 됩니다 이때 res에는 상태코드또한도 같이 받게됩니다.
저희가 게시판 이야기를 드렸었죠?
작성자 비밀번호 제목 내용등 여러가지 내용을 받은 Text에 각각의 요청에 대한 행동을 처리하기 위해서 함수를 사용하게됩니다 .
이게 바로 API입니다
쉽게 말해 req를 받았을때 이것을 검증하기 위한 함수라고 생각하시면 편하실것 같아요!
CRUD
crud란 무엇일까요??
Create
Read
Update
Delete
를 줄여서 CRUD라고 합니다
CRUD+상세조회할수있는 기능
그래서
하나의 기능당 최소 5개의 API를 만들어줘야합니다.
REST vs GRAPHQL
이번엔 API의 종류를 봐보겠습니다.
오늘볼 것은
두가지인데요
바로 REST와 GRAPHQL입니다.
두가지의 차이는 무엇일까요?
바로 접속자의 수에 따라서 다르게 됩니다!
적은 서비스의 경우에는 REST를 쓰게 되고
페이스북이나 인스타그램같이 대형 서비스의 경우에는 GRAPHQL을 쓰게 됩니다.
본 블로그에서는 주로 GRAPHQL에 대해서 다룰 예정입니다. 그러나, 중간중간 REST도 같이 다룰 예정입니다!
본격적으로 차이점을 보도록 하겠습니다.
rest-API vs graphql-API
쉽게 예시를 추가하며 설명하겠습니다
네이버에서 1번 게시글 조회
rest-API
- 주소처럼 생긴이름
- 설치할 프로그램 차이 :axios
- backend에서 API함수 작성후 return을 하게되면 frontend에서도 return값을 볼수있음
ex)backend :return 1번게시글----> frontend:1번 게시글
user가 보고싶은것은 작성자와 번호만 보고싶은데 REST를 쓰면 1번게시글의 모든내용을 봐야함
필요하지 않은 내용이라도 모든 자료를 봐야함* - crud작성의 차이 (create :post ,update:put,delete:delelte,read:get)
- rest: naver.com/board/1
graphql: board(1)
graphql-API
- 일반함수와 같은 이름
- 설치할 프로그램 차이 : apollo-client
- backend에서 return을 하더라도 frontend에서 필요한 부분만 보고 가져올수있게 return값을 가져올수있음
user가 보고싶은것만 볼 수 있음
필요한 내용만 가져올 수 있음
비용절감
-crud의 차이(create,update,delete:mutation ,read:quert)
왜 이렇게 할까요? (mutation으로 묶는 이유)
create update delete의 경우에는 데이터의 변경이 이루어지기 때문에 이기능들을 한가지로 묶어서 사용하는거죠!
JSON이란?(JavaScript Object Notation)
자바스크립트의 객체 표기법입니다!
객체가 왜 나왔을까요??
앞서 게시판에서 Text를 받아왔는데 이 Text를 객체라고 할수있습니다.
실제로 Backend에서는 객체를 return 하게 되고 JSON이 왔다갔다 하게 된다라고 할 수도 있습니다.
그렇기에 통신은 JSON 형태로 한다는것을 알 수 있습니다.
물론 html코드 또한도 전송할 수 있습니다!
왜일까요?
//(hint! *HTTP의 의미를 생각해 보세요)
