MVP기능 구현이 끝난 후 실제로 UT를 진행하여 실제로 고객이 사용해보고, 불편사항 및 추가되었으면 하는 사항을 받아 서비스를 개선해나가기로 하였다.

UT 피드백을 받을동안 MVP기능구현 이후 추가적으로 구현하기로 하였던 악성유저 강퇴기능, 팔로우,팔로잉 기능을 추가적으로 구현하기로 하였다.

팔로우,팔로잉 기능

사용자가 면접스터디를 진행 후, 마음에 드는 유저 또는 다음번에도 계속 같이 스터디하고싶은유저를 팔로우하여 지속적으로 같이 스터디할수있도록 하기위해 해당 기능을 추가 구현하기로 하였다.
스터디 룸내에서 팔로우,팔로잉이 이루어지며 룸내에서 팔로우 팔로잉 한 목록은
마이페이지에서 확인이 가능하게끔 UI를 수정하였다. 그리고 마이페이지의 팔로잉 탭에는 팔로잉 유저가 스터디룸에 들어가 있을경우 함께 스터디하기 버튼이 활성화 되어 해당유저가 있는방으로 입장할수 있도록 기능을 구현하였다.

악성유저 강퇴기능

강퇴기능을 WebSocket을 이용하여 구현하였다. WebSocket을 이용하여 채팅기능만 구현해 봤어서 다른기능은 어떻게 응용하여 구현할수있을지가 나에겐 하나의 작은 챌린지가 되었다.

우선 처음부터 하나하나 풀어나가 보기로 하였다.
백엔드쪽과 WebSocket의 type을 ban으로 맞추기로 하였다.

const sendBen = () => {
        ws.send(`/pub/chat/message`, { Authorization: token }, JSON.stringify({
            type: "BAN",
            roomId: roomId,
            senderId: hostName,
            banUsername: nickname,
            roomTitle:roomTitle
        }))
    }

위와 같이 코드를 구현하였고, 버튼을 만들어 강퇴 테스트를 진행해 보았으나 해당유저가 강퇴 되지않았다. 콘솔창 확인시 ban 타입의 메세지만 주고 받아지는것을 확인하였다.
처음에는 socket요청을 잘못한것인줄 알고 계속해서 보내는 데이터를 수정해보고, path를 수정해보며 엄청나게 삽질을 하다 깨닫게 되었다.
socket으로는 어떠한 행동을 실행시킬수 없다는것을.....
왜 진작 이생각을 하지 못했을까 조금만 생각해보면 알수있었을 문제인데..

채팅기능을 생각해보면 채팅도 똑같이 타입을 맞춰서 send하고 그렇게 전달받은 데이터를 화면단에 뿌려주는 코드를 따로 작성했었는데........
강퇴기능또한 해당유저를 강퇴시키는 코드가 필요 했는데....
이래서 머리가 나쁘면 몸이 고생한다고 하는것같다.

해당사실을 깨닫고 해당 유저를 강퇴시키는 코드를 구현하기위해 전달받은 데이터를 컴포넌트로 가져와 컴포넌트에서 강퇴당한 유저 닉네임을 비교하여 맞으면 강퇴알림 모달창이 뜨도록 코드를 구현하였다.

여기서 또하나의 문제가 발생하였다. 강퇴유저에게만 알러창이 뜨는것이아니라, 룸에 입장한 모든 유저에게 모달창이 뜨는 문제가 발생하였다.

{banlist.map((a,i) => a.type === "BAN" ?
	sublist.map((s,i) => s.nickname === a.banUsername ? 
    <BanUserModal
     nickname = {nickname}
     /> : null)
     : null
     )
}

