Socket.io

실시간 통신을 가능케하는 웹소캣을 쉽게 사용할 수 있도록 돕는 라이브러리.

애초에 HTTP 프로토콜은 TCP처럼 연결이라는 개념이 존재하지 않는다. 흔히 상태가 없는, stateless라는 특징이 대표적인 예시이다. client와 server가 한번 요청-응답을 받으면 그걸로 끝이다. 따라서 HTTP에서 연결을 유지하는 것처럼 구현하기 위해선 polling 등의 제법 비효율적인 방법을 사용했다. 하지만 2011년부터 HTML5에 웹소캣이 표준으로 등장하면서, 효율적이고 쉽게 구현할 수 있게 되었다. 이러한 웹소캣을 사용할 수 있게 돕는 여러 라이브러리중 가장 많이 알려져있는 것이 socket.io다.

socket.io를 구성하는 몇 가지 개념이 있다.

• event: 웹소캣도 모든 경우에 통신하는 것은 아니다. 전달되는 데이터를 선별적으로 처리할 수 있는데, 이를 이벤트로 구분하고 있다(마치 이름을 정하는 것과 같다). default로 존재하는 이벤트로 connect와 disconnect가 있다. 그 밖의 이벤트는 서버와 클라이언트가 합의해서 정할 수 있다. 예를 들어 채팅 메세지 이벤트라고 하면 chatMessage 라는 식으로 이름을 마음대로 정할 수 있는 것이다.
• emit: 이벤트를 발생시키는 메소드. emit 메소드의 첫 번째 인자로 이벤트가 들어가고, 두 번째 인자엔 전달하고자 하는 data가 들어간다.
• on: emit을 통해 발생한 이벤트를 처리하는 메소드.

글 끝에 "..." 넣기

게시판 같은 곳들을 보면, 특정 길이 이상의 글들은 ...으로 처리되어있는 경우가 많다. 간단한 클론코딩을 몇 번 하면서 이미 찾아본 내용이지만, 좀 더 확실히 기억해보고자 기록하기로 했다.

<div id="parent">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

#parent: {
  display: block;
  white-space: nowrap;	   // 한 줄로 텍스트 정렬.
  overflow: hidden; 	   // 부모 영역을 벗어난 컨텐츠는 숨김.
  text-overflow: ellipsis; // ... 으로 나타내기. 위 두 속성이 있어야함.
}