express.js 구조

express.js 구조

express.js 를 설치하면 다음과 같은 파일들이 폴더내에 설치된다.

살펴보도록하자.

요약

* app.js 익스프레스의 메인 파일로 웹서버 생성, 라우팅 등을 모두 app.js에서 한다.

* package.json 프로젝트의 정보를 담고있는 npm 설정파일이다.

* route/ 라우팅 관련 함수, 즉 URL에 따라 호출될 함수를 모아두는 디텍토리다. 라우팅에 있는 파일들을 app.js 에서 불러

와 웹서버에 라우팅을 연결한다.

* public/ css, 자바스크립트, 이미지 등의 정적 파일을 모아두는 리렉토리이다. 기본적으로 style.css가 생성되어있다.

* views/ 뷰 파일이 위치하는 디렉토리이다. 자바라면 JSP파일이 위치하는 디렉토리와 같고, 여기선 ejs템플릿을  사용 하므

로*.ejs파일이 존재한다

package.json

package.json에서는 프로그램 이름, 버전등 노드의 정보를 기술하는 곳이다.

또한 npm install로 설치시에 이 패키지를 참조하여 해당 버전에 맞는  npm을 설치하게 된다. 

npm install 시에 사용하고자 하는 모듈 입력후 --save를 입력하면 자동으로 package.json에 입력이 된다.

bin/www

서버구동을 위한 코드가 기록되어있다. express 서버설정 코드가 기록된 app.js 파일을 가져와서 노드의 http객체와 연동하는 작업이 이루어 지는 부분이다. 실제 서버를 구동하는 파일이다.

app.js

bin/www에서 사용되는 이 파일은 express 설정파일이 담겨있는 핵심 부분이다. express 객체를 생성하고 환경 설정을한다.

라우팅설정을 정희하고, 다향한 모듈을 추출하여 사용한다.

morgan : http 요청에 대해 로깅하는 모듈이다.

body-parser : http 요청중 POST 요청의 데이터에 접근하기 위한 모듈이다. (request.body사용을 위함)

cookie-parser : http로 요청한 클라이언트 쿠키 정보에 접근하기 위한 모듈이다. (set-Cookie : { })

app.set은 특정 키에 값을 설정할때 사용하고, app.use는 익스프레스에서 사용할 미들웨어를 결정한다.

app.set을 이용하여 views키에 views파일의 경로를 지정하고, view의 템플릿 엔진을 ejs로 정의하는 부분이다.

logger('dev')에서 dev는 morgan이 지원하는 로그 포맷이다. 지원 포맷으로는 default, short, tiny, dev가 있다.

이에 대해서는 다음에 자세히 알아보도록하자

여기서 익스프레스는 기본적으로 요청의 바디를 처리하지 않으므로, express.bodyParser()를 사용하여 application/json의 바디를 파싱해 req.body 변수에 할당한다.

urlencodede 의 exteneded를 true로 고치면, UTF-8 인코딩을 사용하여 parsing 하겠다는 뜻이다.

그리고 cookieParser()를 사용하여 Header에 쿠키 부분을 추가하는 부분이며

__dirname/public 의 경로를 전역으로 사용하여서 CSS나 자바스크립트 같은 정적 파일이 있는 위치를 지정한다.

express초기에 설치되지는 않았지만, REST스러운 웹사이트를 구축하려면 GET, POST이외에 PUT, DELETE메소드를 사용해야한다. 하지만 웹브라우저에서는 GET과 POST만 지원하는데 프론트에서 <form> 태그에 다음과 같은 <input>태그를 두어 PUT 이다 DELETE 메소드를 지정한다.

<input type = 'hidden' name ='_method' value = 'PUT'>

methodOverride설치법   npm install method-override --save로 설치하고  var methodOverride = require('method-override'); app.use(methodOverride({'_method'}));

그리고 route를 위한 코드이다.

app.use('/', routes); routes폴더내에 있는 index(default 값)를 찾는다

해당 url로 접속하는 것을 routes/index로 보내어서 그안에서 각각의 요청(GET/ POST)을 통해 처리한다

routes 폴더 내에있는 해당 미들웨어를 찾는 것이다

routes/index.js

express 를 추출하고 express.Router()를 사용하여  라우터 객체를 생성하였다.

그리고 router.get부분은 해당 url로 get요청이 들어왔을때, 생기는 이벤트를 처리하는 루프로써,

여기서는 indes.ejs 화면을 출력한다.

그리고 module.exports = router를 사용하여 이 모듈을 외부에서 참조 할수있게 만들었다.

if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

또한 error 처리는 app.get('env') === 'development'이면 스택트레이서를 출력해주고

그렇지 않으면 스택트레이서를 출력하지 않는다.

기본값은 Development로 지정되어있는데 이를 변경하고 싶다면

NODE_ENV=production node app.js 로 실행하면된다

윈도우에서 실행할때는 set NODE_ENV = production인 변수를 지정해주면된다.

이상으로 express.js의 기본적인 구조에 대하여 알아보았다.