GABOJOK 개린D

오늘은 레디스를 사용한 방법에 대해 한가지 적어보려 한다. 실시간 채팅기능 구현을 맡은 나는, 채팅을 저장하고자 했다. 신고기능이나, 다른 부분들에 있어서 데이터를 보관하고 있으면 좋을것 같다고 생각했기 때문이다 (카카오 톡의 채팅 보관기능을 떠올렸던 것도 있다. ) 그래서 redis를 이용해 데이터를 모은 다음, 벌크인서트 로 레디스에서 mongodb로 넣어주는 방향을 생각했다. 지난번 레디스를 hash타입으로 사용하고자 했으나, 다시 알아보니 stream타입도 시간 순서대로 진행되어 좋을 것 같아 변경했다. 채팅데이터에 시간이 뒤죽박죽이라면, 의미가 떨어지기 때문이다. 처음에는 단순히 20개가 넘어가면 레디스에서 mongodb로 이동하고, 방금 넣은 그 데이터들은 삭제하도록 했었다. 이를 좀더 입체적..

팀 프로젝트에서 도커를 사용하기로 했다. 담당 파트는 아니였지만, 계속 함께 사용해야 할 듯 보여 공부했다. 개념적인 부분을 정리해 본다. 🦊 가상화 기술 도커에 대해 말하기 전에 먼저 가상화 기술에 대해 적어보려 한다. 하나의 컴퓨터를 가지고 여러대를 사용하는 것처럼 사용하는걸 가상화 기술이라고 하는데, 이는 서비스의 안정성을 위해 많이 사용된다. 하나의 프로그램이 버그가 발생한다면, 다른 애들은 먹통이 되기 때문이다. 가상화 기술을 통해 사용자가 직접 리소스를 분배해 운영함으로 서비스가 안정적으로 작동할 수 있게 된다. 위와 같은 버그 상황이 똑같이 발생하더라도, 하나만 먹통되고 끝나기 때문이다. 가상화 기술에는 하이퍼바이저, 컨테이너로 크게 나뉘어 진다. 🐱 하이퍼바이저 가상화 "하이퍼 바이저 가상..

기존에 만들어 두었던 채팅기능을 스트리머 페이지가 완성됨에 따라 스트리머 측에서도 채팅을 보여주는게 필요했다. 프론트 채팅부분이 깨져서 이리저리 만져봤지만, 왜인지 동일하게 작동되지 않고, 상위요소의 css속성때문인지 이전 파일과 전혀 다르게 동작하고 있었다. 반응형 디자인을 하지 않았기 때문에 px로 넣어서 고정시켜 주었고, 인풋란도 정돈해 주었다. (버튼은 다른 팀원분이 하신다고 해서 로직구현에 들어갔다) 토큰값도 전달이 완료되어서 이부분도 바꿔주었고, 캐싱 기능및 전체적으로 다시 만지게 되었다.(기존에 처리가 미흡했던것이 다시 만지게 된 원인이였다.) 각기 다른 ejs파일에서 동일한 js파일로 사용되도록 구성했고, 이에 다라 분류가 필요했는데 찾아보니 다양한 방법이 있었다. 나의 경우 경로로 구분지..

실시간 스트리밍 서비스에 내채널 관리 페이지 부분을 맡았다. 채널 정보입력, 수정 기능이 필요했다. 다른 팀원분께서 대략적인 정보입력 로직을 만들어 놓으셔서 프론트 만들기 및 백과 연결, 그리고 사진 부분을 처리하게 되었다. 🦊 이미지 처리 과정 이미지는 왜 그냥 db에 저장하지 않을까? 파일의 크기가 너무 크기때문이다. 그래서 링크를 저장하고, 그 링크로 조회하는 방식으로 진행된다. 아래 그림을 보면 좀더 이해가 쉽다. 클라이언트는 서버로 이미지를 요청하면 서버는 db를 조회하고 조회결과로 링크를 받으면 클라이언트에게 이 링크를 주고 클라이언트는 이 링크로 이미지를 요청해서 s3가 이미지를 클라이언트에게 내준다. 이제 nest js 에서 s3와 멀터를 이용해 이미지 업로드 하는 방법을 살펴보자. 🏞️ ..

