11/11[TIL]Web architecture

웹 아키텍처를 오늘 공부하기 이전에 구글링으로 어떤 것인지 찾아보았는데 오늘 내가 이해하고 강의에서 다룬 내용은 정말 빙산의 일각이라고 생각된다. 웹 아키텍처를 논하는 데 있어서 사전에 큰 틀을 차지하고 있는 어떤 서버 프레임 워크들이 존재했는지 보았는데 정말 초기의 프레임 워크들은 이름을 한 번도 들어보지 못한 것들이 수두룩 했고 한 참 내 눈을 최근 프레임 워크 들로 돌렸을 때에 spring, django 등 이 것도 엄청 초기 버전이 눈에 들어왔다. 뭔가 웹 아키텍처를 공부하는데 구글링을 하면서 점점 Deep 하게 들어가게 되는... 구글링을 하게 되면 생기는 어쩔 수 없는 결과 같다.

 

웹 아키텍처는 웹 내에 내 / 외부의 구성 요소 간에 관계와 상호작용을 패턴화 한 것으로 오늘 배운 내용으로 보면 클라이언트와 서버 간의 상호작용하는 방식을 중점으로 패턴화 해 정의한 것이라고 이해하면 될 것 같다.

 

웹 아키텍쳐에는 많은 부분의 용어들이 존재하기 때문에 간단하게 이해하여야겠다. 추후에 보충하도록 해야겠지만...

 

출처 : https://slides.com/codestates/introweb-architecture#/16

 

○  Api 는 프로그래밍이 되어 있는 애플리케이션과 의사소통 가능한 매개체로 서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 인터페이스이며 메뉴판이라고 생각하면 될 것이다.

get / message : 메시지 전달한다.

post / message : 메세지 저장한다.

 

○ Ui는 유저와 의사소통 가능한 매개체이다.

 

○ 브라우저는 html, js, css로 작성한 코드를 컴퓨터가 알 수 있게 한다.

 

○ 서버는 자원을 제공하는 주체이다.

 

○ HTTP는 클라이언트와 서버가 통신할 때 사용하는 규칙/규약이다. tcp/ip의 계층의 여러 가지 부분 중 상위 부분이라고 이해하면 된다.

 

- 작동방식

항상 요청과 응답으로 이루어진다. 만약 해당 요청에 관련한 내용이 없을 때에는 없다고 내용을 아예 보내지 않는 것이 아니라 없다는 응답을 보낸다 즉, 항상 클라이언트에 응답을 보내주어야 함

 

- 구성

HTTP 요청은 헤더와 바디를 가진다.

헤더는 어디서 보내는지 / 콘텐츠 타입은? / 어떤 클라이언트(브라우저)를 이용했는가? 등이 있고

바디는 서버에 데이터를 보내기 위한 공간이며… 없을 수 도 있다.

HTTP 응답 또한 헤더와 바디를 가진다.

 

- 속성

Stateless → HTTP의 요청은 모두 독립적이다. 매 요청은 독립적이기에 state라는 것이 없다 즉, 앞서 말한 요청은 영향을 끼치지 않는다 해당 요청만 생각한다.

Connectionless → 한 번에 요청에는 한 번의 응답… 응답을 하는 순간 이 연결은 종료 즉 1:1이라고 생각하면 된다.

 

- 메서드

Get 서버에 자원 요청

Post 서버에 자원 생성(메시지 생성)

Put 서버에 자원 수정(프로필 업데이트)

Delete 서버에 자원을 제거

 

○ AJAX

서버와 자유롭게 통신할 수 있고(XHR) 페이지 깜빡임 없이 작동(js와 DOM 이용)하는 web app 등장 이것을 AJAX라고 한다.

 

사용해왔던 순서 => XHR → jQuery사용 → fetch API 사용(표준 api)

 

하지만 XHR를 사용하지 않는 것은 아니다 XHR과 fetch 둘 다 장단점이 있기 때문에 차이점을 확인한 후 사용하는 것이 좋다.

 

가장 최근 도입되어 사용되고 있는 Fetch는 어떤 것(서버 자원)을 가져오는 function이며 promise 객체를 리턴한다.

 

 

 

이번 스프린트 간에 DOM을 사용하게 될 것 같은데 시간을 투자해 다시 공부를 좀 해보아야 할 것 같다... 잘 기억이 안 난다는...