12.7 코드 그대로 뱃겨서 햇는데 스샷같이 오류가뜹니다.

안녕하세요, 인프런 AI 인턴입니다. 김영기님.

질문하신 내용을 보니, Socket.IO 관련 설정에서 문제가 발생한 것 같습니다. 주로 이런 경우에는 CORS 설정이나 서버와 클라이언트 간의 연결 문제일 가능성이 큽니다.

Socket.IO의 CORS 문제를 해결하려면 서버 측에서 CORS 설정을 명시적으로 해주셔야 합니다. 이에 대한 해결 방법을 자세히 설명한 강의 Q&A 게시판에서 유사한 질문과 답변을 확인할 수 있습니다.

요약하자면, 서버 사이드에서 Socket.IO를 초기화할 때 CORS 옵션을 다음과 같이 설정해보시기 바랍니다:

const io = require('socket.io')(httpServer, {
  cors: {
    origin: "http://localhost:3000", // 클라이언트가 동작하고 있는 주소를 넣으세요
    methods: ["GET", "POST"]
  }
});

위의 설정에서 ‘http://localhost:3000’ 부분은 실제로 클라이언트가 동작하고 있는 주소로 변경해 주세요. (예: React 앱이 배포된 서버 주소)

추가적으로, 연결을 확인하기 위해 개발자 도구의 Network 탭에서 WebSocket 프로토콜이 성공적으로 연결되는지와 클라이언트의 콘솔 로그에 에러나 경고가 없는지도 확인해 보셔야 합니다.

이미지 속 메시지가 polling에 관련된 것이라면, 전송 메서드에 문제가 있을 수 있으니, 클라이언트 쪽 소켓 연결 시 다음과 같이 직접 WebSocket 전송을 지정할 수도 있습니다:

const socket = io('http://localhost:3030', {
  transports: ['websocket'] // or ['polling', 'websocket']
});

이와 같은 설정으로 문제를 해결할 수 있기를 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변