250102 TIL - any타입, Namespace 기초

any 타입

TypeScript에서 활용되는 개념으로, 동적인 데이터 유형을 뜻함!!
이리 말하면 뭔 말인가 싶을 테니 쉽게 표현해보자면, 
TypeScript에선 변수가 어떤 자료형을 담을 것인지 명시를 해주어야하는데,
개발 단계에선 정확히 어떤 타입을 할당하게 될지 확신이 서지 않는 경우가 왕왕 있다!

이런 때, 어떤 유형의 값이라도 일단 할당이 가능하도록 해주는 것이 any 타입인 거시다!!
현재 열공 중인 JavaScript엔 사실 모든 변수에 기본적으로 any 타입이 배정돼있는 셈!!
다만, any 타입의 활용은 최대한 자제하는 것이 좋다고 합니다?!
지금 JavaScript에서 무수히 겪고 있는 자동 형변환 또는 값 누락 등의 문제를

그대로 야기할 수 있기 때문이라고 추측됨!!

---

Namespace

하나의 소켓 연결을 용도에 맞게 분할해 이름을 지어주는 것!!

Express.js에서 라우터 별로 추가 경로를 지정해줬던 것과 유사한 방식으로 활용한다!!
아무것도 설정하지 않은 기본 네임스페이스의 경로는 "/"이고, RESTful API 방식처럼
식별하기 용이한 이름을 슬래시 옆에 추가해준다!! 자세한 건 아래의 예시에서 살펴볼 예정!!

• 용도에 맞는 이름이 담긴 추가 경로를 배정해줌으로써 코드 자체의 가독성도 올라가고, 유지보수도 수월해진다!!
• 또 네임스페이스 별로 서로 다른 이벤트 리스너를 등록해 통신하기 때문에, 불필요한 통신을 최소화할 수 있다!!
• 추가로 특정 네임스페이스에 특정 사용자만 접근할 수 있도록 구분함으로써 인증 인가 등의 기능에 활용할 수 있다!!

서버에서의 활용

먼저 채팅을 위한 네임스페이스와 공지를 위한 네임스페이스를 생성한다고 가정해보자!!

전자의 추가 경로는 "/chat"으로, 후자의 추가 경로는 "/notice"로 배정할 예정!!

/* 채팅 네임스페이스 지정 */
const chat = io.of("/chat")

/* 공지 네임스페이스 지정 */
const notice = io.of("/notice")

이렇게 먼저 소켓을 각각의 네임스페이스에 맞게 분할 생성해준다!!

/* 채팅 이벤트 리스너 등록 */
chat.on("connection", (userId, socket) => {
  console.log(`${userId}가 채팅 채널에 접속했수!!`)
  
  socket.on("chatMessage", (msg) => {
    console.log(`받은 채팅 : ${msg}`)
    // 받은 채팅을 chat에 연결된 다른 클라이언트 소켓들에게 보내줌
    chat.emit("chatMessage", msg) 
  });
});

/* 공지 이벤트 리스너 등록 */
notice.on("connection", (userId, socket) => {
  console.log(`${userId}가 공지 채널에 접속했수!!`)
  
  socket.on("notification", (msg) => {
    console.log(`받은 공지 : ${msg}`)
    // 받은 공지를 notice에 연결된 다른 클라이언트 소켓들에게 보내줌
    notice.emit("notification", msg) 
  });
});

이후엔 기존에 소켓을 활용하던 방식 그대로, 이벤트 리스너를 등록해준다!! 이제 클라이언트 쪽을 확인해보자!!

클라이언트에서의 활용

클라이언트 쪽엔 임의로 chat-socket.js 파일과 notice-socket.js 파일이 있다고 가정을 해보자!!

클라이언트 파일에서 소켓을 활용하는 방법에는 두 가지 방법이 있는데,

하나는 CDN 링크를 HTML 파일에 추가하는 것이고, 다른 하나는 socket.io-client 라이브러리를 설치하는 것이다!!

전자는 그 동안 과제에서 해온 방식이고, 후자는 Node.js 환경에서 개발된 클라이언트에서 활용할 수 있음!!

당연하게도 저번에 겪어봤지만... 둘을 동시에 사용하는 건 불가능하다!!

이번 예시에서는 익숙한 방식인 전자를 기반으로 정리해볼 예정이다!!

CDN (Content Delivery Network)
인터넷 사용자들에게 content를 효율적으로 전달하기 위한 서버 네트워크다!!
HTML, CSS, Script, Image 등의 특정 파일들을 여러 지역에 분산된 서버에 저장해두고,
사용자 별로 가까운 서버에서 그 파일을 바로 제공하게 된다!!
특정 파일들을 제공하는 프랜차이즈 분점 같은 개념으로 이해하면 쉬움!!
위에선 소켓을 제공하는 프랜차이즈인 거시다!!

chat-socket.js

먼저 서버 주소에 네임스페이스를 위한 추가 경로가 배정된 상태로 소켓을 생성한다!!

 const socket = io.connect('http://localhost:3000/chat', {path: '/socket.io'});

이후엔 "chatMessage" 이벤트를 통해 채팅 네임스페이스 만의 소켓 통신을 맘껏 진행한다!!

let message = ""
socket.on("chatMessage", (msg) => {
  message = msg // 이제 이 message 변수를 html에 띄워주면 채팅이 보이겄지??
})

// 서버에 채팅 메세지를 보내는 함수
const sendChat = (userId, myMessage) => {
  socket.emit("chatMessage", {
    userId,
    myMessage
  })
}

이런 식으로 서버와 채팅 메세지를 주고 받고 할 수 있게 된다!!

공지 네임스페이스도 동일한 방식으로 활용할 수 있겠다!!

이 개념을 조금만 빨리 알았다면 프로젝트를 더 발전시킬 수 있었을 텐데 아쉽지만....

지금이라도 알았으니 더 성장했다!! 다음 과제든 언제든 실습해볼 일이 있었음 좋겠다!!

참고 링크
https://inpa.tistory.com/entry/SOCKET-%F0%9F%93%9A-Namespace-Room-%EA%B8%B0%EB%8A%A5