죽여줘...
오늘은 fetch를 건드렸는데 진짜 감을 못잡겠다. 난...
진짜 자괴감 몽땅 든 하루...
Browser
브라우저는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용소프트웨어
브라우저는 HTTP 사용자 에이전트의 하나.
웹 브라우저는 웹페이지를 가져오기 위해 대부분의 웹 서버가 사용하는
HTTP(hyper-text transfer protocol)로 통신
+)자바스크립트 css,html코드 작성하면 브라우저는 이를 해독하고 컴퓨터에 바이너리 데이터를 제공하고 다시 컴퓨터가 브라우저를 통해 데이터를 주고 이를 다시 브라우저는 해독해서 화면에 보이게하는…
Ex)크롬, 사파리, 파폭 등등
Server
클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다.
클라이언트-서버 시스템은 서비스를 요청하는 클라이언트와 클라이언트의 요청을 처리하는 서버와의 협동작업을 통해서 사용자가 원하는 결과를 얻는 처리방식
+) 웹 서비스는 client, server, DB로 이루어져있고 클라이언트는 유저가 보는 부분을 담당 서버는 클라이언트 요청이 오면 리소스를 db에서 꺼내서 제공하는 역할.
API(Application Programming Interface)
응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
서버의 리소스를 클라이언트에서 쉽게 사용할 수 있도록 마련해둔 인터페이스
인터페이스? 사용자가 기기를 쉽게 동작 시키는데 도움을 주는 시스템을 의미. 사람과 컴퓨터를 연결해주는 장치, 수단
+)서버에서는 클라이언트가 DB에 있는 리소스를 잘 활용할 수 있도록 어떠한. 인터페이스를 제공해 주어야 한다. 그것이 바로 API. 서버자원을 잘 사용할 수 있도록 해주는 인터페이스.
클라이언트에서
GET message 요청 - 메세지 전달
POST message요청 - 메세지 저장
HTTP
WWW상에서 정보를 주고받을 수 있는 프로토콜. 주로 HTML문서를 주고 받는데 사용된다.
클라이언트와 서버사이에 이루어지는 요청/응답 프로토콜
HTTP로 전달되는 자료는 http: 시작하는 URL(인터넷 주소)로 조회 할 수 있음
+) 클라이언트 요청을 하면 서버는 응답 (요청을 무시하면 에러)
구성 = 헤더와 바디
Request
헤더 - 어디서 보냈는지, 컨텐츠 타입은 무엇인지, 어떤 클라이언트를 이용해 보냈는지 등등
바디 - 있을때도 없을 때도 있는데
- 속성
- stateless - http의 각 요청은 모두 독립적이다. 매 요청이 독립적이기 때문에 state라는 것이 없다. 문맥이 없다.보완하기 위해서는 인증이라는 것을 요청해야함.
- Connectionless - 응답이후에는 연결이 끊기기 떄문에, 더이상 응답할 수 없다.
- Method
Get - 서버에 자원을 요청
POST - 서버에 자원을 생성
PUT - 서버의 자원을 수정
DELTE - 서버이 자원을 제거
Ajax(Asynchronous JavaScript and Xml)
비동기적인 웹 어플리케이션의 제작을 위해… 동적 렌더링 함.
Ajax자체가 하나의 특정한 기술을 말하는 것이 아니라 함께 사용하는 기술의 묶음을 지칭하는 용어
+)필요한 부분만 랜더링 - dynamic web page
- 서버와 자유롭게 통신 -> XMLHttpRequest(XHR)의 등장
- 페이지 깜빡임 없이 seamless하게 작동 -> javaScript와 Dom 이용
위 둘을 합쳐서 AJAX라는 개념이 등장하였다.
보다 쓰기 쉬운 표준API를 만들자 -> fetch API
Fetch get요청… 등등
fetch는 서버자원을 가져오기위해서 사용하는 메소드이다.
XMLHttpRequest - 가독성이 좋지 않고 로우한 느낌,
제이쿼리 ajex - 가독성 좋지 않음
더 간단한것 원해!
Fetch - XMLHttpRequest와 비슷하나 강력하고 유연함
.then
.then
.catch
체이닝하는 방식(메소드 체이닝)
