[React] Cannot find module 'socket.io' 해결법 - 2

2021.06.04 - [FRONT-END/React] - [React] 리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 2

[React] 리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 2

 

위 블로그 포팅하다가 socket 버전이 맞지않아 오류가 떠서 해결방법을 소개하고자 한다!

 

꼭 socket의 버전이 안맞을때, 위 포스팅을 따라하는 것이 아니더라도

 

이 방법은 다른 프로젝트를 하시다가 이처럼 버전이 맞지 않을때

 

도움이 될 것이므로 Tip 카테고리에 쓰기로 하였다!

 

그동안 npm i install 이처럼 하다보면 최신버전을 다운받게 되는데 최신버전으로하면 연결이 되지 않았다. 

 

그래서 영상에 있는 version을 쓰기로 하였다.

 

socket 버전이 안맞을 때 node_modules를 삭제하고 다시 설치하는 방법이다.

우선 

자신이 chatting 프로그램을 저장한 파일에 들어가 client의 node_modules 삭제한다.

 

server의 node_modules도 삭제한다.

 

 

그리고 Visual Stiduo Code 에 들어가서

 

 

이 사진은 리액트 포스팅한 글에 참조된 사진인데 version을 바꿔준다.

 

client의 package.json

 "query-string": "^6.8.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-emoji": "^0.5.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "react-scroll-to-bottom": "^1.3.2",
    "socket.io-client": "^2.2.0"

 

server의 package.json

 "cors": "^2.8.5",
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "socket.io": "^2.2.0"

 

다시 설치를 하기 위해 client에 들어가 npm i를 해준다.

 

 

설치를 하고 난 후 server에 들어가 npm i를 해준다.

 

 

설치가 다 되면 실행하기 위해 server와 client에 npm run start를 해주면 실행이 된다.

 

 

 

가입을 누르면 새로운 connection이 발생하였다고 뜨고 

 

새로고침을 눌렀을때 유저가 떠났다는 말이 console창이 뜬다면 서버가 통신이 잘됨을 확인할 수 있다!