무야홍 ~

개요 이전 포스팅에서 WebSocket을 활용해 back 과 front 를 연결하고, 메세지를 보냄으로써 연결이 잘 되었는지 확인 해 보았다. 이번 포스팅 에서는, 서로 다른 웹 브라우저에서 메세지를 보내고 받는 실시간 채팅 기능을 구현해 보고자 한다. 개발환경 작업 툴은 vscode를 사용하며, 웹 브라우저는 chrome과, Microsoft Edge로 진행한다. UI 이전에 생성한 home.pug에서 간단한 UI 를 그려 확인 해 보자. 아직은 비어있지만 메세지를 받으면 리스트 형태로 받을 ul태그를 생성해준다. 그 아래 form태그를 부모 태그로 두고, 그 아래 텍스트를 입력할 수 있는 inpu...

개요 WebSocket 을 활용하여 Backend 와 Frontend 를 연결하고, 연결이 잘 되었는지 Message 를 보내 확인해보려한다. WebSocket https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket 먼저, 공식문서를 참조하여 Server 에 WebSocket 서버를 생성한다. 라이브러리 설치 npm i ws https://www.npmjs.com/package/ws 라이브러리를 설치 후 서버를 생성할때, WS 서버와 Express 서버 둘 다 작동하기 원한...

개요 이번 포스팅은 React 와 Express 를 활용하여 서버와의 통신을 간단하게 구축해보려고한다. 라이브러리 설치 nodemon npm i nodemon -D nodemon 은 node monitor 의 약자로, 노드가 실행하는 파일이 속한 디렉터리를 주시/감시하고 있다가 파일이 수정되면 자동으로 애플리케이션을 재시작하게 해 주는 라이브러리 이다. 즉, nodemon 을 활용하면 수정사항을 반영하기 위해 매번 애플리케이션을 재시작 할 필요가 없다. Babel npm i @babel/core @babel/cli @babel/node @babel/preset-env -D ...