[ TIL ] 2022-06-18

Tips

https://reqres.in/

• dummy data로 api 통신 연습할 수 있는 사이트

CSS

• object-fit
  이미지 크기 맞추는 속성
  MDN - object-fit

React

• 함수형 컴포넌트 ❌ 함수 컴포넌트 ⭕️

  리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요? (참고)
  원래 리액트 측에서는 함수형 컴포넌트 라는 단어를 사용했습니다. 하지만 이러한 네이밍이 함수형 프로그래밍 과 비슷했고, 충분히 혼란을 야기할 수 있었습니다. 처음 리액트의 함수형 컴포넌트를 배우는 입장에서는 '함수형 컴포넌트를 사용하면 함수형 프로그래밍이 가능해진다'와 같은 혼란을 느낄 수 있었기 때문입니다.
  그러나 우리가 리액트에서 사용하는 함수 컴포넌트 는 훅(hook)이 들어가고, 이 훅으로 사이드 이펙트 를 빈번히 일으키기 때문에 함수형 프로그래밍이라고 볼 수 없습니다. 함수형 프로그래밍은 순수 함수를 지향하는데, 사이드 이펙트를 빈번히 일으키는 리액트의 함수 컴포넌트가 함수형 컴포넌트로 보기는 어렵다는 것입니다.
  2018년 이후 리액트 측에서도 함수형 컴포넌트 가 아닌 함수 컴포넌트 로 이름을 다시 정했습니다.

WebSocket의 개념

• HTTP 환경에서 클라이언트와 서버 사이에 하나의 TCP 연결을 통해, 실시간 양방향 통신 지원
• 채팅과 같은 연속적이고 잦은 통신에 대해 유사한 통신을 반복하지 않도록, 연결되어 있는 것
• 새로고침이나 창 닫기 등의 이벤트 발생 시 웹 소켓 연결은 끊어진다

HTTP 와 웹 소켓의 차이

• 웹 소켓은 HTTP 와 달리, 요청-응답이 아닌 '서로 데이터를 주고 받는 형식'이다
• HTTP 통신은 여러 개의 URL 을 사용하지만, 웹 소켓은 초기 연결을 위한 하나의 URL 만 존재, 초기에 연결된 TCP 연결로만 통신한다

참고 - 모던 자바스크립트 웹 소켓
참고 - 웹 소켓에 대해 알아보자 - 이론 편
참고 - React, TypeScript 웹 소켓 실습