.png)
정적 vs 동적 웹 프로그래밍
웹 어플리케이션을 제작할 때, 정적으로 혹은 동적으로 코드를 구성해서 서비스를 제공할 수 있다. 정적 프로그래밍은 통상적으로 Static으로 표현하며 말 그대로 이미지나 css 혹은 javascript 파일 등의 컨텐츠를 그대로 전달해주는 것이라고 보면 된다. 따라서 웹 페이지가 변경되거나 수정되지 않는 한 언제나 고정된 웹 페이지만 볼 수 있다.
이에 반해 동적 웹 프로그래밍은 Dynamic으로 표현되며 조금 더 프로그래밍적으로 접근하는 방식이다. 또한 실시간으로 DB와 연동되어 이에 대한 정보를 클라이언트에 제공하기도 하기 때문에 웹 페이지를 열때 매번 새로운 내용을 표시해주고 변경도 가능하다.
정적파일 서비스하기
그렇다면 먼저 정적 파일을 서비스하는 방법을 알아보자.
우리가 전에 만들었던 웹 어플리케이션 app.js 파일을 다시 열어보자.
app.js
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('Hello home page');
});
app.get('/login', function(req, res){
res.send('Login please');
});
app.listen(3000, function() {
console.log('Connected 3000 port!');
});https://expressjs.com/ (express 공식홈페이지) 에서 정적 파일에 대한 document를 살펴보면...
미들웨어 함수가 무엇인지는 잘 모르겠지만 public이라는 디렉토리를 정적인 파일이 위치한 디렉토리로 지정할 수 있고 이를 통해 정적 서비스를 할 수 있다고 되어있다.
따라서 우리가 작성한 소스코드에 app.use(express.static('public')); 를 한 줄 추가하자.
app.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello home page');
});
app.get('/login', function(req, res){
res.send('Login please');
});
app.listen(3000, function() {
console.log('Connected 3000 port!');
});실행시키기전에 우리의 작업 디렉토리에 public이라는 폴더를 만들고 정적 파일을 위치시키자. 나의 경우, 인터넷에서 다운받은 이미지를 "route.png" 로 네이밍하고 public 폴더 안에 이동시켰다.
이제 명령프롬프트 창에 node app.js 를 입력하여 웹 서버를 실행시키고 인터넷 브라우저에 연결시킨 웹 서버에 접속하고 정적 이미지를 로드시켜보자. (http://localhost:3000/route.png) 로 접속
위와 같이 정적 이미지가 웹 페이지에 나타난다.
동적으로 웹 서비스하기
이제 동적인 방식을 살펴보자. app.js 파일에 다음의 코드를 추가한다.
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);
})output 변수에 백틱(esc키 바로 밑에 있는 키)으로 열고 닫은 html 코드를 집어넣으면 이것이 동적으로 처리되어 사용자들에게 보이게 된다. 실제로 app.js 를 실행시키고 /dynamic 주소로 접속해보면 
위와 같이 우리가 작성한 텍스트가 출력된다. 언뜻 보기엔 동적과 정적 프로그래밍에 차이점이 없어보인다. 그러나 만약 우리가 어떠한 텍스트를 반복해서 출력해야하는 상황이 벌어지면 어떻게 해야할까?
정적 프로그래밍에서는 다음과 같이 일일히 출력하고 싶은 만큼 코드를 작성해주어야한다. 지금이야 예시로 5번만 출력하느라 어렵지않았지만 만약 수십번을 출력해야 하는 상황이라면...? 실로 엄청난 시간낭비임에 틀림없다.
이에 반해 동적 프로그래밍은 조금 더 프로그래밍적으로 소스코드를 구성할 수 있다고 했다. 따라서 다음과 같이 반복문으로 처리하면 간단하게 해결된다.
app.js
app.get('/dynamic', function(req, res) {
var lis = '';
for(var i=0; i<5; i++) {
lis = lis + '<li>coding</li>';
}
var output = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello Dynamic!
<ul>
${lis}
</ul>
</body>
</html>`;
res.send(output);
});ul 태그 밑에 변수 lis 앞에 달러($) 표시가 붙은 이유는 변수 lis 가 단순 string이 아니라 변수라는 것을 표현하기 위함이다. 이외에도 Date() 함수를 사용해서 웹 페이지에 접속할 때마다 현재 시각을 출력해줄 수도 있다.
그렇다고해서 정적 프로그래밍이 단점만 있는 것은 아니다. 동적 프로그래밍과 달리 정적으로 코드를 구성하면 서버를 재시작하지 않고도 출력결과를 즉시 반영해서 확인할 수 있다. 동적의 경우, 수정사항이 있다면 서버를 리부팅해서 결과를 확인해야하는 불편함이 있다.
따라서 정적 웹 프로그래밍과 동적 웹 프로그래밍의 장단점을 알고 때에 따라 알맞게 서비스를 구현하는 것이 중요하다.
