NodeJS 6강 : 정적파일, 화면처리

NodeJS

NodeJS 6강 : 정적파일, 화면처리

NodeMan 2019. 10. 25. 00:40

NodeJS 6강 : 정적파일, 화면처리

======================================================================

정적파일

웹 서비스를 하려면 당연하겠지만 웹이라는 하나의 화면을 구성해야합니다.

화면을 구성하는걸 html을 이용해서 화면을 구성하겠죠. 하지만 이 html 안에 css style, javascript

방대한 내용이 구성하게되면? html이 어떻게 될까요? html 문서에 몇 천줄이 입력되있다면?

그래서 파일 분리라는 개념이 나옵니다. HTML은 파일 분리해서 관리하기위해 파일을 불러오는 태그가 따로 있습니다.

HTML에서 분리된 css 파일을 가지고 올때 link 태그를, javascript 파일을 가지고 올때 script 태그를 사용합니다.

웹 서비스에 올리지 않고 로컬 환경에서 화면을 확인할때 그냥 html파일을 켰을때 가지고오는 경로는

하지만 서비스에 올라간다면? css 파일을 어떻게 가지고 와야할까요?

이를 해결하기 위해 웹 서비스 즉 웹 서버는 정적파일을 제공하는 url 주소를 만들어줍니다.

이제 프로젝트의 구성을 관리를 위해서 실제 서버에 필요한 js파일은 app 폴더에

정적 파일을 관리할 static 폴더를 추가했습니다.

(경로가 변경됨에 따라 package.json의 scripts로 실행시키던 경로도 변경해줘야 합니다.)

테스트를 위해 css 파일을 하나 준비합니다.

정적파일을 제공하기 위해서는 express 모듈로 정적파일을 찾아주는 url을 하나 만들어 줘야하는데

저는 static으로 했습니다.

단 한줄만 추가 하면 됩니다.

1

app.use('/static', express.static(path.join(__dirname, '../static')));

cs

서버를 키고 static으로 지정한 url로 파일 이름으로 접근하면 접근이 됩니다.

화면처리

express 모듈로 화면 처리는 템플릿 모듈을 사용하거나 send로 html 내용을 작성하는 방법이 있습니다.

그중에서 템플릿 모듈은 ejs가 있고 이 강의에서 사용할 방법은 html 내용을 읽어서 send로 보내는

node 내장 모듈을 이용할 생각입니다.

화면처리를 위한 index.html 파일을 하나 만들겠습니다.

그리고 index.html 파일을 읽고 실제 랜더 작업을 하는 render.js 파일도 만들겠습니다.

index.html

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/test.css">
    <title>NodeMan</title>
</head>
<body>
    <div id="node">NodeMan</div>
</body>
</html>
Colored by Color Scripter

cs

그리고 css에는 #node { color: blue; font-weight: 700; }

id 선택자 node에게 파란색 글씨색에 굵기 효과를 주겠습니다.

render.js

1
2
3
4
5
6
7
8
9
10
11

import fs from 'fs';
 
var render = (res) => fs.readFile('./view/index.html', 'utf8', (error, data) => {
    if(error) {
        res.send(error);
    } else {
        res.send(data);
    }
});
 
export default render;
Colored by Color Scripter

cs

app.js

1
2
3
4
5
6
7

    routing(app) {
        for(var i = 0; i < this.route.path.length; i++) {
            app.get(this.route.path[i], function(req, res) {
                render(res);
            });
        }
    }
Colored by Color Scripter

cs