Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

coding etude

201006 [Client / Server] 본문

Javascript TIL

201006 [Client / Server]

코코리니 2020. 10. 6. 22:11

이것저것 바빠서 또 .. 오랜만에 포스팅을.... (...유구무언.. 인간은 나약한 존재... )

 

오늘은 클라이언트와 서버에 대해서 이야기 해볼까 한다.

 

클라이언트란 무엇일까?

사전적 의미는 고객라이는 뜻으로 사용자 정도로 해석하면 될 것 같다.

 

그렇다면 서버??

사전적 의미는 제공하는 사람 or 제공자 이다.

 

그럼 클라이언트의 종류는 어떤것이 있을까? 

사실 클라이언트의 종류는 굉장히 다양하다  컴퓨터/ 모바일/ 브라우져 등등 서버에 요청을 보내고 그 결과를 사용자에게 전달해서 보여주는 기기 또는 프로그램을 모두 통칭하는 말이다.

 

자 그럼 우리는 이 시점에서 서버와 클라이언트의 상관 관계도를 그려보아야 한다. 

보통 서버라고 하면 

위의 사진과 같은 모습을 상상할 것 이다.. 생각하는것이 맞다........ㅋ

 

하지만 여기서 중요한 점은 서버는 컴퓨터이고 임시저장 기능은 있지만 DB(data base) 와는 다른기능을 하는 컴퓨터라고 생각하면 된다.  

클라이언트/서버/DB 의 관계도

위와 같은 형식의 관계도를 그릴 수 있다.

(서버와 DB는 클라이언트와 마찬가지로 컴퓨터 이다. 하지만 서버는 데이터의 처리를 담당하고 DB는 데이터의 저장을 주 기능으로 한다고 생각하면 된다.)

 

자!! 이제 클라이언트와 서버가 무엇인지 알았다. 그럼 대체 클라이언트와 서버는 어떻게 어떤 방식으로 연결되어 있을까??

 

일단 서버와 클라언트 사이에는 브라우져(browser)/ 규칙(http) 있다. 한번 알아보자.

 

우리가 인터넷을 사용하면서 어떻게 원하는것을 화면에서 볼수 있을까??(컴퓨터의 데이터는 모두 2진수로 되어 있는데..)

그것을 가능하게 해주는것이 바로 browser 이다. 컴퓨터에서 browser 를 통해서 서버에 요청을 하면 응답을 받는데 다시 browser 가 그 요청을 우리가 볼 수 있는 화면으로 변화시켜서 출력해 주는 것이다.

browser의 기능

그럼 이제 클라이언트와 서버와의 통신 규칙을 살펴보자. 

보통 인터넷 주소창을 적을때 http:// or https:// 등등등등.. 다양한 데이터 전송 규약이 존재한다.

http(hyper-text transfer protocol) 란 뜻 그대로 hyper-text를 전송하는 규약 이라는 뜻이다.

( hyper-text의 뜻 : https://terms.naver.com/entry.nhn?docId=1200583&ref=y&cid=40942&categoryId=32828 )

http를 이용한 서버통신은 header 와 body로 이루어져있고 header 에는 데이터 요청과 응답의 기본적인 정보를 담고 있고있다. 누가/어디서/어떻게/어떤 방식으로/ 등등의 기록이 적혀있고 이 header를 통해 서버에서 데이터를 어떤형식으로 처리할지(응답과 거부)를 결정하기 때문에 항상 존재한다.

하지만, 항상 body가 존재하는것은 아니다. http의 메소드에 따라 body의 존재 여부가 결정된다.

 

※ http method

GET / POST / PUT / DELETE 4가지의 대표적인 method 이다. (항상 대문자의 string 타입으로 작성해야한다.)

 

GET : 서버에 자원을 요청.

POST: 서버에 자원을 생성.

PUT: 서버에 자원을 수정.

DELETE: 서버에 자원을 삭제.

 

http에는 두가지의 속성이 있다.

1. stateless : 모든 요청과 응답은 독립적으로 이루어 진다.

2. connectionless : 한번의 요청에 응답은 무조건 한번만 이루어진다.

(독립적이라는 말은 요청과 응답의 지속성이 없다는 말.. 티키타가가 안된다고 해야할까?

ex) 밥먹으러 갈래? -> 그래 / 뭐먹을까? -> 님 지금 무슨말??// 예시와 같이 서버에는 state(상태)가 없기 때문에 독립적으로 하나응답이 끝나면 그 기억은 지워진다. 내 머리 속 지우개 마냥...)

(마찬가지로 connectionless 는 한번의 요청과 한번의 응답이 있으면 연결이 끊어진다는 것..!! 그래서 응답이 두번 갈수가 없다.)

※ 잘 기억 해두자.

 

지금까지 클라이언트와 서버에 대해서 알아봤다. 그럼 이제 클라이언트에서 어떤식으로 서버에 요청하는지, 서버에서는 어떻게 클라이언트에 응답을 주는지 조금 더 상세히 알아보자.

 

우선 클라이언트에서는 Ajax(Asyncronous javascript and xml)를 이용하여 서버에 요청을 보냈다. 하지만 이 방법은 사용하기 복잡했고 그래서 jquery 를 이용하여 서버에 요청을 보냈다. 하지만 이것 보다더 단순한 것을 원했고 그래서 나온것이 fetch API 이다.

$.get('/', function(){}) // jquery 방식

fetch('/').then() // fetch 방식

API(application programming interface) 는 서버에서 지정한 프로그래밍을 위한 interface 이다. 

쉽게 설명해서 서버에서 사용 가능한 목록들을 정리해 놓은 것, 즉, 메뉴판 같은 것이다. 

UI를 통해 서버가 정해준 API 대로 요청을 보냐면 그 주문서를 보고 서버가 클라이언트에 내용을 보내주는 것이다.

 

그래서 서버에서는 API를 지정해 줘야하고 클라이언트에서는 그 API에 따라서 요청을 해야한다. 커피숍에가서 삼겹살을 시키면 안되는것 처럼 서버가 원하는 것만(가능한 것만) 요청(주문) 해야 하는 것과 똑같은 것이다.

 

자! 지금까지 서버와 클라이언트 그리고 통신과 방법에 대해서 어느정도 알아 봤는데 여기서 실질적인 코딩 방법은 추후에 조금더 정확하게 기록하도록 하고 일단은 오늘 나오 기본 개념부터 잘 정리해서 기억해 두자!!

'Javascript TIL' 카테고리의 다른 글

201007 [commonJS & express]  (0) 2020.10.06
201006 [Server / node.js]  (0) 2020.10.06
200927 [동기 / 비동기 (synchronous / asynchronous)]  (0) 2020.09.27
200927 [parse / parsing / JSON / json()]  (0) 2020.09.27
200910 [Linked List]  (0) 2020.09.10