실시간 채팅 기본기능 구현 후 추가적으로 실시간 채팅 도배 방지기능을 구현하려 했다. 처음에 생각한 방향은 이랬다. 유저가 현재 보낸 시점 기준으로 최근 10초간 n 회 이상 채팅을 입력했을 경우 이를 감지해서 일정 시간동안 채팅입력을 금지하는 기능을 넣고자 했다. 이를 위해 유저가 데이터를 입력할때마다 db에 해당 유저 채팅 기록이 마지막 10초동안 몇개정도 있는지 확인후, 그에 맞는 로직을 작성하면 가능하겠다 싶었다. 그러나 !!! 이는 유저가 채팅을 보낼때마다 db를 조회하고 확인하는 번거로운 과정을 거쳐야만 한다. 즉 트래픽이 몰리면 답이 없다. 트래픽 경험을 염두에 두고 시작한 프로젝트였기 때문에 이와 연관된 기능인 캐싱 기능을 함께 곁들이고자 했다. 🦊 Cache DB 선택 과정 cache d..

이번에는 채팅에 금칙어 기능을 추가한 내용을 적어보려고 한다. 🪴 구현 목표 기능 금칙어 기능을 구현하기 위해 처음에는 하나의 변수에 특정 문자들을 배열에 담아서 금칙어에 해당하는 경우 하트 이모티콘으로 치환해서 전송하려고 했다. 현재 zep에서 학습중인데 ** 이런식으로 치환되기 때문에 가장 먼저 이런 방법이 떠올랐다. 예를 들면 야 이 💜💜💜야 그러나 이렇게 하면, 스트리머는 유저가 욕을 보내는걸 알게 되어 그닥 좋을 것 같지는 않았다. 방법을 바꿔봤다. 유저가 금칙어를 작성해서 전송하려 하면, 방금 전송한 그 유저에게만 alert로 금칙어라 전송되지 않는다고 알려주기로 했다. 🎄 구현 방법 이를 위해 금칙어 리스트를 찾아보았는데, 정말 많은 단어가 있었다. 많은 경우 1000개의 단어가 있기도 해서..

nestjs에서 socket io를 활용해 채팅기능을 구현하려면 먼저 알아야 할 것이 있다. nestjs의 공식문서에도 나와있는 gateway이다. https://docs.nestjs.com/websockets/gateways Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functi..

지난번 express에서 사용한 web socket io를 nest에 적용해 보기로 했다. 사실 nest에 적용하기 위해 express를 먼저 경험한 것이기 때문에 본 작업이 들어간 과정이라 생각했다. ws 프로토콜을 처음 다뤄보고, socket io 의 함수들이 아직 낮설었기 때문에 이런 과정을 거쳤고, nest에서 진행한 내용을 적어보려 한다. 🪴 데이터베이스 선택 일단 데이터베이스 선택에 앞서 어떤 기능을 구현할 것인지 먼저 정리해 보았다. 사용자들의 실시간 방송에 대한 실시간 채팅 기능을 구현하려 하였고, 복잡한 관계가 있는게 아닌 단순 메세지를 주고받을 예정이였으며, 추후 종료된 방송에 유저의 채팅 내역이 조회 할 수 있는 가능성을 열어두려 하였다. 먼저 기존의 다른 기능에 대한 데이터들은 관계..

간단한 문제였는데, 삽질을 좀 해서 기록에 남긴다. 🧐 상황 socket io를 이용해서 채팅기능 테스트를 해보려고 브라우저를 봤는데 콘솔이 전혀 찍히고 있지 않았다. 뭔가 이상했다. 어떤 에러도 나오지 않았다. ejs파일에 콘솔을 찍어보니( script태그 내부) 콘솔은 찍히는데, src로 가져오는 js파일에 만든 콘솔은 안찍혔다. 🐕 시도 1. 경로를 확인했다. 현재 파일구조는 아래와 같다. views ┣ js ┃ ┗ chat.js ┣ modules ┃ ┣ footer.ejs ┃ ┣ header.ejs ┃ ┣ section.ejs ┃ ┗ sideBar.ejs ┣ channelInfo.ejs ┣ live-provide-page.ejs ┣ livePage.ejs ┗ main.ejs src ┣ auth ┃..

실시간 스트리밍 서비스를 최종 프로젝트로 계획하고 진행중이라 웹소켓을 공부했다. 아프리카 티비 같은 서비스에 보면 옆에 실시간 채팅이 있는데 그 부분을 구현하려고 진행하게 되었다. 실제 프로젝트는 nest.js로 했지만, 일단 이해를 먼저 하기 위해서 express로 진행을 하게되었다. 🌵 웹소켓 web socket 실시간 채팅을 위해 많이 사용하는 도구인데, 실시간 양방향 통신을 제공하는 프로토콜 중 하나이다. (프로토콜 : 컴퓨터나 장치간에 통신하기 위한 규칙) http 프로토콜과 비교해 보니 이해가 쉬웠는데, http web socket 통신과정 req를 보내야 서버가 res를 응답줄 수 있는 수동적 관계 클라이언트에서 서버로 요청이 온것을 처리한 이후에도 연결 유지. (마냥 기다리지 않음) 서버가..