Client - server - Data Base - client
서버는 처리를 하는 곳이고, db는 저장하는 곳이다.
client가 요청을 하면 server 는 그 주문을 받게 되고 data base에서 데이터를 추출해서 client 에게 데이터를 제공한다.
client의 컴퓨터를 켜서 브라우저에 연결
Browser의 역할
컴퓨터는 2진수만 알아듣게 되어있다. 예를들면 1010이라는 binary data만 읽을수 있는데 어떻게 HTML, CSS를 읽을수 있는 것일까? 그 답은 브라우저의 역할 덕분이다. JS, CSS, HTML을 해석하는 엔진이 브라우저에 존재한다. 브라우저는 컴퓨터에 넘겨주고 그 결과를 크롬창에 보여준다 .
브라우저는 어떻게 동작하는가?
브라우저의 주요 구성요소
1. 사용자 인터페이스
2.브라우저 엔진
3.렌더링 엔진
4.통신
5.UI 백엔드
6.자바스크립트 해석기
7.자료 저장소
API
서버의 리소스를 틀라이언트에서 사용할수 있도록 만든 인터페이스
메뉴판이라고 생각을 해보자
클라이언트는 서버가 뭘 줄수 있는지 몰라서 서버가 만들어놓은것이 API라고 한다.
server의 데이터를 잘 가져다 쓸수 있는 역할을 해준다. 예시) 메뉴판
server에서 api를 제공해줘야지 database에서 제대로된 db를 가져올수 있다.
get 메세지 전달
post 메세지 저장
http
서버와 클라이언트 사이에서
물건을 발주할때 견적서나 양식을 써서 발주 하게 된다.
header 와 body를 갖춰서 양식을 써내라
protocol? 규약, 규칙
클라이언트와 서버가 통신할때 사용하는 http
작동 방식 요청-> 응답 <- 클라이언트가 서버에 메세지를 달라고 하면 메세지를 전달하는 응답을 한다
구성
header: 어디서 보낸 요청인지, 컨텐츠 타입은 무엇인지, 어떤 클라이언트를 이용해서 보냈는지
body: 각 메소드
속성
1.stateless: 매번 보내는 요청이 독립적이기 때문에 문맥이라는 것이 존재하지 않는다
2.connectionless: 요청 - 응답, 한번의 요청에는 한번의 응답을 하게 된다
메소드
Get:서버에 자원 요청
Post: 서버에 자원을 생성
Put: 서버 자원 수정
Delete: 서버 자원 제거
Ajax
fetch API
fetch를 사용하는 이유는 서버의 자원을 가져오기 위해서이다.
클라이언트 -> 요청을 보냄 (fetch) => 서버는 클라이언트에게 리소스를 보내줌
자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고 받는 기술이다
동적 렌더링--> 사이트에서 작은 클릭부분만 바뀌는 것. 작은 화면?
정적렌더링: 화면깜빡임이 일어나면서 새로운 페이지가 렌더링 되는 것,
동적렌더링 : 필요한 일부분만 렌더링 되는것
Method chaining
객체를 연결고리로 함수를 지속적으로 호출
객체를 return 하는 메소드에 바로 메소드를 또 붙여주는 방법
let arr =[1, 2, 3, 4, 5];
//홀수 중 3보다 작은 수를 구하고 싶다
let oddNumberUnder3 = array.filter(function(num){return num%2}).filter(function(num){return num<3})
//[1]