🧑‍🏫 5주차 멘토링

멘토링 사전준비

진행 상황

FE

• 수많은 버그 픽스
• 리팩토링
  • 컴포넌트 재활용
  • hook → module
• socket event들을 npm 배포해서 back/front 공유해서 쓰는 시도
  • npm: @tarotmilktea/ai-socketio-event
  • npm: @tarotmilktea/human-socketio-event

BE

• 버그 픽스 ing..
  • 도커, 깃헙 액션 등등
• 리팩토링
  • 인터셉터를 활용하여 로깅 처리 + 호스트 서버에 로그 쌓이도록 구현
  • DTO나 Entity 생성 시 static 메서드 활용하도록 수정
  • Swagger API 데코레이터 ⇒ 커스텀 데코레이터 생성하여 정리
  • 레포지토리 정리 ⇒ 백엔드 배포 파일 백엔드 디렉토리 내부로 집어넣음
• graceful shutdown

멘토링

✔️ 아젠다 및 질문

멘토가 미리 아젠다와 질문을 보고 올 수 있도록 사전에 준비하여 공유합니다.

🙋‍♀️ FE

질문 1️⃣ setState로 바뀐 상태를 현재 바로 사용하진 못해서 미래에 상태가 바뀔 때 로직을 처리해주도록 했는데 좋은 방법일까요?

// useBlocker.tsx
export function useBlocker({ when, onConfirm, onCancel }: useBlockerParams) {
  const [blockedGoBack, setBlockedGoBack] = useState<boolean>(true);
  const [afterRunCallbacks, setAfterRunCallbacks] = useState<(() => void)[]>([]);

  const { openExitPopup } = useExitPopup();

  // true를 리턴할 경우 페이지 이동이 막힘
  // false를 리턴할 경우 페이지 이동이 가능
  reactRouterUserBlocker(args => {
    if (!blockedGoBack) {
      return false;
    }

    if (when({ ...args })) {
      openExitPopup({
        onConfirm: () => {
          unblockGoBack(() => {
            onConfirm?.();
          });
        },
        onCancel: ({ close }) => {
          onCancel?.();
          close();
        },
      });
      return true;
    }

    return false;
  });

  // blockedGoBack이 바뀌었을 때 afterRunCallbacks 내용을 모두 실행해줌
  useEffect(() => {
    if (!blockedGoBack) {
      afterRunCallbacks.forEach(callback => {
        callback();
      });
      setAfterRunCallbacks([]);
    }
  }, [blockedGoBack]);

  const unblockGoBack = (afterRunCallback: () => void) => {
    setBlockedGoBack(false);
    setAfterRunCallbacks(prev => [...prev, afterRunCallback]);
  };

  return { blockedGoBack, unblockGoBack };
}

// unblockGoBack 사용
const { unblockGoBack } = useBlocker({...});

unblockGoBack(()=> {
  // 페이지 이동 막기를 해제하면서 콜백 함수 실행
});

---

질문 2️⃣ 오버레이의 확인 혹은 취소 버튼을 눌렀을 때 오버레이를 닫을지 판단을 외부에서 해줬습니다. 그래서 콜백함수의 콜백함수의 콜백함수를 넣어줬는데 이렇게 작성하는게 제일 좋은 방법일까요?

// Popup.tsx
export default function Popup({ onCancel, onConfirm, children }: PopupProps) {
  ...
  return (
    ...
    <Button onClick={onCancel}> 취소하기 </Button>
    <Button onClick={onConfirm}> 확인하기 </Button>
    ...
  );
}

// PasswordPopup.tsx
export default function PasswordPopup({ onCancel, defaultValue, onSubmit }: PasswordPopupProps) {
  ...
  return (
    <Popup
      onCancel={onCancel}
      onConfirm={passwordSubmit}
    >
    ...
    </Popup>
  );
}

// usePasswordPopup.tsx
export function usePasswordPopup() {
  const { open } = useOverlay();

  const openPasswordPopup = ({ host, onSubmit, onClose }: openPasswordPopupParams) => {

    open(({ close }) => (
      <PasswordPopup
        onCancel={() => onClose?.({ close })}
        onSubmit={ password => {
          onSubmit?.({ password, close });
        }}
      />
    ));
  };

  return { openPasswordPopup };
}

// usePasswordPopup 사용
const { openPasswordPopup } = usePasswordPopup();

const createRoom = ({ roomName, onSuccess, onClose }: createRoomParams) => {
    openPasswordPopup({
      onClose: () => onClose?.({ close }),
      onSubmit: ({ password, close }) => {
        socketManager.emit('createRoom', roomName, password);
        socketManager.on('roomCreated', () => onSuccess?.({ password, close }));
      },
    });
  };

// createRoom 사용
createRoom({
  roomName: roomName as string,
  onSuccess: ({ close }) => {
    navigate('setting');
    close();
    enableSideBar();
  },
  onClose: ({ close }) => {
    close();
    navigate('/');
  },
});

---

질문 3️⃣ socket event type들을 npm package로 배포해서 back/front 공유해서 사용하도록 해봤는데, 이게 좋은 방법일까요?

export type AIServerEvent = "tarotCard" | "chatEnd" | "streamStart" | "streaming" | "streamEnd";
export type AIClientEvent = "message" | "tarotRead";

---

🙋‍♀️ BE

질문 1️⃣ 도커가 이전 작업 내역을 기준으로 배포하는 것 같습니다 😱

