👨‍💻 사건

• 팀 프로젝트 도전과제 중에, 채팅을 맡아서 진행하게 되었다. 이에 대해 어떠한 방법으로 풀어나아 갈지 진지하게 고민을 하였다. 처음에는 구글링을 해보니, socket io 라이브러리를 활용하는 방안이 존재하였고, 또 교육프로그램중 경험해본 Firebase 로 구현해 보는 방안이 생각이 났다.
  

✅ 해결

결론적으로 이틀에서 3일정도의 시간만 존재하여, 애매하게 socket io 라이브러리를 건들거나 Firebase 로 어중간한 서버를 구현하여 시도해보는 것은 맞지않다고 판단하였으며, 실제 실무에 들어간다면 주어진 명세를 활용해야 할 부분이 존재 할 수 있다고 판단하여, 주어진 명세에서 게시글을 한번 활용해보고자 하였다.

로그인된 사용자 ↔ 채팅방으로 사용될 제 3자의 게시글 ↔ 채팅할 상대 사용자

→ 채팅방으로 사용될 제 3자의 아이디는 유저 검색을 통하여 찾을 수 없도록 설정

< 환경변수 설정 >

// 제 3자의 게시글을 다른 유저가 생성할 수 있도록 토큰값을 받아와 저장
const CHAT_TOKEN = process.env.REACT_APP_CHAT_SERVER_TOKEN;

< 채팅방 생성 >

1. 채팅할 상대 사용자의 프로필에서 채팅 이미지 버튼을 클릭하면, 채팅방으로 사용될 제 3자의 게시글이 생성된다.

2. 제 3자의 게시글에 전송되는 컨텐츠인 채팅 데이터 → ‘로그인된 사용자의 accountname,채팅할 상대 사용자의 accountname’

   const createChatroom = () => {
       axios
         .post(
           `https://mandarin.api.weniv.co.kr/post`,
           {
             post: {
               content: `${userAccountname},${profileUserAccountname}`,
               image: '',
             },
           },
           {
             headers: {
               Authorization: `Bearer ${CHAT_TOKEN}`,
               'Content-type': 'application/json',
             },
           },
         )
         .then((res) => {
           navigate(`/chat/${res.data.post.id}`);
         });
     };

   → 전송된 데이터는 채팅리스트를 불러올때와 채팅방 이름을 나타낼때 사용한다.

3. 채팅방 생성시, 제 3자의 게시글의 content 내용과 생성할 content 내용이 중복된다면 alert 창을 띄워서 이미 존재하는 채팅룸이라는 사실을 사용자에게 알린다.

< 채팅방 리스트 >

• 제 3자의 게시글의 정보를 불러와, 전송된 컨텐츠 데이터 에 사용자의 accountname 이 포함된 게시글만 보여준다.

< 채팅방 >

• useParams() 를 사용하여, 선택한 url의 파라미터를 가져온 후, 그 파라미터(postid) 에 해당하는 게시글을 불러온다. 여기에 작성된 댓글이 본인의 것이라면, 본인이 날린 채팅으로 보여지고, 아니라면 타 사용자가 보낸 채팅처럼 보여진다.

< 채팅 >

• 채팅방에 입장하면, 채팅방으로 사용된 게시물에 댓글 형식으로 데이터를 전송한다.

💭 개선

1. 댓글이 업데이트될때 마다 재 렌더링과정 거치기
2. 상대의 accountname 이 변경될 경우가 존재하기 때문에, content 부분에 userid 로 변경하여 설정하기
3. 읽음표시 를 어떤 형식으로 구현할 지 생각해보기
4. 내가 방을 나가면 상대방의 방도 나가지는 것을 어떤 형식으로 개선해나갈지 고민하기