[TIL] 24.10.06 SUN

GDORI·2024년 10월 6일

TIL 내배캠 본캠프 63일차

TIL

목록 보기

63/79

레디스 기본 명령어

데이터 저장하기

$ set key value
ex - set ddori:name yangddori

데이터 불러오기

$ get key
ex - get ddori:name

저장된 키 조회하기

$ keys *

데이터 삭제하기

$ del key

만료시간 설정하기

$ set key value ex 10

만료시간 조회하기

$ ttl key
만료시간 설정한 키의 경우 만료되면 -2를 반환 ( 키가 없다는 뜻 )하고,
애초에 설정하지 않은 키인 경우 -1을 반환한다.

모든 데이터 삭제하기

$ flushall

네이밍 컨벤션

콜론(:)을 활용하여 계층적 구분 사용한다.

ex - user:ddori:age -> 유저 중 ddori의 나이

레디스 기능을 사용해보자

[Reids] 레디스 - 설치

위 게시글에서 레디스 서버는 설치가 완료된 상태이다.
이제 크롬다이노 서버에서 사용하기 위하여 준비해보자..

레디스 클라이언트 버전확인

npm list redis 또는 package.json 확인하면 된다.

redis.js

기존 레디스의 경우 connect()를 별도로 호출해주지 않아도 createClient() 호출 시 바로 연결 시도 하였다고 했으나, 현재 버전인 v4.7.0의 경우 (4.x이상) connect() 메서드를 명시적으로 호출해주어야 한다고 한다.

import redis from "redis";

export const redisClient = redis.createClient({
  host: "192.168.0.3",
  port: 6379,
});

// Redis 연결 및 에러 처리
export const connectRedis = async () => {
  try {
    await redisClient.connect();
    console.log("Connected to Redis");
  } catch (err) {
    console.error("Redis connection error:", err);
  }
};

redisClient.on("error", (err) => {
  console.log("Redis Error : ", err);
});

server.js

상단에 connectRedis() 만 추가해주면 된다.

레디스를 어디다가 쓸 것이냐,,

제일 먼저 구현해볼 것은 본인의 최고점수를 현재는 로컬 스토리지에 저장하고 있지만 유저간 최고점수를 비교하기 위해서는 서버측에서 관리되어야 한다.
그 전에 내 점수가 브라우저를 껐다가 켜도 남아있게 하기 위해서는 로그인 시스템을 도입해야 하는데, 고작 크롬다이노를 하자고 가입을? 전에 최고점수를 저장했던 로컬스토리지를 활용하여 uuid를 저장하는 방향으로 가기로 했다.

유저 uuid 로컬 스토리지 저장

소켓 연결 시 로컬스토리지에 uuid가 있으면, 그대로 본인의 uuid를 user에 등록
없다면 uuid v4를 사용하여 만들어주고 uuid를 클라이언트에게 전송하여 저장하게끔 설정

주의
localStorage.getItem("저장할 변수명");
불러올 변수가 없으면 null을 반환하는데, 그냥 null이 아니라 문자열 "null" 을 반환한다.
하도 안돼서 문자열로 테스트 하니까 해결되었다;;;;;

클라이언트 측 socket.js

let uuid = localStorage.getItem("uuid"); // 없으면 "null" 반환
const socket = io("http://localhost:3000", {
  query: {
    clientVersion: CLIENT_VERSION,
    uuid,
  },
});

let userId = null;

socket.on("connection", (data) => {
  console.log("connection: ", data, uuid);

  if (uuid === "null") {
    localStorage.setItem("uuid", data.uuid);
    console.log("UUID saved to localStorage:", data.uuid);
  }
  userId = data.uuid;
});

서버 측 register.handeler.js

const registerHandler = (io) => {
  io.on("connection", (socket) => {
    const { uuid } = socket.handshake.query;
    const userUUID = uuid !== "null" ? uuid : uuidV4();

    addUser({ uuid: userUUID, socketId: socket.id });

    handleConnection(socket, userUUID);

    socket.on("event", (data) => handlerEvent(io, socket, data));

    // 접속 해제시 이벤트
    socket.on("disconnect", () => {
      handleDisconnect(socket, userUUID);
    });
  });
};