intro
이 사진처럼 브라우저에 렌더링되는 저 콘텐츠목록들을 서버에서 불러올려면 어떻게 해야할까???
❓갑자기 왠 server?
프론트엔드의 영역 = 화면에 보이게 하는 영역
=> 그렇다면 "무엇"을 화면에 보이게할건데?
그것은 바로바로 DB에 있는 데이터들!!!
🤔만약 서버가 없다면?
어떻게든 만들 순 있겠다만.. 그것들이 만약 .html 파일에 다 들어간다면 그야말로 대환장파티아닐까싶다.
몇천줄이상의 html 코드속에서 수정이 필요한 데이터를 찾으려고 한다면.. 시간을 어마무시하게 잡아먹지 않을까?? 😱
👀그래서 어떻게 할건데?
서버와 브라우저(클라이언트) 사이에 오작교를 하나 만들고 DB를 가져오는 방법을 사용해야죠~!
❓ 통신은 어떻게해요?
통신의 흐름을 한단어로 표현하자면, REST API 이라 할 수 있다.
간단히 말하자면..
REST❓
1. HTTP url을 통해 자원(=resource, 여기서 내가 필요한 컨텐츠리스트들)을 명시하고,
2. HTTP Method(CRUD = post / get / put / delete ...) 를 통해
3. CRUD operation을 적용하는 것!
API❓
“API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스"
=> 그냥 한마디로 서로 티키타카 할 수있게 정해논 Rules 이라 생각하면 될 거 같다.
근데 여기서 나는 쏘쿨한 백엔드개발자님이 안계셔서 JSON-SERVER을 이용하여 프로젝트를 진행하니까... fetch를 통해 CRUD만 하면 될것 같다!
❓오작교역할을 해주는 친구들
크게 통신은 동기(sync)와 비동기(async)로 나뉜다.
여기서 data.json을 통해서 통신을 하는 방법이 비동기통신인데... 여기서 AJAX가 어쩌고...또 AXIOS가 저쩌고..FETCH랑 XML이 이러쿵... CRUD가 저러쿵... 콜백지옥이 요랬다.... Promise가 저랬다... 뭔가 글들이 10000만줄 될 거같으니까 저런 상세 개념에 대해선 따로 글들을 써야 할 것 같다... (하..귀찮다)
결국 지금 상황에서는, 간단히 말해서 fetch api를 통해 내가 원하는 곳에다가 넣고 빼고 수정하고 삭제하고. 즉, 씹고 뜯고 맛보고 즐길수있게 서버와 브라우저에게 큐피트역할만 해주면 된다는 것!
❓fetch
Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있습니다.
(출처: https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)
한마디로 fetch라는 메서드를 사용해서, 자바스크립트를 이용해서 HTTP와의 파이프라인을 구.축.한.다는것!
👉apply
요것들을..
요로케 특정 element위치 아래다 끼워넣기 해달라고 한다음..
요로케 요청을 샤랴략 한다면..!!
쨔란~~~ 잘불러와진것들을 볼 수 있다.
