[Node.js] express-generator로 Express 구조 해부해보기

 

🤔 express-generator가 뭐지?

npx express-generator

👉 Express 서버의 정석 폴더 구조를 자동으로 만들어주는 도구

 

// 패키지 설치
npm install

// 프로젝트 구동
npm start

npm install는 package.json의 dependencies에있는 모듈들을 자동으로 다운로드 해  node_module 폴더에 넣어준다. 

그 과정을 거쳐야지 프로젝트가 정상적으로 구동될 것이다. 

 

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

/bin/www 파일을 확인하면, 포트 넘버를 확인할 수 있다.

혹시 충돌이 이러나면 이곳의 포트넘버만 수정해주면 된다.

 

그러면 브라우저에서 localhost:3000으로 확인을 해볼 수 있을 것이다.

---

생성하면 나오는 기본 구조

express-generator를 설치하면 자동으로 생성되는 폴더들이다. 이것들이 어떻게 구성되어있는지 확인해보자.

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

---

1️⃣ [bin/www] — 서버 실행

#!/usr/bin/env node

var app = require('../app');
var http = require('http');

var server = http.createServer(app);
server.listen(3000);

• 포트 열기
• 실제 서버 실행
• 에러 핸들링

---

2️⃣ [app.js] — 요청 처리, 서버 설정

var express = require('express');
var app = express();

① 미들웨어 등록

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

② 정적 파일

app.use(express.static(path.join(__dirname, 'public')));

③ 라우터 연결

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

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

---

3️⃣ [routes/] — URL 담당 

routes/
├─ index.js
└─ users.js

 

[routes/index.js]

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('index');
});

module.exports = router;

여기서 router는 작은 app 이라고 볼 수 있음.

• /users → users.js
• / → index.js
• 이렇게 URL별로 파일을 분리해서 파일 하나에 URL 수백 개 쌓이는 것을 방지!

---

4️⃣ [views/] — 화면 담당 (MVC의 V)

views/
├─ layout.pug
├─ index.pug
└─ error.pug

res.render('index', { title: 'Express' });

서버가 HTML 만들어서 보내는 구조

---

5️⃣ [public/] — 정적 파일

public/
├─ stylesheets/
├─ javascripts/
└─ images/

• CSS
• JS
• 이미지

app.use(express.static('public'))

요청 거치지 않고 바로 제공

---

 

app.js : 설정,
routes : URL,
bin/www : 실행,
public : 정적,
views : 화면

요청 →
bin/www →
app.js →
middleware →
routes/* →
response

 

---

이처럼 Express는 각 역할을 맡은 파일들이 유기적으로 연결되어 하나의 서버를 구성한다.

express-generator 없이 Express를 공부해본 경험이 있다면,
비슷한 설정 코드들이 여러 파일에 반복해서 등장했던 기억이 있을 것이다.

실제 프로젝트에서 express-generator를 사용하면 이런 반복을 줄이고, 역할이 분리된 구조를 빠르게 구성할 수 있다.

특히 협업 환경에서는  파일 구조나 설정 등을 모두가 같은 기준으로 이해할 수 있기 때문에,
사실상 선택이 아니라 기본에 가까운 도구라고 볼 수 있다.