[Node.js] 로컬서버를 열어 실시간 채팅 서비스 구현하기 - (1) 개발환경구축

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

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

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

 

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

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

---

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

 

 

 

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

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

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

 

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

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

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

 

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

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

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

 

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

 

---

목 차

개발환경구축 (본 게시글)

↓

로컬 서버 열기

↓

웹에 정적 정보 전송

↓

웹과 서버 간의 정보 교환

↓

채팅 구현

---

 

이미 VSCode 및 Node.js, express, socket.io 가 설치되어 있는 분은, 

개발환경구축 다음게시글로 넘어가셔도 좋습니다.

하지만, 이미 환경이 구축되신 분들은 제글은 모두 알고 계시리라 생각이 듭니다.

---

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

STEP.I 개발 도구(VSCode)와 필요모듈(Node.js)을 설치한다. 

 

 

 

STEP.1.1 - Node.js 다운로드

Node.js 사이트[링크]에서 자신의 운영체제(OS)를 확인한 후, 안정화된 버전(LTS)을 받도록 합니다.

 

 

 

STEP.1.2 - Node.js 설치 확인 (버전확인)

[WindowKey + R] 을 눌러 cmd 창을 열고, node -v 명령어를 통해 설치 버젼을 확인합니다.

[WindowKey + R] 는 "실행"의 단축키 이며, node -v 는 Node.js를 쓴다는 node에 버젼을 뜻하는 -v 명령어 입니다.

 

 

 

STEP.1.3 - VSCode 설치

Visual Studio Code 사이트[링크]에서 자신의 운영체제(OS)를 확인한 후, 안정화된 버전을 받도록 합니다.

 

 

---

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

STEP.II 작업폴더를 생성하고, 필요모듈(express, socket.io)을 설치한다.

 

 

STEP.2.1 - 작업폴더를 생성 및 초기화

1. 새 폴더를 만들고, 폴더 안에서 우클릭하여 Code(으)로 열기를 선택합니다.

2. 열린 VSCode에서 [Ctrl + `]를 클릭하여 Terminal을 열고, [npm init] 명령어를 통해 폴더를 초기화* 시켜줍니다. 

*초기화를 위해 package name, version, description, entry point, test command, git repository, keywords, author, license를 입력해 줍니다.

 

 

 

STEP.2.2 - 필요모듈(express, socket.io)을 설치 및 확인

1. 열려있는 커맨드 창에서  [npm install express --save] , [npm install socket.io --save] 명령어를 통해 모듈을 설치해 줍니다.

 >> 여기서 express, socket.io  라는 모듈을 설치하는데, 지금은 뭔지몰라도 괜찮습니다. 다만, Express는 웹을 다루는 프레임워크, socket.io는 실시간으로 간단하게 데이터를 주고받을 수 있도록하는 라이브러리 정도로 알면 됩니다.

2. 폴더내 package.json 내용을 살펴보면, 아까 초기화때 적어넣은 내용과 socket.io가 설치된 것을 알 수 있습니다.

 >> "socket.io":  "^x.x.x" 가 존재한다면 설치가 제대로 된 것입니다.

 

 

---

개발환경구축은 이것으로 마칩니다.

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

 

다시 한번 강조하지만, 본 게시글은 원본를 따라가며

비전공자의 시점에서 이해한 내용들을 기록한 문서입니다.

 

 

---

목 차

개발환경구축 (본 게시글)

↓

로컬 서버 열기

↓

웹에 정적 정보 전송

↓

웹과 서버 간의 정보 교환

↓

채팅 구현