記錄

생활코딩_Node.js) 웹페이지 표현 본문

Web/Node.js

생활코딩_Node.js) 웹페이지 표현

surhommejk 2018. 7. 30. 12:08


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

app.use(express.static('public'));

app.get('/dynamic', function(req, res){
let li_tag = '';
for(let i = 0; i < 5; i++){
li_tag += '<li>hello</li>';
}

const dynamic_page = `
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test page</title>
</head>
<body>
hello cafe get!
<ul>
${li_tag}
</ul>
</body>
</html>
`;
res.send(dynamic_page);
});

app.listen(3000, function(){
console.log('Connected 3000 port!')
});


이번 강의에서는 정적으로 표현하는 것과 동적으로 표현하는 것의 장단점을 배웠다. 스프링때와 크게 다르지 않았다.

정적으로 페이지를 만들 경우 서버를 껐다 켜지 않아도 새로고침을 통해 바로 변화를 파악할 수 있었다.(사실 근데 이건 아톰으로 쉽게 파악이 가능함) 하지만, 위와 같이 반복문을 통한 연산은 불가능했다. html 페이지만 둬야하기 때문이다. 근데 이것도 나중엔 아마 html 내부 javascript 로 구현이 가능할 것인데 일단 입문용 강의다 보니 이렇게 가르치시는 듯 하다.

동적으로 만든 페이지의 변경사항은 스프링과 같이 서버를 껐다 켜야 확인이 가능했다. 이를 보니 아마도 서버가 run 되면서 진입점인 app.js 를 싹 다시 읽기 때문인 듯 하다. 이 말인즉, 한 번 서버를 켜면 최초 read때 봐둔 경로 설정, 로직들을 서버에 올리고 이것들을 사용하는 것 같다는 뜻이다. 따라서 다시 read 되도록 하려면 껐다 켜는 방법밖에 없어 보인다.


이번 수업에서 처음 본 부분은 ` `의 활용이다.(사실 이걸 뒤에서 쓸까 싶긴 하다. 불편해보이고 코드도 정갈하지 못해 보인다)

const dynamic_page = `
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test page</title>
</head>
<body>
hello cafe get!
<ul>
${li_tag}
</ul>
</body>
</html>
`;
res.send(dynamic_page);

` ` 를 활용함으로써 내부의 특수문자들을 자바스크립트가 페이지로 넘기도록 돕는다.

저작자표시

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

생활코딩_Node.js) 쿼리스트링 (get 방식)  (0) 2018.07.31
생활코딩_Node.js) 템플릿 엔진  (0) 2018.07.31
생활코딩_Node.js) 정적 파일 서비스  (0) 2018.07.29
생활코딩_Node.js) Express 기초(routing)  (0) 2018.07.29
생활코딩_Node.js) MEAN Stack  (0) 2018.07.29
'Web/Node.js' Related Articles more
Comments