바닐라코딩

8주차 강의 Web Basic & Asynchronous Java Script

단점이없어지고싶은개발자 2021. 9. 4. 16:20
반응형

서버와 클라이언트는 웹에서 가장 자주 등장하는 단어들이다

 

 

Sever === Backend

Sever Side = Backend

Sever Side Developer = Backend Developer

 

Server란 서빙을 하는 주체이고, client란 고객입니다.

마치 레스토랑에 방문한 손님과 웨이터의 관계와 유사하다고 보면 된다.

 

  1. 자리에 앉으면 웨이터가 주문을 받는다
  2. 음식이 나오기까지 기다린다
  3. 음식이 나오면 식사를 한다
  4. 다 먹고 결제를 한다

 

웹도 같다. 서버란 어떤 정보를 관리하고 제공하는 쪽이고,

클라이언트는 해당 정보를 주문한 쪽이다

 

Server = 네트워크상에서 어떠한 자료 또는 서비스에 대한 접근을 관리하는 컴퓨터

 

네트워크에 연결되면 ip 주소를 부여 받게 된다.

다른 컴퓨터들이 해당 주소로 방문할 수 있다.

IP address (Internet Protocol Address)

 

쉽게 말해 네트워크 상의 컴퓨터마다 할당되는 주소를 IP 주소라고 한다

 

Domain

흔히 IP주소는 숫자들의 조합이다.

 

도메인은 주소지라고 생각하면 좋다. 

 

어떤 홈페이지에 들어갈 때, 홈페이지 html 이 있어야 하는데, 그 파일이 

인터넷 어딘가에 위치해 있고 언제든지 그 파일에 접근할 수 있다.

 

그럼 브라우저는 서버의 위츠를 어떻게 알까? 

도메인의 IP주소를 찾아주는 역할을 하는 시스템이 바로 DNS다

 

 

10-2 Client & Server Communication

 

뭔가 주문을 받는다면 형식에 맞게 주문을 받는다

만약 그 형식이 다 다르다면 주문을 받지 못할 것이다. 

 

그런 형식에 맞게 서버에서 통신을 주고 받는게 

HyperText Transfer Protocol (HTTP)다.

 

 

HTTP 구성

 

HTTP 통신에는 두 가지 종류가 있다

 

  1. 클라이언트가 서버에게 주문을 넣을 때 사용하는 HTTP 요청
  2. 주문에 따라 서버가 클라이언트에게 답변할때 사용하는 HTTP응답

 

모든 HTTP통신은 제목,Header,Body를 가질 수 있다.

 


Asynchronous Javascript

11-1 Ordering At Mcdonalds

 

비동기를 할 수 있어야 자바스크리브를 할 수 있다.

 

프로토타입, 클로져 등과 마찬가지로 중요한 개념이다

 

비유 - 맥도날드를 생각하면

 

Async Ordering System

  1. 주문을 하기 위해 계산대에 줄을 선다
  2. 순서를 기다린다
  3. 순서가 되면 음식을 주문한다
  4. 주문 번호를 받고 자리에 앉아 음식이 나오기를 기다린다
  5. 우리 뒤에 줄 서있던 사람들이 순서대로 음식을 주문한다
  6. 주문한 음식이 완료되면 번호가 호출되면 음식을 가져간다. 

 

Sync Ordering System

  1. 주문을 하기 위해 계산대에 줄을 선다
  2. 순서를 기다린다
  3. 순서가 되면 음식을 주문한다
  4. 음식이 나올때까지 줄에서 비키지 않고 계산대에서 대기
  5. 음식이 나오면 가지고 나와 자리로 간다
  6. 우리 뒤에 줄 서 있던 사람들이 순서대로 음식을 주문한다 

비동기는 예약걸고 나오는 것이고,

동기는 내 뒤로 아무것도 못한다 

 

비동기 함수를 알고 있고 사용을 해야 비동기처리를 쓸 수 있따

 

예)set timeout, fetch

Fetch 는 비동기, 완료되면 res가 이뤄진다.

서버에 주문을 넣고, 줄에 빠지고, 다 실행하고, 나중에 마지막에 화살표 함수가 이뤄진다

 

중요중요중요중요중요

 

1. 보통 코드는 콜스택에 쌓이고, 순서대로 진행된다.

2. callBack Queue는 함수 대기줄이다 코드는 위에서 아래로 실행되는데, 함수들은 Queue에서 기다리고 있다.

3. 콜스택에 쌓인 코드가 끝이 나면 대기한다.

4. Event Loop가 콜스택이 대기 상태이면 그 때 함수 큐에서 하나씩 스택으로 넘겨준다.

5. 콜스택이 들어온 큐의 함수를 작동시킨다.

6. 큐의 함수가 없을 때까지 진행한다.

 

여기서 중요한 점은 콜스택이 끝나지 않으면 큐는 계속해서 대기상태다. 만약 

Settimeout으로 1초의 시간 뒤에 작동하게 해놓더라도, 콜스택에 어마어마하게 쌓여있다면, 그게 끝나지 않는 이상 계속 대기 상태로 유지한다!! 그래서 한 번 꼬이면 웹사이트에서 안보이기도하고, 문제점이 발생하기도 한다.

반응형

'바닐라코딩' 카테고리의 다른 글

8주차 과제 - 콜백함수란 무엇인가  (0) 2021.09.12
7주차 과제  (0) 2021.09.05
6주차 과제 - prototype과 Component  (0) 2021.08.29
7주차 강의 클로저와 재귀  (0) 2021.08.29
4주차 강의 this  (0) 2021.08.11