express(3) - 동적 파일서비스

티스토리 뷰

Node.js/Node.js 공부

express(3) - 동적 파일서비스

댕댕이발🐾 2018. 4. 6. 17:20

이전 포스팅에서 정적 파일서비스를 배워보았는데 정적이 있으면 비교대상인 동적이라는 개념도 늘 존재하기 마련이다.

정적 파일서비스는 public이라는 디렉토리에 이미지파일을 저장하거나 html소스를 작성하여

1
2
3
4
5
6
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/',function(req,res) {
    res.send('Hello World');
});
Colored by Color Scripter
cs

이와 같이 자바스크립트 코드에서 불러오는 형식을 띈다. localhost:포트번호 뒤에 public 디렉토리 안에 있는 파일이름을 넣으면 해당 파일을 웹에서 연결시켜주는 것이다. 그럼 동적파일서비스라는 것은??

얘는 자바스크립트 안에 html 코드를 써주게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
app.get('/dynamic',function(req,res) {
    var output = `
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset = "utf-8" />
            <title></title>
        </head>
        <body>
            Hello, Dynamic!!!!!
        </body>
    </html>
    `
    res.send(output);
})
 
Colored by Color Scripter
cs

이와같은 형식이다. localhost:포트번호/dynamic 의 경로로 접속하게되면 자바스크립트 코드 안에서 작성한 html 코드 내용이 나오게 된다. 그럼 두 방식의 차이점이 일단 외관상으로도 나타나게 된다.

기본적으로 자바스크립트의 소스코드 (서버를 실행시키는 메인파일) 가 수정 됐을 때에는 서버 구동을 위해선 재 실행을 해줘야 한다.

그렇다면 html 내용을 수정하려 할 때 두 방식의 차이점이 나타나게 된다.

정적파일 서비스 - html파일만 수정하면 되므로 해당 html파일을 수정한 후 저장하면 서버 재구동없이 새로고침 시에 바로 반영됨.

동적파일 서비스 - 자바스크립트 파일의 내용이 수정 됐기 때문에 서버연결을 끊은 후 다시 재 구동 시켜야함.

그럼 누가 동적파일 서비스를 쓰겠나? 소스코드는 역할에따라 분리되는게 좋고 심지어 서버 재 구동을 안 해도 된다는데..?

---------------------------------------------------------------------------------------------------------------------

간단한 예로 html 코드 안에 hello 라는 문장을 100번 출력하는 방법이 뭘까 생각해보자면 html에선 그냥 100번 복붙하면 되겠지만 자바스크립트에선 반복문 문법이 사용가능하기 때문에 더 간단하게 표현할 수 있다.

정적파일 서비스 형식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title></title>
</head>
<body>
    Hello, Static
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
.....
    </ul>
</body>
</html>
cs
이런식으로 100번이면 100번을 저래 써줘야 할 것이다.


동적파일 서비스형식
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
app.get('/dynamic',function(req,res) {
    var lis = '';
    var time = Date();
    for(var i=0; i<100; i++) {
        lis = lis + '<li>hello</li>';
    }
    var output = `
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset = "utf-8" />
            <title></title>
        </head>
        <body>
            Hello, Dynamic!
            <ul>
                ${lis}
            </ul>
            ${time}
        </body>
    </html>
    `;
    res.send(output);
});
Colored by Color Scripter
cs

와 같이 반복문을 사용해서 html안에 자바스크립트에서 만든 변수값을 바로 사용할 수가 있으므로 코드가 더 간결해진다.

그 이외에 순수 html에서 사용할 없는 시스템 시간을 나타내는 것과 같은 방법이 가능해진다.

결론적으로 뭐가 좋다 나쁘다 할 수 없는게 자바스크립트파일 안에 html 소스 코드를 통째로 쓰는 것도 보기 좋은 형식은 아니고 그렇다고 순수 html로만 작성하는 데에도 한계가 있다. 그래서 이 둘의 장점만을 가져와서 사용하는 템플릿엔진이 있다.

과거에는 Jade라고 불려왔던 엔진인데 이름이 Pug로 바꼈다. 다음번엔 이 템플릿 엔진을 이용하여 위의 장점들만 취한다는 것을 어떻게 표현하는지 알아보도록 하겠다.

저작자표시

'Node.js > Node.js 공부' 카테고리의 다른 글

6. express 쿼리스트링 사용 (0)	2018.04.25
5. 템플릿 엔진 pug (2)	2018.04.12
express(2) - 정적 파일서비스 (0)	2018.04.02
4. express (1) (0)	2018.03.26
[보충] Node.js 비동기 프로그래밍(aka. callback function) (0)	2018.03.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

T3ch

티스토리 뷰

express(3) - 동적 파일서비스

'Node.js > Node.js 공부' 카테고리의 다른 글

티스토리툴바