많은 키워드와 이론들을 배웠다. 어릴 때부터 외우는거, 읽는거 딱히 좋아하지 않는데, 오늘은 그것들이 해일처럼 몰려와 덮쳤다. 공부하는 내내 집중을 제대로 하지 못했다. 나이는 들었지만 철은 들지 않았다.
우리가 사용하는 이 웹이라고 하는 공간에서 우리가 원하는 정보를 얻을 때 웹 뒷편에서는 과연 어떤일이 벌어질까? 평소에는 이런 것들에 대해 크게 생각을 해본적은 없지만, 공부를 하다보니 그 원리들이 참 궁금했다. 근원을 찾아가자면 컴퓨터의 작동방법에 대해서 부터 알아야 하겠지만, 천천히 위에서 부터 파내려간다는 생각으로 공부를 해보자.
1. 2-Tier Architecture
먼저 우리가 검색엔진사이트에서 검색을 한다고 가정하면 우리는 유저가 되고 눈으로 보여지는 사이트는 클라이언트가 되며 사이트가 보여주는 검색 결과의 데이터는 서버에서 가져 오는것이다. 이렇게 클라이언트 - 서버 를 분리하여 관리하는 것을 2-Tier Architecture라고 한다.
2-Tier Architecture가 필요한 이유는 무엇일까? 만약 서버와 클라이언트가 분리 되어있지 않고 하나로 합쳐진 사이트를 이용한다고 했을 때, 만약 새로운 정보들을 업데이트를 해야한다면, 사이트 자체를 다시 업데이트를 해야한다. 2-Tier Architecture에선 서버만 업데이트를 하면 훨씬 간편하게 운영을 할 수있다.
그럼 클라이언트와 서버간의 의사소통은 어떻게 이루어질까?
2. 프로토콜
프로토콜은 통신규약으로 일종의 약속이다. wather API를 사용했을 때 우린 JSON을 통한 stringify 와 parse를 이용해 정해진 형태로 변환하여 보내거나 그 형태로 받아 자바스크립트가 해석할 수 있는 언어로 변환 하였던걸 기억할 것이다. 이것 처럼 정해진 형태의 데이터를 주고 받는 것이 바로 프로토콜이며 우리가 쓰는 http도 프로토콜의 한 종류이다. 이러한 프로토콜은 또 쓰이는 범위에 따라 여러종류로 나뉜다 조금 더 포괄적인 프로토콜 부터 그것들을 이용해 만들어진 프로토콜들도 존재한다.
3. HTTP 요청 메소드
각 형태에 맞게 메소드를 사용하여 요청을 구분할 수 있다.
예를들면,
fetch(serverURL, {method: 'GET',})
.then(response => response.json())
.then(data => data);위와 같이 GET 키워드를 사용하여 서버에서 데이터를 받아 올 수 있으며,
fetch(app.server, {method: 'POST', body: {user: 'sangrae'}})
.then(response => response.json())위와 같이 POST를 이용해 제출도 가능하다. 이 외에도 여러가지 키워드들이 있다.
오늘 이러한 이론들을 통해 chatterBox라는 채팅앱을 구현해 보는것이었다. 서버에서 채팅로그를 받아와 HTML에 렌더링을하고 우리가 채팅을 치면 또 랜더링 되는 것과 동시에 서버에 POST를 하는 방식으로 구현을 해야하는데, 아직 익숙치 않아서 뭐가 어떻게 돌아가는지도 모르고 했다. 그래도 하다보니 조금 감이 와서 구현이 가능할 것 같아 보이지만, 아직 진행중이라 결과는 내일이 되어봐야 알 것 같다.
