개발자의 개발 블로그

django나 ruby 언어의 경우, 관리자페이지를 쉽게 세팅할 수 있다.

그런데, 노드의 경우 그런 것을 보지 못했다. 그래서 검색을 한 결과 

Adminbro라는 툴? 

AdminBro는 프레임워크를 이용하여 경로를 랜더링하므로, 설치를 해야한다. 목록은 다음과 같다.

• Express
• Hapi
• Koa.js
• Nest.js

나는 익스프레스를 사용하고 있다.

설치 

1.  npm install admin-bro @admin-bro/express

2. npm install express express-formidable

사용

맨 위에 불러온다. AdminBro관련 코드를...

const AdminBro = require('admin-bro')

const AdminBroExpress = require('@admin-bro/express')

전체 코드는 다음과 같다.

const AdminBro = require("admin-bro");
const AdminBroExpress = require("@admin-bro/express");

const express = require("express");
const app = express();

const adminBro = new AdminBro({
  databases: [],
  rootPath: "/admin",
});

const router = AdminBroExpress.buildRouter(adminBro);
app.use(adminBro.options.rootPath, router);
app.listen(8080, () => console.log("AdminBro is under localhost:8080/admin"));

일단, Adminbro를 띄우는 코드이다. 그런데, 다음과 같은 에러가 발생했다.

Error: Cannot find module 'tslib'

tslib 모듈을 찾을 수 없다. 

찾을 수 없으면? npm으로 설치해주면 된다.

해결 방법 : npm i tslib

후, 실행하니 정상적으로 떴다. 오예...음 이제 시작할 준비는 끝났다. 이제 적용해보자.

4000번 포트를 사용하고 있기 때문에 발생하는 에러이다.

4000번 포트를 사용하고 있던 서버를 종료했음에도 불구하고, 살아있기 때문에 발생하는 것이다.

이럴 경우,

kill을 해서 포트를 꺼버리던지, 다른 포트 예를 들면 4444를 쓰던지 해야한다.

그럼 어떻게 포트 프로세스를 중단시킬까?

1. 4000포트를 사용중인 프로세스 찾기 

$ lsof -i :4000

하면, 다음과 같이 사용중인 녀석이 나온다. 이제 이 것을 죽여버리자!

COMMAND   PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    13888         jsh   28u  IPv6 0x75b989f13d6c5017      0t0  TCP *:terabase (LISTEN)

2. 죽이기

kill -9 13888

즉, kill -9 PID을 하면, 해당 프로세스가 종료된다.  -9는 알바벳 쥐(g)가 아니라 숫자 구(9) !! 주의하자! 처음엔 나도 -g로 썼었다;;

그러면, 위 에러가 나던데에서 4000번 포트를 사용할 수 있게 된다.

app.js에서 라우터를 사용하는데, 이러한 에러가 발생했다.

const pageRouter = require("./routes/page");  

app.use("/", pageRouter);

이렇게 단순한 두 줄에서 에러가 났다. 

처음에는 오타인 줄 알고 유심히 봤지만 너무 단순한 문장이라 에러날 곳이 없었다.

검색했다. 문제는 page.js 파일 안에 있었다.

바로~ router를 모듈로 export해주지 않아서 난 에러였다. 이런이런~

module.exports를 통해서 router를 등록해줘야 다른 모듈에서 사용이 가능하기 때문에 꼭 붙여줘야한다.

참고로 꼭 맨 밑에 작성하지는 않아도 된다. 하지만 꼭 있어야한다.

이번 에러로 하나 배웠다. 실수하지 말고 module.exports는 잊지말자!! 

1. 클라이언트와 서버

클라이언트와 서버

이전의 일반적인 사이트는 단순히 클라이언트의 요청(request)과 서버의 응답(response)로 작동했다.

주소창에 URL주소를 입력하거나, 웹사이트에 들어가 뉴스 링크를 클릭하는 등의 동작으로 Request가 발생하는데 

이 Request가 서버로 전달되면 서버는 Response를 보낸다. 즉, 서버는 클라이언트의 Request가 없으면 데이터를 전송하지 않는다. Request가 클라이언트쪽에서 먼저 시작되고, 그 request에 대한 response만 전달된다.

결론 : 서버는 클라이언트의 요청에만 응답하므로 단방향성을 갖는 연결 관계라고 할 수 있다.

웹 소켓

웹의 발전하면서, 클라이언트의 요청에 응답만 하는 단방향성이 아닌 양방향성의 웹사이트가 유행하게 되었다.

즉, 클라이언트와 서버의 연결이 항상 유지된다. 연결이 유지된 상태에서 서버 또는 클라이언트상의 이벤트가 발생하면 Event listener에 의해 서버에서 클라이언트로, 또는 클라이언트에서 서버로 데이터의 전달이 이뤄진다. 

이것이 웹 소켓(WebSocket)이다. 아쉬운점은 오래된 브라우저의 경우 지원을 하지 않아 동작하지 않는 문제가 있다.

결론 : 웹소켓은 웹 서버와 웹 브라우저 간의 양방향 통신을 위해 만들어진 프로토콜이다.

socket.io

socket.io는 자바스크립트 모듈로, 양방향 통신이 가능한 웹사이트를 구축하기 위해서 node.js와 함께 사용된다.

웹소켓과 유사하나, 브라우저 간 호환이나 이전 버전 호환을 고려하여 개발된 node.js 모듈이다.

2. socket.io사용법

1) 새 폴더 생성

2) 터미널(또는 CMD)을 열고 1) 폴더 경로로 이동한다.

3) npm init --> package.json이 생성된다.

4) npm install express socket.io --save

5) 에디터(vs code 또는 atom 등등..)으로 열고 1) 경로로 Open.. 한다.

6) index.html과 server.js 파일을 생성한다.

이렇게 하면 세팅이 완료되었다.

server.js부터 작성해보자

먼저, 서버를 생성하고 접속 가능한 코드는 간단하지만 한번 해보면

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

  res.send('<h1>Hello world</h1>');

});

http.listen(3000, function(){

  console.log('server on & port : 3000');

});

이렇게만 작성한 뒤, 터미널에서 node index.js 를 입력하면 생성한 서버가 동작하게 된다.

정상적으로 실행이 되었다면 server on & port : 3000이 뜰 것이다.

그리고 

http://localhost:3000/

으로 접속을 해보면

Hello world가 크게 보인다. 이렇게하면 node.js로 서버를 동작시키는 입문 오브 입문 예제를 완성한 것이다.

이제 socket.io를 사용해서 실시간 채팅을 만들어보려고 한다.