Express-웹페이지를 표현하는 방법

웹페이지를 사용자에게 서비스 하는 방법

1. 정적인 파일 전달하는 방법 (이전 게시글 복습)

2. 동적인 파일을 전달하는 방법 (다음 게시글 템플릿 예습)

정적으로 한다? 한번만들어진 것은 언제나 똑같은 모습의 html을 만들려고 하는 것.

public이라는 디렉토리에 html 파일을 놓는다.

app.use(express,static('public'); 로 인해 public 디렉토리 안에서 그 html 파일을 찾게 된다.

Line 10 : 정적인 파일은 수정된 내용을 바로 적용시킬 수 있다. (node app.js를 하지 않아도 된다는 뜻.)

하지만 요청이 들어올 때마다 노드가 알아서 잡아서 던져준다. 그래서 정적인 페이지를 서비스하는 것이 코드를 짜는데 편리하다고 할 수 있다.

Line 14 : app.get()이라는 라우터가 로드를 한번 실행된 다음에, 코드를 수정하면 다시 실행 시켜주어야 한다. (자동화시켜주는 툴이 있긴 하다.)

작성했던 코드가 다시 실행이 되어야 되기 때문에 node 애플리케이션을 껐다 켜야 한다. 

Line 10 : 외부파일로 html로 코드를 짜는 것이 편하다 (자바스크립트로 짜는 것보다). 하지만 경우에 따라서는 이 방법으로 구현하지 못할 때가 있다.

웹페이지에 어떤 텍스트를 여러번 출력하고 싶다고 할 때, 그 개수가 엄청 많고 일정한 규칙을 가지고 있다고 한다면 동적으로 자바스크립트로 구현해 주어야 한다. (이하)

    

Line 30,32 : 변수를 불러올 때, 서버 사이드 스크립트에서 ${} 치환자를 사용.

치환자를 사용하는 HTML파일을 받고, 이를 Line 24-34 : 백틱(`)으로 감싸고, 웹 상에서 바로 사용할 수 있는 자바스크립트 모듈을 출력할 수 있다.

자바스크립트를 통해서 서버쪽에서 프로그래밍적으로 웹페이지를 만들도록 있기 때문에, 이러한 작업이 가능한것.

하지만 순수한 HTML은 현재 시간을 표시하는 능력 또는 이미 화면에 표시된 코드를 프로그래밍적으로/동적으로 바꿀 수 있는 능력이 존재하지 않기 때문에 이런 경우에는 동적으로 웹페이지를 생성할 수 있는 기능을 가질 필요가 있는 것이다.

하지만 동시에 Line 20-Line34 처럼 자바스크립트 안에서 html 파일을 작성하는 것은 여간 까다로운 일이 아니다 ㅎ

동적으로 또는 정적으로 웹페이지를 만드는 경우 모두 장점과 단점을 달리 가지고 있다.

여기서 둘의 장점을 모두 가지고 있는 건 없을까? 그 방법은 그 다음 게시물을 참고하자. 템플릿 엔진