express 기초(3): express 구조

 

npx express-generator 명령어를 사용하면 Express 애플리케이션의 기본 템플릿을 만들어준다.
참고로, Express는 Node.js를 위한 웹 프레임워크이다!

express-generator는 프로젝트 구조만 생성하고, dependencies(의존성)는 자동으로 설치하지 않는다. 따라서 프로젝트 생성 후 아래 명령어들을 실행해야 한다.

npm install   # 의존성 설치
npm start     # 서버 실행

 

생성된 Express 프로젝트 구조

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

총 7개의 디렉토리와 9개의 파일로 구성되어 있다.

 

주요 파일 설명

app.js

Express 애플리케이션의 진입점(엔트리 파일)이다. 서버의 주요 설정이 이루어진다.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

여기에서 여러 모듈을 가져와 세팅한다.

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

라우터를 정의한다.

var app = express();

Express 객체를 생성한다.

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

뷰 엔진 설정: Express Generator는 기본적으로 Pug(Jade) 템플릿 엔진을 사용한다.

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

미들웨어 설정: 미들웨어는 요청과 응답 사이에서 로깅, 파싱, 정적 파일 서빙 등의 작업을 수행한다.

app.use('/', indexRouter);
app.use('/users', usersRouter);

라우팅 설정이다. / 경로와 /users 경로로 들어오는 요청을 각각 indexRouter와 usersRouter로 처리한다.

module.exports = app;

애플리케이션을 모듈화한다. bin/www 파일에서 이 모듈을 불러와 서버를 실행한다.

 

bin/www

Express 애플리케이션에서 실제 서버를 실행하는 스크립트이다. 주로 npm start 명령어 실행할 때 사용된다.

1. 포트 설정: normalizePort를 통해 유효한 포트를 결정한 후, Express 애플리케이션에 설정한다.
2. HTTP 서버 생성: http.createServer(app)으로 Express 애플리케이션을 기반으로 HTTP 서버를 생성한다.
3. 서버 리스닝 및 이벤트 핸들러 연결: 서버가 에러가 나거나 정상적으로 실행될 때 처리하는 이벤트 핸들러를 설정한다.

var port = normalizePort(process.env.PORT || '9999');
app.set('port', port);

포트를 설정하고 Express 애플리케이션에 저장한다.

var server = http.createServer(app);

app 객체를 기반으로 HTTP 서버를 생성한다.

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

서버를 리스닝 상태로 만들고, 에러 및 리스닝 이벤트에 대한 핸들러를 설정한다.

 

package.json

프로젝트의 메타 정보와 의존성 관리를 담당한다. npm install을 실행하면 이 파일에 명시된 의존성들이 설치된다.

 

public

정적 리소스 파일(예: 이미지, CSS, 자바스크립트 등)을 서빙하는 폴더이다.

 

routes

각 경로(route)를 정의하는 파일들이 위치한다.

• routes/index.js: 기본 경로 /에 대한 요청 처리 담당.
• routes/users.js: /users 경로에 대한 요청 처리 담당.

각 라우트 파일에서는 express.Router()를 사용해 라우터 객체를 만들고, 이를 module.exports로 내보내 다른 파일에서 사용할 수 있도록 설정한다.

 

views

서버 측에서 렌더링되는 뷰 템플릿 파일들이 위치한다. Express 애플리케이션에서 동적으로 HTML을 생성할 때 사용하는 템플릿 엔진 파일들이다.

 

 

https://expressjs.com/en/starter/generator.html

Express - Node.js web application framework