🧑‍🏫 4주차 멘토링 - boostcampwm2023/web09-MagicConch GitHub Wiki

멘토링

✔️ 아젠다 및 질문

멘토링 아젠다와 멘토에게 하고 싶은 질문을 사전에 준비합니다.

FE 1️⃣ 훅이 커질수록 관리하기가 점점 힘들어집니다.

현재 useWebRTC 안쪽의 어떤 훅이 만든 상태가 다른 훅에서 사용되기도 하고, 훅 밖의 여러 컴포넌트에서 사용되기도 합니다. 이 때 상태를 전역으로 빼는게 맞을까요? 전역으로 빼면 의존하는 상태를 알아보기 더 어려질것같아 고민됩니다.

import { useEffect } from 'react';

import { useControllMedia } from './useControllMedia';
import { useDataChannel } from './useDataChannel';
import { useMedia } from './useMedia';
import { useMediaInfoContext } from './useMediaInfoContext';
import { useRTCPeerConnection } from './useRTCPeerConnection';
import { useSignalingSocket } from './useSignalingSocket';
import { useSocket } from './useSocket';

export function useWebRTC(roomName: string) {
  const { socketEmit } = useSocket('WebRTC');

  const { mediaInfos } = useMediaInfoContext();
  const { localVideoRef,
    remoteVideoRef,
    localStreamRef,
    cameraOptions,
    audioOptions,
    getMedia,
    getAudiosOptions,
    getCamerasOptions,
  } = useMedia();

  const { peerConnectionRef, makeRTCPeerConnection, closeRTCPeerConnection } = useRTCPeerConnection({
    roomName,
    remoteVideoRef,
  });
  const { mediaInfoChannel, chatChannel, initDataChannels, closeDataChannels } = useDataChannel({
    peerConnectionRef,
  });

  const { addTracks, changeMyAudioTrack, changeMyVideoTrack, toggleAudio, toggleVideo } = useControllMedia({
    localStreamRef,
    peerConnectionRef,
    localVideoRef,
    mediaInfoChannel,
    getMedia,
  });

  const negotiationDataChannels = () => {
    closeRTCPeerConnection();
    closeDataChannels();
    makeRTCPeerConnection();
    initDataChannels();
    addTracks();
  };

  const { initSignalingSocket } = useSignalingSocket({
    roomName,
    peerConnectionRef,
    negotiationDataChannels,
  });

  useEffect(() => {
    const initOnMount = async () => {
      await getMedia({});
      initSignalingSocket();
      makeRTCPeerConnection();
      initDataChannels();
      addTracks();
      socketEmit('joinRoom', roomName);
    };

    initOnMount();

    return () => {
      closeRTCPeerConnection();
      closeDataChannels();
    };
  }, []);

  return {
    cameraOptions,
    audioOptions,
    localVideoRef,
    remoteVideoRef,
    mediaInfoChannel,
    chatChannel,
    mediaInfos,
    toggleAudio,
    toggleVideo,
    addTracks,
    changeMyAudioTrack,
    changeMyVideoTrack,
    getAudiosOptions,
    getCamerasOptions,
    getMedia,
  };
}

💡 답변 ) hook에서 너무 많은 것들을 처리한다. 모듈화해서 사용하는 건 어떨까?

• 해당 부분을 모듈로 빼서 관심사를 분리하면 좋을 듯하다.
• 훅의 의존관계가 너무 높아지면 추적하기가 어렵다.
• 비즈니스 로직에 따라 이를 분리해보자!

---

FE 2️⃣ socket.io에서 join

💡 답변 ) hoxy 재연결 이슈..?

---

BE 1️⃣ 시그널링 서버가 웹소켓 요청을 받지 못하고 있습니다 😂

현재 총 3개의 도커 컨테이너를 띄우고 있습니다.

- nginx
- was 3000
- signal 3001

nginx에서 was와 signal 서버로 프록시 하는데 was로 http 요청을 프록시 하는 것은 되지만, signal 서버로 웹소켓 요청을 프록시 하는 것이 동작하지 않습니다.

이건 nginx 파일입니다. 웹소켓 요청이므로 upgrade 를 넣어주었습니다.

