[FE] feat: 코드 실행 기능 추가

[HBSPS]

PR 설명

• 코드 실행 기능 추가
• close [FE] 에디터 세부 기능 구현 #71

✅ 완료한 기능 명세

• 코드 실행 기능 추가.

📸 스크린샷

고민과 해결과정

• socket의 id를 가져오는 과정에서 문제가 발생

  const handleExecCode = async () => {
    executionSocket = io(VITE_CODE_RUNNING_SOCKET_URL);
  
    console.log(VITE_CODE_RUNNING_SOCKET_URL);
  
    executionSocket.on('done', (response: RunCodeResponse) => {
      setExecResult(`${response.result}\n\n실행시간: ${dateFormatter(response.timestamp)}`);
      executionSocket.disconnect();
    });
  
    postRunCode(executionSocket.id, plainCode, languageName);
  };

  • 위의 코드에서 postRunCode 시점에 소켓 연결이 완료되지 않아 소켓 id가 undefined가 되는 문제 발생
  • 이를 해결하기 위해 소켓 연결이 완료되었을 때 해당 함수가 실행되어야 했음
  • 소켓의 이벤트 중 connect 이벤트를 활용

  const handleExecCode = async () => {
    executionSocket = io(VITE_CODE_RUNNING_SOCKET_URL);
  
    console.log(VITE_CODE_RUNNING_SOCKET_URL);
  
    executionSocket.on('done', (response: RunCodeResponse) => {
      setExecResult(`${response.result}\n\n실행시간: ${dateFormatter(response.timestamp)}`);
      executionSocket.disconnect();
    });
  
    executionSocket.on('connect', () => postRunCode(executionSocket.id, plainCode, languageName));
  };

  • 연결이 완료되었을 때 해당 함수를 실행하도록 하여, 소켓 연결에 오랜 시간이 걸리더라도 순차적으로 post 요청을 보낼 수 있도록 함

[d0422]

고생하셨습니다!
코드 리뷰 완료했습니다!

[d0422]

LGTM!!