13. 채팅방 프론트 - 그룹챗 만들기

https://www.youtube.com/watch?v=kJfwjGQY99M&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=12

를 보며 하고있다.

 

그런데, 사실 이번 파트는 위 동영상을 거의 보지 않았다. 95%는 보지 않고, 그냥 디자인 참고랑, 어떤 기능을 하는지만 보고 만들고 있다.

이유는 위 동영상이 나온 시기가 오래되서, 지금쓰는 기술과 맞지 않는다는 게 가장 큰 이유다. 

나는 요즘 next.js로 뭘 만들고있는데, 위 동영상에서는 타입스크립트도 쓰지 않고, 자바스크립트 리액트로 만들고 있다. 리액트도 오래되서 서버액션이 없는 버전이고, 어떤 형식을 보내거나 할 때 validation 체크 등도 하지 않아서, nextJS 연습도 하고, zod등도 써볼겸 해서 디자인과 어떤 기능이 있는지만 보며 만들어보고 있다. 거의 클론코딩이다.

그런데 시간이 상당히 오래 걸리고 있다...

뭐, 그래도 힘들게 익히는 만큼 실력이 느는 것에 의의를  두고 있다.

 

사실 위 동영상을 따라하게 된 계기가 소켓통신으로 실시간 채팅과 알람을 어떻게할지를 배우기 위한 거였어서, 너무 연관이 없는 부분은 좀 건너뛰었다.(채팅방 이름바꾸기 등). 그럼에도 시간이 오래걸리긴 했다.

 

이번편에서 좀 고전했던 부분은

zod 스키마를 만들어서 요청을 보낼때, 처음에 뭘 만들때는 당연히 아이디가 없는게 당연한데,

zod object에 id를 만들어 놓으면, 이걸 검사해서 아예 요청자체를 하지 않는다는 점이다. id를 빼주거나, optional을 붙여줘야 한다.

 

두번째로, json.stringify()다.

{
  _id: '',
  chatName: '124',
  isGroupChat: true,
  users: [
    {
      _id: '66aca39b45930dfbd24a92b1',
      name: 'name123',
      email: 'email1@email.com',
      pic: 'https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg'
    },
    {
      _id: '66ab1a85f04615dc2721eb4d',
      name: 'test',
      email: 'test@JJANG.com',
      pic: 'https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg'
    },
    {
      _id: '66aaf60fc5032d2fdf3304f5',
      name: 'Jaehyeon',
      email: 'Jaehyeon@JJANG.com',
      pic: 'https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg'
    }
  ]
}

 

이런 형식의 객체를 fetch로 보낸다고 할 때, 이걸 바로 JSON.stringify()로 감싸서 보내면 에러가 난다.

plain object 어쩌고 하는 에러가 발생하는데, 객체가 제대로 stringify가 되지 않아서 그렇다.

users 를 보면 객체안에 객체배열이 하나 더 있는 걸 볼 수 있다.

 

이경우

const obj = {
    chatName: form.chatName,
    users: JSON.stringify(form.users),
  };

 

이런식으로 미리 객체안의 객체를 JSON.stringify를 한번 해준후, (.map(el => JSON.stringify(el)) 배열의 경우 이런식으로 하나하나 다 stringify해줄 수도 있다. ) 

전체 obj를 JSON.stringify()로 한번 더 묶어줘야한다.

 

이렇게 해줘야 plain object에러가 발생하지않는다.

 

이 외에도 여러가지를 해줬는데, UI관련된 부분이 많고, 뭔가 엄청 중요한거는 아닌 거 같아서 이번글은 여기서 마치겠다.

지금 너무 지저분하긴 하지만, 만들어져가고 있는게 참 좋다.

 

github : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/13.ChatFront_2

GitHub - Wunhyeon/ChatApp-MERNStack