웹 서버에서 웹 텍스트 데이터 읽기

블로그를 읽은 횟수는 텍스트 정보다.

21,870 히트

이 정보를 웹 서버에서 사용할 수 있다. 이 데이터를 HTML5 형식으로 바꾸고 브라우저로 읽을 수 있도록 웹 서비스로 만들었다. 그 과정을 정리했다. 노드 설치가 필요하다. 이렇게 바꾸겠다.

web-text-to-html

Node.js 웹 서버

텍스트 데이터를 브라우저 접속을 통하여 보여주려면 웹 서버가 필요하다. 웹 서버로 Node.js를 사용할 텐데 내장 모듈인 http 대신 Express 모듈을 사용하겠다. 프로젝트 디렉토리를 만든다.

mkdir /tmp/readCount
cd /tmp/readCount

Express를 설치한다.

npm install express-generator --g

Express 초기 파일을 생성한다. Express는 여러 view engine을 사용할 수 있는데 hbs를 선택했다.

express --view=hbs

Express가 사용할 모듈들을 설치한다.

npm install

웹 서버를 수행하여 브라우저 접속을 확인한다.

npm start

http://localhost:3000 로 접속하면 “Express” 문구를 확인할 수 있다.

Express

Welcome to Express

웹 서버를 중지하기 위하여 Ctrl-c 를 입력한다.

웹 텍스트 데이터 읽기

위의 “Express” 문구는 routes/index.js 파일에 저장되어 있으며 이 파일은 views/layout.hbs 파일을 템블릿으로 사용한다. “Express” 문구 대신 텍스트 웹 데이터를 표시하기 위해 routes/index.js 파일 내용을 변경할텐데 그 전에 블로그 읽은 횟수를 Node.js를 사용하여 읽겠다. 아래는 터미널에서 웹 데이터를 읽는 방식이다.

curl -s https://agvim.com/ | \
hgrep -t '#blog-stats-18 > ul > li'

같은 기능을 Node.js에서 동작하도록 수정하겠다. 임의의 디렉토리에 아래 파일을 저장한다. Curl 대신에 request를 사용하고 hgrep 대신에 cheerio를 사용한다.

// readCount.js
var request = require('request');
request('https://agvim.wordpress.com/',
  function (error, response, body) {
    var cheerio = require('cheerio');
    var $ = cheerio.load(body);
    console.log($('#blog-stats-18 > ul > li').text());
  });

이 파일을 수행하기 전에 아래 모듈을 설치한다.

npm install request cheerio --save

노드를 사용하여 실행하면 블로그 읽은 횟수를 보여준다.

node readCount.js
21,870 히트

터미널에서 읽는 방식이나 Node.js에서 읽는 방식이나 둘 다 아래 데이터를 사용하는 것은 같다.

테이터 항목
URL https://agvim.wordpress.com/
CSS selector #blog-stats-18 > ul > li

Node.js에서 웹 테스트 데이터 읽기

위에서 테스트한 코드를 routes/index.js에 적용하겠다.

//routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  var request = require('request');
  request('https://agvim.wordpress.com/',
    function (error, response, body) {
      var cheerio = require('cheerio');
      var $ = cheerio.load(body);
      var count = $('#blog-stats-18 > ul > li').text();
      console.log(count);
      res.render('index', { title: count });
    });
});

module.exports = router;

수정 후 웹 서버 수행한다.

npm start

http://localhost:3000 로 접속하면 “Express” 문구 대신 블로그 읽은 횟수를 확인할 수 있다.

21,870 히트

Welcome to 21,870 히트

웹 서버를 중지하기 위하여 Ctrl-c 를 입력한다.

HTML5에서 CSS 꾸미기

웹 서버에서 웹 데이터를 읽고 브라우저로 보여주는 기능이 완성되었다. 이제 CSS을 사용하여 모양을 조금 변경할 텐데 여러 HTML5 시작 코드 중에 HTML5 Boilerplate를 선택했다. 이 파일을 다운로드하여 public 디렉터리에 저장한다.

cd public
wget https://github.com/h5bp/html5-boilerplate/releases/download/6.0.1/html5-boilerplate_v6.0.1.zip
unzip html5-boilerplate_v6.0.1.zip
rm html5-boilerplate_v6.0.1.zip

public/index.html 파일의 일부분을

<p>Hello world! This is HTML5 Boilerplate.</p>

“21,870 히트” 로 대체하자. 이 후에 이 값을 웹에서 읽어온 값으로 대체할 예정이다. HTML 태그를 div로 변경하고 클래스 이름을 추가한다.

<div class="readCount">21,870 히트</div>

public/index.html 파일의 head 테그 안에 아래 코드를 추가하고

<link rel="stylesheet" href="css/box.css">

새로운 css 파일을 만든다. 클래스 이름 “readCount”에 적용할 css 파일을 만든다. 크기를 고정하고 카드 모양으로 그림자를 넣었다. 그리고 텍스트를 가운데 위치했다.

/*public/css/box.css*/
@import url('https://fonts.googleapis.com/css?family=Work+Sans');

.readCount {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  font-family: 'Work Sans', sans-serif;
  font-size: 2rem;
  height: 15rem;
  line-height: 15rem;
  margin: 10px;
  text-align: center;
  transition: 0.3s;
  width: 15rem;
}

.readCount:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

이제 다시 웹 서버를 수행한다.

cd /tmp/readCount
npm start

브라우저로 http://localhost:3000 로 접속하면 카드 모양의 “21,870 히트” 문구를 확인할 수 있다. Ctrl-c 를 입력해서 웹 서버를 중지한다.

Node.js에서 읽은 웹 텍스트 데이터 브라우저에서 보여주기

웹에서 읽은 데이터를 public/index.html 파일에 삽입하는 단계가 남았다. Express는 직접 public/index.html 정적 파일을 수정하지 않는다. 템블릿이라는 파일을 사용하여 웹 데이터를 삽입하는데 views/index.hbs 파일을 수정하여 블로그 읽은 횟수를 전달할 수 있다.

<!--views/index.hbs-->
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>

이 파일은 Express 모듈에 의하여 사용되는 템플릿 파일로 {{, }} 이 값으로 둘러 쌓인 문자열은 routes/index.js가 전달하는 변수다. 이 변수를 사용하여 웹 데이터가 전달된다. hbs 확장자는 이 파일이 handlebars 템플릿임을 의미한다. public/index.html 파일을 views/index.hbs 파일로 이름을 변경하여 옮긴다.

mv public/index.html views/index.hbs

views/index.hbs의 블로그 읽은 횟수 부분을 수정한다.

<!--views/index.hbs-->
<div class="readCount">{{title}}</div>

웹 서버를 수행한다.

npm start

브라우저로 http://localhost:3000 로 접속하면 “21,870 히트”를 확인할 수 있다.

마무리

웹 데이터를 브라우저에서 읽을 수 있도록 여러 작업을 진행했다.

  • 웹 데이터를 서버에서 읽기
  • 웹 서버 만들기
  • 웹 데이터 CSS로 꾸미기

ExpressHTML5 Boilerplate를 사용했다. 전체 코드를 다운로드하여 살펴보거나 온라인에서 확인할 수 있다. 온라인 서버는 무료 서버에서 동작함으로 잠들어 있다면 10초 정도 로딩 시간이 걸릴 수 있다. 웹 데이터를 읽어서 웹에서 보여주는 것은 일도 아니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.