javascript/줌 클론코딩 (3) 썸네일형 리스트형 DAY 3 #2.0 ~ #2.3 #2.0 SocketIO vs WebSockets https://socket.io/ SocketIO : 실시간, 양방향, event 기반의 통신을 가능케 하는 framework https://socket.io/docs/v4/ WebSocket과의 차이점은, webSocket이 socketIO가 위의 통신을 가능하게 하도록 만드는 방법 중 하나에 불과하며, 만약 WebSocket이 사용못하게 되더라도 socketIO는 http long-polling 등을 대체해 사용할 수 있다고 문서에 나와있다. 당장 webSocket은 protocol, socketIO는 framework이라는 점에서 다르다.. https://www.npmjs.com/package/socket.io #2.1 Installing Socke.. DAY 2 #1.3 ~ 1.9 #1.3 WebSocket Events https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket app.js // 이 socket을 이용해서 frontend에서 backend로 메세지 전송 가능 // 여기 socket은 서버로의 연결로, window.location.host는 pc뿐만 아닌 모바일에서도 접속이 가능하게끔 해줌 // (http://localhost:3000이 아닌, 아예 기기의 host의 location으로 접속) const socket = new WebSocket(`ws://${window.location.host}`); webSocket 사용 - server : node.js 환경에서 ws와 같은 모듈을 이용해 webSo.. DAY 1 #0.2 ~ #1.2 프론트, 백엔드 준비를 위해 미리 0.0~0.4를 들어야한다... 안들었다가 지금 1시간째 헛탕쳤다... https://ssocoit.tistory.com/188 참고 #0.2 server Setup https://www.npmjs.com/package/ws 먼저 node, ws, express, pug 설치 나는 이미 노드는 설치되어 있으므로 나머지 세개만 추가로 설치함.. npm i ws npm i express npm i pug github에 올린다면 readme 파일도 추가로 생성해줄 수 있다. 터미널에 npm init-y 를 입력하면 뭔가 있어보이는 기본 package.json 파일을 작업해준다. 거기에 추가로 덧붙이고 싶은 내용을 작성하면 된다. nodemon과 babel을 사용할것이니 터미널.. 이전 1 다음