그리하여 컴포넌트가 아닌 socket으로 전달받은 데이터를 리덕스에 담았을때 리덕스 모듈 내에서 현재 접속하고있는 사용자의 토큰에서 닉네임을 뽑아 강퇴유저닉네임을 비교하는 코드를 작성하였고 모듈내에서 해당유저에게 강퇴 알림이 가도록 구현하였다.

 [BAN_CHAT]: (state, action) =>
    produce(state, (draft) => {
      const token = sessionStorage.getItem("Authorization");
      const userName = jwtDecode(token).USER_NAME;
      const m = action.payload.chatlist;
           

      if (m.type === "BAN") {
        if (userName === m.banUsername) {
          
          alert(
              "해당 채팅방에서 퇴장처리되었어요."
            )

             window.location.replace(`/review/${m.roomId}/${m.roomTitle}`);
            
        } else {
          let idx = draft.list.findIndex(
            (u) => parseInt(u.user_id) === parseInt(m.message)
          );
          if (idx !== -1) {
            draft.list.splice(idx, 1);
          }
          return;
        }
      }
    }),

해당 기능을 구현할 당시에는 아무리생각해도 컴포넌트에서 강퇴유저에게만 알림이가도록 구현하는것은 불가능하다고 판단하여 모듈에서 실행시켜버렸었는데,
지금와서 다시생각해보면 socket으로 전달받은 데이터를 컴포넌트로 가져와 구현하고자 하였을때 강퇴당한유저 닉네임을 비교하는 과정에서 잘못된 비교대상을 불러와 모든유저에게 강퇴 모달창이 떳던것이 아닌가 하는 생각이 들었다.
현재 스터디룸에 들어와있는 유저리스트를 맵을 돌려 하나하나 닉네임을 비교하였었는데, 그방식이 아니라 현재 접속한 사람의 즉 나의 닉네임과, socket으로 전달받은 강퇴유저의 닉네임을 비교하였다면 모달창이 해당유저에게만 뜨지않았을까 하는 추측을 해보며 해당코드로 다시한번 기능구현연습을 해보고자한다.

12주차 회고

끝나지않을것 같던 실전프로젝트가 어느덧 마지막을 향해 달려가고있다.
mvp기능구현만 해내고나면 끝일꺼라는 오만한생각은 어디서 나온것일까 요즘은 매일 너무 쉽게 생각했던 나자신에게 반성하라고 꾸짖고 있는것 같다.

정말 생각지도 못한 온갖 오류들을 다 만나는것 같다. 웹사이트 하나를 만드는것이 이렇게 어렵고 손이많이가고 힘들줄이야....
어느정도 예측가능한 오류라면 그나마 다행이다. 정말 생각지도 못한곳에서 오류가나면 원인을 찾는다고 하루에 반나절을 쏟는일이 다반사였다.
실전프로젝트 이전에 진행했던 프로젝트들을 진행할때도 정말 어렵다라고 생각했었는데 그건 정말 아무것도 아니었다.

하지만 이렇게 어려움을 맞이하였다가도 오류의 원일을 찾게되면 어떤식으로 해결해나갈지 고민하는 과정과 오류를 해결하였을때의 쾌감을 생각하면 좀 변태같지만 해볼만하고 재밌었다 라는 생각이 들기도한다.

나는 이번 프로젝트를 진행해본것은 정말 나에게있어서 큰 경쟁력이 될것 같다는 생각이 들었다.
단순히 개발만 진행했을땐 개발자의 시각에서만 바라보고 기능구현에만 급급했었는데
실제 서비스를 런칭하는 과정을 겪어보니 유저입장에서 바라보아야했고 그렇기에 정말 많은곳에 훨씬 더 디테일한 부분까지 파고들어 핸들링 해주어야한다는 점을 배웠다.

글자수 제한 알럿창을 띄우는것을 예로 들자면 정말 사소한 기능인데 이런 사소한 기능이더라도 유저입장에서 바라보면 효과 차이가 크게 느껴 졌다.

이번프로젝트를 계기로 프론트엔드 개발에 대한 시각이 좀더 넓어 졌고, 얼마나 디테일하냐에따라 서비스의 퀄리티가 좌우 한다는것을 깨닫게 되었다.