[Node.js 4강] Express로 웹페이지를 표현하는 방법 How to Express Web Pages with Express

본 강의는 생활코딩 강좌를 바탕으로 복습하며 진행되는 코드들을 재구성한것입니다. 일부 코드들의 경우 호환성의 이유로 원본의 강좌와 다를수 있음을 알려드립니다.

NodeJS 6.11.0 LTS, Express 4.X 버전에서 완벽하게 작동하는것을 확인하였습니다.

이번 강의에서는 Express 프레임워크에서 웹페이지를 구현하는 방법론에 대해서 알아보도록 하겠습니다. 프로그래밍이라는것이 그렇듯이 이렇게 구현하는 것이 답이라는 것은 아닙니다. 다만 코드의 가독성을 위해서 최대한 간결하고 읽기 쉬운 코드를 작성하는것이 좋은데 이를 위해서는 프레임워크 단위에서 제공되는 각종 기능들을 잘 활용하는것이 중요하다고 생각합니다.

Express로 웹페이지를 제공하는 방법은 여러가지가 있지만 지난 2~3강에서 구현했던 방식의 구현 방법을 다시 살펴보도록 하겠습니다. app.js 내에 직접 웹언어들을 추가하는 방법이었는데요. 우선 코드를 다시 살펴봅시다.

새로운 라우팅 경로를 설정해보았습니다. /dynamic 의 경로에서 작동되도록 설정해두었습니다. 확인하여보면 /dynamic 경로로 라우팅되는 코드들 안에 HTML코드들이 직접 입력되어있는것을 확인가능하고 추가로 JavaScript 코드들도 삽입되어있음을 확인하실수 있습니다. 애초에 NodeJS 프레임워크가 JavaScript 위에서 돌아가므로 자바스크립트를 바로 써도 사용이 가능한 것입니다. HTML 내에서의 변수 호출 방법은 ${변수명} 을 통하여 값을 읽어올수 있습니다. 참고로 HTML코드가 직접 작성되는 output 변수 내의 ` 기호는 L 두칸 옆에 있는 ' 이 아닌 숫자1 옆에 있는 ` 기호입니다. 결과값은 아래와 같이 출력됩니다.

보시다시피 자바스크립트를 활용한 코드들과 HTML코드들이 정상적으로 출력됨을 확인하실수 있습니다. 다만 이 방법은 매우 가독성이 매우 낮은 방법으로 실제로는 거의 쓰이지 않고.. 초반에 Hello World 찍어볼때에나 사용되는 방법입니다. 실제로 아래와 같이 코드의 가독성이 매우 떨어짐을 확인할수 있는데.. HTML 코드내의 태그들도 전혀 분류가 되고 있지 않아 코드가 지저분해질수 있습니다. 그래서 사용하는것이 Jade 모듈 , 최근에는 저작권 문제로 Pug 모듈로 이름이 바뀌었습니다. 사용법은 다음 강의에서 알아보도록 하겠습니다.