채팅

joinRoom getChatLog 가 순서대로 작동하지 않아서 새로고침하면 웰컴메세지가 맨 위로감

→ 소켓 서버 측에서 웰컴 메세지랑 이전 채팅 로그를 한번에 묶어서 보내주면 됨!

socket.on('joinRoom', async (joinUser, rid, cb) => {
      try {
        await userController.saveUser(joinUser.nickName, socket.id);
        const user = await userController.checkUser(socket.id);

        // user.rooms 초기화
        user.rooms = [];

        await userController.joinRoom(rid, user);

        // 'user.rooms' 값이 설정된 이후에 'socket.join' 호출
        socket.join(user.rooms.toString());

        const welcomeMessage = {
          chat: `${user.nick_name}님이 입장하셨습니다.`,
          user: { id: null, name: 'system' },
        };
        const chatLog = await userController.getChatLog(rid);
        chatSpace.to(user.rooms.toString()).emit('message', [...chatLog, welcomeMessage]);
        socket.emit('rooms', await userController.getAllRooms());
        cb({ ok: true, data: user });
      } catch (error) {
        cb({ ok: false, error: error.message });
      }
    });

채팅창 스크롤바

/* 채팅창 스크롤바 속성 */
.message-container::-webkit-scrollbar {
  background: transparent; /* 스크롤바의 배경을 투명으로 설정합니다. */
  display: none;
}

마이페이지

createObjectURL

메모리에 있는 객체(일반적으로 **Blob**이나 File 객체)에 대한 임시 URL을 생성

명시적으로 메모리에서 해제시키지 않게 되더라도 이 URL은 브라우저 세션 동안 유효하고 페이지를 새로고침 하거나 닫으면 사라지게 된다.

input 파일 선택했을 때 그 이미지를 띄우고 싶은데 이걸로 하면 할 수 있을듯..?

참고)

URL: createObjectURL() static method - Web APIs | MDN

const handleChangeProfileImg = async e => {
    e.preventDefault();
    await imgRef.current.click();
    console.log(imgRef.current.value, '헤헤');
  };

label 두는 대신 ref 를 이용해서 input 클릭되게