node.js에서 html기본 뼈대파일 만들기

자바스크립트 분야가 폭발적으로 성장하면서 몇년간 관련 프레임워크(Angular,React,Vue, Meteor 등....)가 크게 성장했다. 리액트, 앵글러, Vue 모두 프론트 쪽의 프레임워크로 출발했지만 현재 서버까지 모두 지원하고 있다. 이제 자바스크립트로 프로젝트를 진행하려면 백 ~ 프론트까지 이것저것 설치해야 할 사항들이 많아졌다. 이런 상황에서 더욱 중요시되는 부분은 기본기다. 

이번 포스팅에서는 대규모 프로젝트가 아닌 node.js + express를 사용해서 가장 간단하게 웹 서버를 운영할 수 있는 기본뼈대를 정리해보자.  

1 『express설치』

node.js가 설치되었다는 전제하에 폴더를 만들고, express를 설치한다.(터미널 or 명령프롬프트) express설치 명령어는 다음과 같다.

npm install --save express ejs

or

npm install --save express

템플릿 엔진 ejs는 입력하지 않더라도 상관없다. 정말 껍데기 파일만 만들고자 한다면 ejs도 타이핑하지 않는다. 

2 app.js

express를 설치할 때, generator 명령어를 대부분 사용한다. generator를 사용하면 기본 파일과 함께 폴더까지 설치되기 때문에 편리하다.(탬플릿을 사용한다면) 하지만 테스트용 프로젝트를 만들거나 연습용으로 불필요한 내용들이 설치된다. 현재 skeleton파일을 만들 예정이므로 불필요한 파일들을 모두 제거한 app.js만 만들어보자.

const express = require('express'); const path = require('path'); //Init app var app = express(); //View engine setup app.set('views', path.join(__dirname , 'views')); app.set('view engine' , 'ejs'); //set public folder app.use(express.static(path.join(__dirname , 'public'))); app.get('/', function(req,res){ res.sendFile(path.join(__dirname , 'index.html')); }) //start the server var port = 80; app.listen(port , ()=>{ console.log('Server is running at '+port); })

app.js에서는 index.html파일을 public 폴더에 지정을 했고, 이제 남은 부분은 public폴더와 index.html 껍데기 파일이다.

3 index.html

express.static()에서 폴더를 app.js가 있는 위치의 public폴더로 지정했기 때문에 아래처럼 public폴더를 생성한다. 그리고 public폴더에는 '/'경로(localhost)로 접속했을 때 연결되는 index.html파일을 넣어준다.

express를 사용하지 않는 경우에는 fs.readFile()을 활용할 수 있는데, fs모듈로 index.html을 지정하게 되면, index.html파일 내에서 지정한 경로를 읽어들이지 못하는 문제가 발생한다. 따라서 테스트용 버전을 진행할 때, 위와 같이 express의 static미들웨어를 사용하면 빠르게 웹서버를 제작하고, 테스트를 진행할 수 있다.