[소개팅서비스] 방 입장 코드 부여하는 오류 해결

📌 상황정리

1. 역할 선택 화면에서 사용자가 역할을 선택한다

2. 선택한 역할 정보를 서버로 보내면, 서버가 랜덤 매칭 공식에 맞춰서 매칭 정보를 반환한다

3. 매칭 정보를 이용해 미팅 서비스에 입장한다

 

 

📌 해결과정

1. 매칭 대기실로 이동하는 함수를 정의

 

1-1. 매칭 대기실로 이동하는 함수를 소개팅 시작하기 버튼에 걸어줌

 

 

1-2. 참고로 역할 코드를 중앙관리소에 저장하는 방식은 아래와 같이 정의되어 있음

 

2. 매칭 대기실에 입장하면 바로 매칭 정보 받아오는 matchStart 함수 실행

 

2-1. class형 함수에서 중앙관리소에 있는 state를 사용하는 방법, 슬라이스의 액션함수를 사용하는 방법은 구글링을 통해 찾았음

 

3. matchStart함수는 아래와 같이 동작함

 

3-1. history를 사용한 이유

아래 사이트 참고

https://velog.io/@codns1223/React-Redux%EC%97%90%EC%84%9C-navigate-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%B4%EC%A3%BC%EA%B8%B0

[React] Redux에서 navigate 사용해서 데이터 전달해주기

 

3-2. 참고로 slice에 matchDataGet 함수는 아래와 같이 정의되어 있음

 

 

4. 이렇게 중앙관리소에 저장된 매칭 성공 정보를 활용해서 오픈비두의 세션에 참가하도록 했음

4-1. 2-1과 똑같이 미팅화면 클래스 컴포넌트 또한 connect로 연결되어 있음

 

📌결론

방 입장 정보가 누수되서 session으로 입장이 잘 되지 않았던 오류 원인과 해결과정은 다음과 같이 요약됨.

1. history를 사용해서 페이지 이동시 필요한 값(서버로부터 받은 방 매칭 정보)을 가지고 이동해야 했음

2. 방 매칭 정보를 받아서 중앙관리소에 저장하는 동작을 thunk에서 분리해서 동작시켜야 제대로 작동함, 컴포넌트 내부에서 axios를 사용하면 언제 어디서 정확하게 정보를 저장하는지 추적하기가 어려워서 방 매칭 정보가 어디서 누수되는지 찾기 어려움.

3. thunk를 사용해서 함수를 dispatch하고 상태가 fulfilled 일때 매칭 정보를 중앙관리소에 저장해줌으로써, 매칭 정보가 잘 받아와지는지 여부를 redux-dev-tool로 추적하기도 쉬웠음

3-1. 비동기로 동작하게 만들어주기 때문에 다른 동작으로 인해 밀려서 가장 중요한 매칭 정보가 늦게 받아와지는 현상을 방지 할 수 있음

4. componentDidMount 라이프 사이클 메서드를 사용해서 매칭정보를 받는 함수, 매칭정보가 받아와졌다면 미팅 세션으로 넘어가는 함수를 바로 실행해서 필요한 데이터를 받아오는 동작을 제일 먼저 수행함

5. 클래스형 컴포넌트와 함수형 컴포넌트를 함께 사용하다보니 혼란스러웠는데, 클래스형 컴포넌트에서 connect를 활용해 중앙관리소의 state나 action을 가져다 사용할 수 있게 만든 것이 해당 방식으로 문제를 해결할 수 있었던 keypoint임