• nginx 설정 파일

    server {
        listen 80;
        server_name was.tarotmilktea.com;
        ...
    
        location /signal { # signal 서버
            proxy_pass http://signal:3001;
            proxy_redirect   default;
            proxy_http_version 1.1; # 버전 명시
            proxy_set_header Upgrade $http_upgrade; # upgrade 설정
            proxy_set_header Connection "upgrade";  # upgrade 설정
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    
        location / {
            proxy_pass http://was:3000;
            proxy_redirect   default;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    
        access_log /var/log/nginx/nest-app-access.log;
        error_log /var/log/nginx/nest-app-error.log;
    }
    
    server {
        listen 443 ssl;
        server_name was.tarotmilktea.com;
        ...
        location /signal { # signal 서버
            proxy_pass http://signal:3001;
            proxy_redirect   default;
            proxy_http_version 1.1; # 버전 명시
            proxy_set_header Upgrade $http_upgrade; # upgrade 설정
            proxy_set_header Connection "upgrade";  # upgrade 설정
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    
        location / { 
            proxy_pass http://was:3000;
            proxy_redirect   default;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    
        access_log /var/log/nginx/nest-app-access.log;
        error_log /var/log/nginx/nest-app-error.log;
    }

docker ps 결과입니다. 3개의 컨테이너가 모두 잘 떠있습니다.

CONTAINER ID   IMAGE        COMMAND                  CREATED             STATUS             PORTS                                      NAMES
447a1f84b6bb   app_nginx    "/docker-entrypoint.…"   43 minutes ago      Up 43 minutes      0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   app_nginx_1
77870bb6c78c   app_signal   "docker-entrypoint.s…"   55 minutes ago      Up 55 minutes      3001/tcp                                   app_signal_1
3a5e3e02a3a8   app_was      "docker-entrypoint.s…"   About an hour ago   Up About an hour   3000/tcp

nginx 컨테이너에 들어가서 http 및 wss 요청을 보낸 결과입니다.

# http 요청 (GET / 요청을 처리하는 컨트롤러가 없어서 Not Found가 떴습니다)
root@447a1f84b6bb:/$ curl http://signal:3001
{"message":"Cannot GET /","error":"Not Found","statusCode":404}

# wss 요청 (curl로 wss 요청 보내기??)
root@447a1f84b6bb:/$ curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Host: was.tarotmilktea.com" http://signal:3001
curl: (52) Empty reply from server

💡 답변 ) 끝나고 봅시다(?)

---

진행상황

• 채팅방 개설하기를 눌렀을 때 시작되는 사용자 간 실시간 화상 채팅에서 필수 기능들 완료
  • 닉네임/프로필 설정 등 세부 기능만 남음
• 개발 및 유지보수를 위해 winston 로거 적용하여 레벨별로 로그 남기기
  • 추후 volume 을 활용하여 호스트 서버에 로그 남도록 수정 예정
• signal 서버 express에서 nest로 마이그레이션

다음주 계획

• BE : 무중단 배포 (블루/그린 전략)
• FE : 실시간 화상 채팅 세부 기능 마무리
• 버그 잡기
  • Object Storage 이미지 다운로드
• FE : SEO + 네이버/구글에 사이트 등록하기
• 코드 리팩토링
  • 새로 만든 버튼으로 교체
  • 비슷한 것끼리 폴더 정리
  • 상태 관리 관련
  • 팩토리 활용
  • 멘토링 피드백 반영
• 에러 핸들링
• FE : 성능 최적화 (렌더링 최적화 & 로딩속도 최적화) ⇒ react developer tools & lighthouse 활용하기
• 테스트 코드
• BE : 로그 관리
• FE : 웹 접근성 (아마 6주차)
• 문서화 🥺 (아마 6주차)

✔️ 멘토링 내용

멘토링 시간에 나눈 이야기를 기록해보세요.

📌 공통 코멘트

• 커밋에 이유를 달자
• 기술적 도전 글로 공유해보는 게 어떨까?
• 함수의 이름을 보고 예상이 되면 좋겠다.

📌 FE 코멘트

• hook으로만 처리하려고 하지말고 모듈화를 하자
  • 훅의 동작원리를 제대로 이해하지 못하면 나중에 꼬일 수 있음
• 질문 ) 데이터 채널로 채팅 구현했는데 어떤 점이 좋았나?
  • 답변 ) 소켓과 별 차이가 없었다.
  • 데이터 채널은 파일도 주고 받을 수 있다는 장점 존재
  • 데이터 채널은 커넥션을 맺을때마다 모두 다시 협상을 진행해야 하는게 맞다.
• 어떤 훅인지 도메인 별로 구분을 해보는게 좋겠다!
  • 컴포넌트에서 controlled , uncontrolled 컴포넌트가 있다.
  • matariel ui 등을 쓴다면 랩핑이 많이 될 수가 있고 깊이가 깊어지면 어떤 애가 상태를 바꾸는지 모른다.
  • 유명한 라이브러리에서 이 두 개에 대한 기준을 생각해보면 도움이 될 것 같다.
• 홈 → Chat으로 가는 부분 소켓 연결 고려
  • 현재 소켓 연결을 맺고 가고 있음
• 리액트 쿼리는 선언적으로 데이터를 가져올 수도 있고 가져오는 로직을 편하게 분리 가능! 재시도 로직도 편하게 짤 수 있다. 오프라인일 때 캐시로 네이티드 앱처럼 작동하게 할 수 있다!
• 아쉬운 점
  • 알파벳순 정렬이라 이름만 가지고 추론하기 힘듬 → 도메인별로 나누자?
  • 최대한 useref 등을 사용한 uncontrolled 방식으로 훅을 개선해서 사이드이펙트를 줄이는 걸 추천
  • 함수의 이름을 보고 동작이 예상이 되어야하는데 예상이 안되는 부분이 간혹 보임
    • useSocket
  • 홈에서 채팅으로 갈 때 소켓을 연결하고 넘어가는 문제 → 수정 추천
    • 페이지에서 새로고침하면 소켓 연결 Init X
• useQuery vs useSuspendQuery

📌 BE 코멘트

• 예외 처리 깊이가 좀 깊다.
  • catch를 여러 번 해도 괜찮다.
  • early return도!
  • 미들웨어로 exception을 받아서 처리
  • 미들웨어로 로그를 찍어보자.
• clova 관련 상수 중에 배열이 있다.
  • 배열은 수정이 가능하다. 정말 상수로 만들어보는 게 어떨까?
• 팩토리를 활용해보자
  • DTO, entity 생성할 때
  • URL 생성할 때
• null 에 의미를 부여해보자 (undefined vs. null)
  • 없으면 exception 처리

📌 기타

• 17조 채팅 관련 코멘트 : 멘토님의 경우, http2의 keep alive 로 실시간 채팅 구현했다.
• FE와 BE 공통 모듈 관리 ⇒ 17조 : turbo의 internal package
  • package.json 의 main , types 알아보기
  • eslint 동작 찾아보기 (ex. 네임스페이스 어떻게 찾는지)
  • https://toss.tech/article/commonjs-esm-exports-field
  • 하지만 시간 많이 잡아먹으니 나중으로 미룰 것
• mock : https://github.com/google/intermock
• graphQL ⇒ 백/프론트 api 분쟁을 이상적으로 풀어낼 수 있음!
• ngrok, cloud tunnel 내 로컬을 서버처럼 띄울수있다. 클라우드플레어 터널 ⇒ pc ip가 프록시가 돼서 외부에서 접속이 가능하다. → 내가 가지고 있는 도메인도 붙일 수 있다.

✔️ 체크리스트

이번 주 멘토링에서 이야기 나누면 좋을 주제입니다. 우리 팀의 상황은 어떤가요? 멘토님과 이야기 나눈 후 셀프 체크하고, 그 이유를 작성해보세요. 추가하고 싶은 항목이 있다면 직접 추가해도 좋습니다.

• 기술적 도전 과제 수립이 되었다.
• 현실성 있는 계획 수립이 되었다.
• 프로젝트 기획과 설계의 뼈대가 나왔다.