Section 4 - Summary

 

제로초님 강의보면서 그냥 공부 및 정리한거 적어봤어보는 거예요 ~ 

Web Socket 나오기 전에는 롱 폴링같은 방식을 통해 채팅같은 기능을 구현했다고 합니다. 

https://ko.javascript.info/long-polling

롱 폴링

 

그래서 적어보는 Regular Pollingr과 Long Polling의 차이

 

Regular Polling은 10초에 한 번씩 서버에 “안녕하세요. 저 클라이언트인데 새로운 정보 줄거 있나요?” 라고 요청을 보내는 식이고 그것에 대해서, 서버는 스스로 해당 클라이언트가 온라인으로 인지를 시키고 그 순간까지 수신한 메세지를 보내줍니다. 

 

괜찮은 방식이지만 부정적인면도 있습니다.

1. 메세지 요청 사이마다 10초까지 딜레이가 발생할 수 있습니다.
2. 유저가 다른 곳으로 페이지를 스위치 하거나 부재중, 혹은 메세지가 없어도 서버는 10초마다 요청을 보냅니다. 성능적으로 이야기를 하자면 다루기 꽤 까다롭습니다. 

서비스 규모가 작은 경우 폴링은 꽤 괜찮은 방식입니다. 하지만 일반적인 경우엔 개선이 필요합니다.

 

롱 폴링(long polling)은 일반 폴링보단 더 나은 방식입니다.

롱 폴링은 폴링과 마찬가지로 구현이 쉬운데, 지연 없이 메시지를 전달한다는 차이가 있습니다.

1. 서버에 요청이 전송된다.
2. 서버는 보낼 메세지가 있을때까지 연결을 끊지 않습니다.
3. 메세지가 생겼을때, 해당 요청과함께 응답합니다. 
4. 브라우저는 즉시 새로운 요청을 바로 만듭니다.

만약 네트워크 에러같은 이유로 연결이 끊어지면 브라우저는 새로요청을 즉시 보냅니다.

 

---

Socket IO 

기본적인 메소드 역할

 

Login 성공 시 emit을 통해 서버에 'login'했음을 이벤트에 명시하면서 날리면서, 유저 데이터를 같이 전달해준다. 이로써 서버에서는 해당 클라이언트가 로그인했다는 것을 확인하고, 모든 서버에 해당 유저가 온라인임을 인지.

workspace에서 벗어나 Component가 unmount될때, disconnect를 통해 연결을 끊어준다. 

 

on을 통해 서버로부터 데이터를 받고, clean-up을 통해 반드시 Off를 실행해서 이벤트를 꺼주어야한다. offf를 통해 이벤트를 비호라성화 시켜주지않으면 만약 on이  n번 실행되었을 경우 서버에서 해당 이벤트를 한번 보내줬을 시에 클라이언트에서 데이터를 n번 받게 된다. 

통신 방식이 기본적으로 HTTP 폴링으로 되어있기 때문에 옵션에서 websocket으로 바꿔줄 수 있다. 

Socket 객체속 프로퍼티들

• acks : emit()에서 마지막 인자로 넘겨줄 수 있는데, 다른 한쪽에서 해당 이벤트를 받게되면 호출이 되게됩니다.
• connected, disconnected : 연결 상태를 알려줍니다. 
• nsp : 네임 스페이스
• _callbacks : on으로 호출된 이벤트들이 들어있는 것을 확인할 수 있다. 
• receiveBuffer : 연결이 끊긴동안 받았어야할 데이터들을 미리 쌓아놓는다.
• sendBuffer : 연결이 끊긴동안 전송했어야할 데이터들을 쌓아놓는다.

---

스크롤바 관련 라이브러리 

 

지금 처음 회사들어가서도 계속 느끼는데, 모든 기능 관련해서 라이브러리가 정말 많다. 사실상 직접 개발해서 사용하는거는 거의없는건가 제로초 강의보면서도 계속 처음보는 라이브러리를 사용하게 되더이다. 메소드는 정말 많지만, 이정도의 어트리뷰트만 사용하면 충분한거 같았다. onScroll에서는 추후에 과거 메세지를 가져오는 용도로 사용한다고 한당...

 

https://www.npmjs.com/package/react-custom-scrollbars

react-custom-scrollbars

---

멘션 라이브러리 

 

이 라이브러리가 제일 신기했다. 이런 기능또한 라이브러리로 구현한다늬 . . . 일단 인풋에 해당되는 Wrapper로 감싸주고, 그 안에 Metion이라는 children component에서 실질적으로 작동을 한다. 여기서 renderSuggestion이란 어트리뷰트안에는 

멘션 제안들을 어떻게 렌더해서 보여줄지 커스터마이징을 할 수 있는 기능이다. 이런식으로 사용을 했다. 슬리액트에서는.. 

https://www.npmjs.com/package/react-mentions

react-mentions

---

문자열 정규화 라이브러리

regexifyString()이라는 메소드안에서, 패턴에 걸리는 input이 발견되면, decorator에서 그 안에 또 정규식을 통해 원하는 문자열을 찾은다음에, 저렇게 조건을 걸어서 원하는 요소를 렌더링할 수 있다. 정규식은 일단 간지가 겁나나는거 같다. 곧 배우러 가야겠다. 아직 아무것도 모르니까 따라쓰기 급급했다. 

https://www.npmjs.com/package/regexify-string

regexify-string