Express, Socket.io를 사용하여 채팅구현하기 - (1) 사전작업

 

들어가기에 앞서...

 

전체적인 가이드는 근둥이님 블로그를 참고했습니다.

https://codevkr.tistory.com/58?category=719250

 

쪼랩이라 예전에 채팅구현을 도전했다가 허접하게 마무리되었었는데,

근둥이님 블로그보니까 설명이 잘되어있어서 무리없이 진행했습니다.

 

제 글이 이해가 안된다면 근둥이님 블로그 글을 찾아가는것이 큰 도움이 될 것입니다.

 

(굽신-감사합니다.)

 

예전에 작업했을때 이해못했던 부분이, 역할 담당의 부분인데, 결론은 이거였습니다.

서버는 express 담당, 통신은 socket.io 담당한다.

 

express와 socket.io에 대해 간단히 설명하겠습니다. 

(자세한 사항은 정리를 어마무시하게 잘해두신 블로거님들 링크를 달아둘데니, 들어가서보셔도 되고, 검색해봐도 됩니다.)

 

Express.js	node.js에서 동작하는 프레임워크. http와 connect 컴포넌트 기반으로 하며 서버를 쉽게 만들기위해 사용한다. https://velog.io/@ground4ekd/nodejs-express
socket.io	실시간 웹 애플리케이션을 위한 라이브러리. 클라이언트 - 서버간의 양방향 통신이 가능하게 한다. http://www.secmem.org/blog/2019/08/17/websocket-socketio/

 

 

express와 socket.io를 구글에 검색해보면 예제로 채팅만들기가 많이나옵니다.

 

 

사전작업

 

node.js 프로젝트 설정

 

> 프로젝트폴더 생성

프로젝트 폴더명을 'chat-app'으로 생성했고 vscode로 열어둔 상태입니다.

 

 

> 프로젝트폴더(chat-app)를 node 프로젝트로 설정

명령어로는 npm init 이며 옵션으로 -y (--yes)를 붙일 수 있습니다.

npm init -y / npm init --yes

-y, --yes는 npm init만 했을 시 나오는 질문들에 대해 기본 옵션을 사용하겠다는 뜻입니다.

// cmd
npm init -y

 

 

> express, socket.io 모듈 다운로드

express는 서버를 socket.io는 통신을 담당할 모듈입니다.

// cdm
npm install --save express socket.io

 

 

폴더구조는 아래와 같습니다.

 

 

(2)회차는 서버 셋팅을 진행해보도록 하겠습니다.