20210114(목)

2021-01-14

1. 학습 날짜

• 2020-01-14

2. 학습 시간

• 11:30 ~ 13:00, 14:00 ~ 18:00, 20:00 ~ 21:00

3. 학습 범위 및 주제

• websocket

4. 학습 목표

• websocket에 대해 알아보기

5. 학습 정리

• x

6. 상세 학습 내용

Websocket

• 웹소켓은 HTTP와 같은 하나의 프로토콜이다.

• 웹소켓이 나오게된 역사적 배경을 먼저 이해하자.

• 태초에 HTTP 프로토콜이 있었다. 이 프로토콜은 누구나 알겠지만 매우 성공한 프로토콜이다.

• 하지만 시간이 흐르면서 이 프로토콜도 약점이 있다는게 발견이 되었는데....

• HTTP프로토콜은 클라이언트가 서버로 먼저 요청을 보내야지만 서버가 응답을 할 수 있는 구조(서버가 먼저 클라이언트한테 요청을 보낼 수 없다. 즉 일방적인 관계)

• 단순한 요청이었는데도 불구하고 페이지 전체를 리로드 해야하는 문제가 있었다.

• 단순한 요청이었는데 페이지 전체가 리로드되면 클라이언트나 서버나 둘 모두에게 부하가 발생하게 된다.

• 따라서 이 문제를 해결하고나 나온게 AJAX.

• AJAX는 프로토콜은 아니고 기술이다.

• 이 기술은 자바스크립트의 기능을 활용해서 구현되는데, HTML의 돔 요소를 동적으로 수정 하는 것이다.

• 동적으로 DOM 요소가 변경되면 웹브라우저는 페이지 전체를 리로드 하는게 아닌 수정된 부분만 렌더링을 하게 된다.

• 이로써 두 번째 문제인 전체 리로드 문제를 해결했다. 이번에는 첫 번쨰 문제를 해결해 보자.

• 만약 서버가 먼저 클라이언트한테 요청을 보낼 수 있다면, 즉 쌍방향 통신이 가능하게 된다면 어떤 이점이 생기는지 생각해보자.

• 페이스북을 생각해보자. 로그인을하면 오른쪽에 친구들의 상태가 보인다. 이 상태는 실시간으로 변경 된다.

  • 클라이언트가 이를 요청했는가? 아니다 서버가 다른 유저들의 세션 상태를 보고 서버에서 이를 갱신한다음에 클라이언트한테 이 데이터를 전송하는 것이다.

  • 즉 쌍방향 통신이 가능하게 됨으로써 실시간으로 무엇인가를 클라이언트가 요청하지 않고도 알 수 있게 된 것.

• 이게 바로 웹소켓의 대표적인 예다.

• 즉 웹소켓은 브라우저(클라이언트)와 서버 간의 양방향 통신을 가능하게 해줌으로써 일방적인 관계만을 갖고 있는 HTTP를 보완할 수 있게 되었다.

  • 웹소켓은 HTTP 위에서 동작한다.

• 또한 웹소켓은 오버헤드가 적어서 속도 또한 빠르다.

7. 오늘 학습 내용에 대한 개인적인 총평

• 항상 공부를 많이 못한다고 핑계를 대는데.. 요즘은 정말로 공부를 안한다. 반성하자.

8. 다음 학습 계획

• 액션 케이블

• 메신저 프로그램 작성해보기