Client-Server and Browser, HTTP, 채터박스 구현하기

<Client-server and browser, 클라이언트와 서버, 그리고 브라우저의 관계>

- 클라이언트는 '유저가 보는 부분'을 담당한다. 사용자 입력, 또는 서버에 대한 응답을 화면에 표시하는 역할이다.

- 서버는 리소스를 제공(serve)하는 컴퓨터로, 다수의 클라이언트 컴퓨터의 요청을 받아 그에 대한 응답을 하는 역할을 한다.

- 브라우저는 html, js, css 등으로 작성된 코드를 내장 엔진(e.g. v8)로 해독하여, 컴퓨터에 바이너리 데이터로 넘겨준다. 컴퓨터가 처리한 바이너리 데이터를 브라우저는 화면에 다시 출력하는 역할을 한다.

 

 

<HTTP(HyperText Transfer Protocol)>

- 클라이언트가 서버와 통신하기 위한 규약이다.

- HTTP의 두 가지 속성으로 stateless와 connectionless가 있다.

- stateless: HTTP의 각 요청은 모두 독립적이다. 때문에, HTTP로 이루어진 요청에는 어떤 정해진 state가 없다.

- connectionless: 클라이언트가 보낸 한 번의 요청에 대해 서버는 단 한 번의 응답만을 한다. 서버가 응답을 한 후에는 클라이언트와의 연결이 끊기기 때문에, 더 이상 응답을 할 수 없다.

- HTTP에는 네 개의 메소드가 있다. 서버에 자원을 요청하는 GET, 서버에 자원을 생성하는 POST, 서버의 자원을 수정하는 PUT, 서버의 자원을 제거하는 DELETE

 

 

 

 

---

 

 fetch API를 이용해 간단한 채터 박스를 구현하며 클라이언트 사이드가 어떻게 돌아가는지 실습해 보고 있다. 예전에 만들었던 트위틀러의 경우 브라우저를 refresh하면 작성한 메시지가 전부 사라지는 한계가 있었다. 그때는 서버에 대한 공부를 하기 전이라, local storage(참고: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/)를 이용할 수밖에 없었다. local storage 덕에 메시지는 저장해 둘 수 있었지만, 작성한 메시지는 작성자의 컴퓨터에서만 볼 수 있다는 한계를 끝끝내 넘지 못했다. 그 때 느낀 아쉬움 탓에 서버에서 데이터를 불러오고, 또 데이터를 전송하는 과정을 더욱 재미있게 배우고 있는 것 같다.