[Node.js] 로컬서버를 열어 실시간 채팅 서비스 구현하기 - (2) 로컬 서버 열기

본 게시글은 원본를 따라가며 이해한 내용들을 기록한 문서이다.

원본 게시글이 사실 더 잘 설명되어있으나, 공부목적으로 작성하였다.

[비전공자도 한다, 챗봇 만들기]

 

개발의 '개'자도 몰랐던 비전공자의 시점으로

챗봇만들기 과정을 다뤄봅니다.

---

실시간 온라인 채팅 서비스, 어떻게 만들 것인가? 

 

 

 

일단, 온라인 채팅 서비스를 만들기 위해서 크게

채팅의 송수신을 처리하는 서버와

클라이언트 측에서 동작할수 있도록 만든 웹이 필요하다.

 

그리고, 이들의 역할은 다음과 같이 이해가 된다.

서버는 사람들간의 소통의 공간을 만들어 주고

웹은 그 공간을 사용할 수 있게 만들어 주는 역할을 한다.

 

이제, 이러한 서비스를 만들기 위한 도구로

서버를 만들기 위해 Node.js 라는 자바스크립트 기반의 웹서버 플렛폼을 사용할 것이며,

웹을 만들기 위해 HTML+CSS+JavaScript 를 이용하겠고,

 

다음과 같은 목차에 따른다.

 

---

목 차

개발환경구축

↓

로컬 서버 열기 (본 게시글)

↓

웹에 정적 정보 전송

↓

웹과 서버 간의 정보 교환

↓

채팅 구현

---

 

 

---

개발환경구축-로컬 서버 열기-웹에 정적 정보 전송-웹과 서버 간의 정보 교환-채팅 구현

STEP.I 스크립트파일을 만들고 모듈을 Load 한다 

 

 

 

STEP.1.1 - 스크립트파일을 만들어 app.js 로 저장한다.

(1) 빈공간을 더블클릭하면 새 스크립트창이 뜹니다.

(2) [Ctrl + S] 키로 app.js 라는 이름으로 저장합니다.

 

 

 

 

 

STEP.1.2 - 모듈을 불러온다.

모듈은 require라는 명령어로 불러옵니다. require는 module.export를 반환한다.는데.. 사실 잘모르겠습니다. 제 경우 그저 모듈을 불러온다는 것으로만 이해해도 괜찮았으나, 필요시 더 공부하기 바랍니다.

 

/* 모듈 불러오기 */
const express = require('express')
const http = require('http')
const socket = require('socket.io')

 

 

 

---

개발환경구축-로컬 서버 열기-웹에 정적 정보 전송-웹과 서버 간의 정보 교환-채팅 구현

STEP.II 모듈을 이용해 서버를 열고, 접속해본다.

 

 

STEP.2.1 - 모듈을 이용해 서버를 열어준다.

(1) 불러온 express 객체를 app 변수에 저장하고, 포트번호를 지정해 줍니다.

(2) 그리고 http 서버를 생성후에 socket 서버로 업그레이드(바인딩)를 시켜줍니다.

  >> socket.io의 역할은 아마 바인딩된 웹서버에서 발생하는 이벤트, 음 그러니까 일련의 어떤 동작들을 주고받는 역할을 하는 듯 합니다.

  >> 실시간 채팅이 이뤄지기 위해 웹과 웹서버간의 교류가 있는데 이를 제어하는데 사용하게 됩니다.

(3) 서버를 미리 선언했던 PORT에서 Listen할 수 있도록 합니다.

  >> 여기서 console.log('TEXT')가 실행될경우 터미널에 'TEXT'를 출력하게 됩니다.

 

/* express 객체 생성 */
const app = express()
const PORT = 8080; // PORT 번호

/* express http 서버 생성 및 socket.io 에 바인딩 */
const server = http.createServer(app)
const io = socket(server)

/* 서버가 실행되면 출력 */
server.listen(PORT, function() {
    console.log('Server is running')
})

  >> 하지만 이상태로 서버를 실행하여 접속하면 Cannot GET 이라는 에러메시지가 출력된다. 이유는 서버에 아무 내용이 없기 때문이다.

 

 

 

STEP.2.2 - 웹페이지 접속시 문구 출력

(1) app.get 을 명령어를 통해 '/'에 접속시 'hello....?' 문자열을 출력합니다.

  >> app.get의 입력값은 서버자원을 가리키는 URI 문자열, 그리고 콜백함수로 이뤄져있습니다. 

  >> 즉 설정한 URI로 요청이 들어오면 두번째 파라매터에 구현한 함수가 동작합니다.

  >> send 매쏘드는 문자열로 응답하는데, '/'라는 request가 들어왔을때, 'Hello...?'을 response로 보낸다는 뜻입니다.

 

/* express 객체 생성 */
const app = express()
const PORT = 8080; // PORT 번호

/* express http 서버 생성 및 socket.io 에 바인딩 */
const server = http.createServer(app)
const io = socket(server)

/* 서버의 홈('/')에 접속시 메시지 전송 */
app.get('/', function(req, res) {
	res.send('Hello...?')
})

/* 서버가 실행되면 출력 */
server.listen(PORT, function() {
    console.log('Server is running')
})

 

 

STEP.2.3 - 서버를 실행하고 접속한다.

(1) [ Ctrl + ` ] 을 눌러서 터미널을 열고, [ node app.js ] 명령어를 입력해 짜여진 스크립트를 실행합니다.

  >> 터미널에 Server is running 라고 출력되면 정해진 포트에 정상적으로 서버가 실행중인 것입니다.

  >> 화면에 Hello...? 가 반환되었다.

 

 

 

---

로컬서버 열기는 이것으로 마칩니다.

다음 게시글을 따라가며 실시간 채팅을 직접 구현해 볼 수 있도록 합시다.

---

목 차

개발환경구축

↓

로컬 서버 열기 (본 게시글)

↓

웹에 정적 정보 전송

↓

웹과 서버 간의 정보 교환

↓

채팅 구현