이번 주에 도커가 이전 버전으로 빌드되는 것 같다고 말씀드렸는데, 확인 결과 docker compose는 docker와 달리 -t 옵션이 없다는 걸 알게 되었습니다. 그래서 매번 latest 태그가 붙고 있었는데 오버라이드도 안돼서 처음 이미지가 계속 사용되고 있었습니다.

이미지 태그에 깃헙 해시를 달아 버전 관리를 하는 것으로 바꿨는데 여전히 이전 버전으로 돌아가는 것 같습니다.

• 블루 버전
  • was : ${DOCKER_USERNAME}/magicconch:was-blue-${GITHUB_SHA}
  • signal : ${DOCKER_USERNAME}/magicconch:signal-blue-${GITHUB_SHA}
• 그린 버전
  • was : ${DOCKER_USERNAME}/magicconch:was-green-${GITHUB_SHA}
  • signal : ${DOCKER_USERNAME}/magicconch:signal-green-${GITHUB_SHA}

아래는 docker images 결과입니다.

REPOSITORY             TAG                                                     IMAGE ID       CREATED        SIZE
kimyu0218/magicconch   signal-blue-07fa3c66521a83d8f746fbf54fbbd34c15153ded    69f2ce6851a8   2 hours ago    1.32GB
kimyu0218/magicconch   signal-blue-2f4b385b048a0b1e26d486c56eb6c2e98020c422    69f2ce6851a8   2 hours ago    1.32GB
kimyu0218/magicconch   signal-blue-cff42b4c955b4ef80fe99a460ed75e6156dee104    69f2ce6851a8   2 hours ago    1.32GB
kimyu0218/magicconch   signal-green-cff42b4c955b4ef80fe99a460ed75e6156dee104   69f2ce6851a8   2 hours ago    1.32GB
kimyu0218/magicconch   signal-green-e4edd3dbd33462cf9b45eb3dd8e8cbd8863836af   69f2ce6851a8   2 hours ago    1.32GB
kimyu0218/magicconch   was-blue-07fa3c66521a83d8f746fbf54fbbd34c15153ded       560d5152aec7   2 hours ago    1.43GB
kimyu0218/magicconch   was-blue-2f4b385b048a0b1e26d486c56eb6c2e98020c422       560d5152aec7   2 hours ago    1.43GB
kimyu0218/magicconch   was-blue-cff42b4c955b4ef80fe99a460ed75e6156dee104       560d5152aec7   2 hours ago    1.43GB
kimyu0218/magicconch   was-green-cff42b4c955b4ef80fe99a460ed75e6156dee104      560d5152aec7   2 hours ago    1.43GB
kimyu0218/magicconch   was-green-e4edd3dbd33462cf9b45eb3dd8e8cbd8863836af      560d5152aec7   2 hours ago    1.43GB

✔️ 멘토링 내용

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

• 디자인 패턴 굳이 책으로 공부할 필요없다.

  • 클린 아키텍처같은 책을 추천하지 않는다. 직접 경험 해보는게 와닿음
  • 코드를 많이 짜고 관리 해보면서 고통을 느끼면서 패턴이 와닿는다 😱

• 모바일 웹 부분 선택과 집중이 필요하다.

• 뒤로 가기 → 리액트 라우터 5에는 있고 6에는 없음

  • before unload
  • useBlocker : 코드 리팩토링이 필요해보임. 너무 복잡함

• 콜백을 넘겨서 하는게 무난한 방법

  • 콜백에 인자를 넘겨주는 것은 조금 그렇다. onClose에 close를 넘기는 것 어색하다.
  • 또 하나의 래핑하는 함수가 필요하다.
  • 상태에 대해서 외부 인터페이스를 주입을 해주는 게 낫다. 주입 방향이 양방향이 되버리면 힘들어진다.
  • open close를 상위에서 관리하도록..

• rootRouter 파일 이름이 아쉽다.

• useTOLD

  • 이름을 바꿔야 한다. 다른 서비스 쓰면 바꿔야 한다.
  • 명사나 특정 누군가를 지칭하면 안된다. 뒤통수 맞는다.

• store/query → get~ (X) use~

  • query 이름이면, 관련 상태값도 같이 반환?

• types 한 곳에 모아두면 좋다 ⇒ types 폴더 안에

• Socket 부분 싱글톤이 아닌것같다.

• 커스텀훅을 여러개 쓰고, depth가 깊으면 나중에 오히려 코드가 읽기 어려워질 수 있다.

  • 오히려 한곳에 모여있는게 코드를 읽기 쉬울지도?

• 커스텀 훅 사용하면 리턴 값이 해당 이름값이면 좋겠다.

  • ex) useSubmit 이면 submit이 리턴값!

✔️ 체크리스트

이번주에 우리 팀이 되고 싶은 모습을 상상하며 체크리스트를 추가해봐도 좋습니다. 멘토가 보기에 우리 팀은 어떤지 의견을 구해보세요.

• 사용자가 서비스를 사용할 수 있는 수준으로 주요 기능이 개발되었다.
• GitHub 저장소만 봐도 프로젝트 개요, 기술적 도전, 구현 과정을 누구나 알 수 있다.
• 나와 우리 팀의 기술적인 자랑 거리나 강점이 무엇인지 그 이유와 함께 설명할 수 있다.
• 6주차에 리팩토링 또는 개선할 영역이 무엇인지 인지하고 있다.