๐Ÿ•Š๏ธํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค/TIL

[๋ฐ๋ธŒ์ฝ”์Šค] Express Generator ๊ตฌ์กฐ์™€ ํ•ต์‹ฌ ํŒŒ์ผ ๋œฏ์–ด๋ณด๊ธฐ(www, app.js)

ํ‚ํ‚์ž‰ 2025. 4. 11. 23:51

์–ด์ œ์— ์ด์–ด์„œ ์˜ค๋Š˜์€ map์— object๋ฅผ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ , map์„ ํ™œ์šฉํ•˜์—ฌ ์œ ํŠœ๋ฒ„ ์ •๋ณด ์กฐํšŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์•˜๋‹ค. - ์–ด์ œ๋ž‘ ๋งŽ์ด ๊ฒน์น˜๋Š” ๋‚ด์šฉ๋“ค์ด์–ด์„œ ์ •๋ฆฌ๋Š” ์ƒ๋žต.

 

๋Œ€์‹  ์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด Express์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ, ๊ทธ๋ฆฌ๊ณ  express-generator๋ฅผ ํ†ตํ•ด Express ํ”„๋กœ์ ํŠธ์˜ ํ‹€์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ์—ฌํƒœ๊นŒ์ง„ ๊ฐ•์‚ฌ๋‹˜ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผ API๋ฅผ ๋งŒ๋“ค๊ธฐ๋งŒ ํ•˜๋‹ค ๋ณด๋‹ˆ ์ผ๋‹จ ์ฝ˜์†”๋งŒ ์ฐํžˆ๋ฉด ์˜ค์˜ค์˜ค์˜ค ํ–ˆ๋Š”๋ฐ, ์˜ค๋Š˜์€ ๊ทธ ๊ตฌ์กฐ๋ฅผ ์ง์ ‘ ๋“ค์—ฌ๋‹ค๋ณด๋ฉด์„œ Express๋ฅผ ๋” ๊นŠ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.


๐ŸณExpress๋Š” ํ”„๋ ˆ์ž„์›Œํฌ

์‚ฌ์‹ค Node.js๋กœ ์›น ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค ๋• http ๋ชจ๋“ˆ๋งŒ์œผ๋กœ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค. ํ•˜์ง€๋งŒ API๊ฐ€ ๋งŽ์•„์ง€๊ณ  ์š”์ฒญ์ด ๋‹ค์–‘ํ•ด์งˆ์ˆ˜๋ก ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ๊ฐ€ ์–ด๋ ค์›Œ์ง„๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•ด ์ฃผ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ Express์ด๋‹ค.

 

๊ณต์‹ ๋ฌธ์„œ์—์„œ๋Š” Express๋ฅผ ์ด๋ ‡๊ฒŒ ์†Œ๊ฐœ ํ•˜๊ณ  ์žˆ๋‹ค.

Fast, Unopinionated, minimalist web framework for Node.js

 

์ฆ‰, ๊ฐ„๋‹จํ•˜๊ณ  ๋น ๋ฅด๋ฉฐ, ์œ ์—ฐํ•˜๊ฒŒ ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ์›น ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๋Š” ๊ฒƒ์ด๋‹ค.

 

https://expressjs.com/ko/

 

Express - Node.js ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ

Express is a fast, unopinionated, minimalist web framework for Node.js, providing a robust set of features for web and mobile applications.

expressjs.com


๐Ÿช„Express Generator

Express ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ธฐ๋ณธ ํ‹€์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ด์ฃผ๋Š” ๋„๊ตฌ

๊ฐœ๋ฐœ์ž๊ฐ€ ๋งค๋ฒˆ app.js๋ฅผ ๋งŒ๋“ค๊ณ , routesํด๋”๋ฅผ ๋งŒ๋“ค๊ณ , listen() ์„ค์ •์„ ํ•˜๊ณ ...์ด๋Ÿฐ ๋ฐ˜๋ณต ์ž‘์—…์„ ํ•˜์ง€ ์•Š๋„๋ก ๋ฏธ๋ฆฌ ์ƒ์„ฑ๋œ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋„๊ตฌ์ด๋‹ค.

 

์„ค์น˜

$ npm install express-generator -g

์‚ฌ์šฉ

express

๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด, ํด๋”๊ฐ€ ์ž๋™์œผ๋กœ ์„ธํŒ…์ด ๋œ๋‹ค.

 

Generator ์—†์ด ์ง์ ‘ ๋งŒ๋“ค๋ฉด?

express-generator ์—†์ด ๋งŒ๋“ค๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ ˆ์ฐจ๊ฐ€ ํ•„์š”ํ•˜๋‹ค:

  1. npm init, npm install express
  2. app.js ์ง์ ‘ ์ž‘์„ฑ
  3. router, views, public ์ง์ ‘ ๊ตฌ์„ฑ
  4. ํฌํŠธ ์„ค์ •, listen ์ฝ”๋“œ ์ž‘์„ฑ

์ง€๊ธˆ๊นŒ์ง€๋Š” ์ด๋ ‡๊ฒŒ ์‹ค์Šต์„ ์ง„ํ–‰ํ•ด์™”๋‹ค.ํ•˜์ง€๋งŒ ๋‹จ์ˆœ ์‹ค์Šต์ด๋ผ๋ฉด ๊ดœ์ฐฎ์ง€๋งŒ, ํ˜‘์—…์„ ํ•˜๊ฑฐ๋‚˜ ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•œ๋‹ค๋ฉด ๊ตฌ์กฐํ™”๊ฐ€ ํ•„์ˆ˜์ด๋ฏ€๋กœ generator ์‚ฌ์šฉ์ด ํ›จ์”ฌ ํšจ์œจ์ ์ด๋‹ค.


๐Ÿ—‚๏ธํด๋”๊ตฌ์กฐ

์ผ๋‹จ, ์ƒ์„ฑ๋œ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

myapp/
โ”œโ”€โ”€ app.js
โ”œโ”€โ”€ bin/
โ”‚   โ””โ”€โ”€ www
โ”œโ”€โ”€ public/
โ”‚   โ”œโ”€โ”€ images/
โ”‚   โ”œโ”€โ”€ javascripts/
โ”‚   โ””โ”€โ”€ stylesheets/
โ”œโ”€โ”€ routes/
โ”‚   โ”œโ”€โ”€ index.js
โ”‚   โ””โ”€โ”€ users.js
โ”œโ”€โ”€ views/
โ”‚   โ”œโ”€โ”€ error.jade
โ”‚   โ””โ”€โ”€ index.jade
โ”œโ”€โ”€ package.json

 

bin > www

์„œ๋ฒ„ ์‹คํ–‰ ํŒŒ์ผ

var app = require('../app');
var debug = require('debug')('expressgenerator:server');
var http = require('http');
  • ../app์—์„œ ์„ค์ •ํ•œ Express ์•ฑ ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
  • debug: ๋””๋ฒ„๊น…์šฉ ๋กœ๊ทธ๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค.
  • http: ์‹ค์ œ ์„œ๋ฒ„๋ฅผ ๋„์šฐ๊ธฐ ์œ„ํ•œ ๋กœ๊ทธ
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
  • ํ™˜๊ฒฝ๋ณ€์ˆ˜ PORT๊ฐ€ ์žˆ์œผ๋ฉด ์‚ฌ์šฉํ•˜๊ณ , ์—†์œผ๋ฉด ๊ธฐ๋ณธ๊ฐ’ 3000์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • Express ์•ฑ์— ์ด ํฌํŠธ ์ •๋ณด๋ฅผ ๋“ฑ๋กํ•œ๋‹ค.
var server = http.createServer(app);
  • app ๊ฐ์ฒด๋ฅผ ์ธ์ž๋กœ ๋„˜๊ฒจ HTTP ์„œ๋ฒ„๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
  • ์„œ๋ฒ„ ๋ฆฌ์Šค๋‹ ๋ฐ ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ์„ ์œ„ํ•œ ์ฝ”๋“œ์ด๋‹ค.
  • .listen()์œผ๋กœ ์‹ค์ œ ์„œ๋ฒ„๋ฅผ ๊ตฌ๋™ํ•˜๊ณ , ์—๋Ÿฌ์™€ ๋ฆฌ์Šค๋‹ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์ฝœ๋ฐฑ์„ ๋“ฑ๋กํ•œ๋‹ค.

๐Ÿ‘‰ wwwํŒŒ์ผ์€ Express ์•ฑ์„ ๊ฐ์‹ผ HTTP ์„œ๋ฒ„๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์‹คํ–‰ํ•˜๋Š” ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ

 

app.js

Express ํ•ต์‹ฌ ์„ค์ • ํŒŒ์ผ

app.js์—๋Š” ์„œ๋ฒ„์˜ ์ „๋ฐ˜์ ์ธ ์„ค์ •๊ณผ ๋ฏธ๋“ค์›จ์–ด, ๋ผ์šฐํŒ… ์ฒ˜๋ฆฌ๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
  • ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ์šฉ http-errors, express, path, ์ฟ ํ‚คํŒŒ์„œ, ๋กœ๊ทธ์šฉ morgan ๋“ฑ ํ•„์ˆ˜ ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
  • /, /users ์š”์ฒญ์ด ๋“ค์–ด์™”์„ ๋•Œ ์ฒ˜๋ฆฌํ•  ๋ผ์šฐํ„ฐ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.
var app = express();
  • ๋ชจ๋“  ์„ค์ •์˜ ๊ธฐ๋ฐ˜์ด ๋˜๋Š” app ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
  • ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์€ view ํด๋”์— ์œ„์น˜ํ•œ๋‹ค.
  • ๊ธฐ๋ณธ ๋ทฐ ์—”์ง„์€ 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')));
  • ๋ฏธ๋“ค์›จ์–ด ์„ค์ •
๋ฏธ๋“ค์›จ์–ด ์„ค๋ช…
logger('dev') ์š”์ฒญ ๋กœ๊ทธ ์ถœ๋ ฅ
express.json() JSON ์š”์ฒญ ๋ฐ”๋”” ํŒŒ์‹ฑ
express.unlencoded() ํผ ํ˜•์‹ ๋ฐ์ดํ„ฐ ํŒŒ์‹ฑ
cookieParser() ์š”์ฒญ์˜ ์ฟ ํ‚ค ํŒŒ์‹ฑ
express.static() public/ ํด๋” ์ •์  ํŒŒ์ผ ์ œ๊ณต

 

๐Ÿ‘‰ ์—ฌ๊ธฐ๊นŒ์ง€๊ฐ€ ์š”์ฒญ์ด ๋“ค์–ด์˜ค๊ธฐ ์ „ ์ฒ˜๋ฆฌ๋˜๋Š” ๋ฏธ๋“ค์›จ์–ด๋‹ค. ์š”์ฒญ์„ ๊ฐ€๊ณตํ•˜๊ณ , ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

 

app.use('/', indexRouter);
app.use('/users', usersRouter);
  • ์‹ค์ œ ์š”์ฒญ ๊ฒฝ๋กœ์™€ ๋ผ์šฐํ„ฐ๋ฅผ ์—ฐ๊ฒฐํ•œ๋‹ค.
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
  • ์˜ˆ์™ธ์ฒ˜๋ฆฌ. ์œ„ ๋ผ์šฐํ„ฐ๋ฅผ ๋‹ค ํ†ต๊ณผํ–ˆ๋Š”๋ฐ ํ•ด๋‹น ๊ฒฝ๋กœ๊ฐ€ ์—†๋‹ค? -> 404 ์—๋Ÿฌ๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค.
  • ๋ฐœ์ƒํ•œ ์—๋Ÿฌ๋ฅผ ๋ทฐ์— ์ „๋‹ฌํ•˜๊ณ  ๋ Œ๋”๋งํ•œ๋‹ค.
module.exports = app;
  • app ๊ฐ์ฒด๋ฅผ ์™ธ๋ถ€(www)์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋‚ด๋ณด๋‚ธ๋‹ค.

 

routes ํด๋”

๋ผ์šฐํ„ฐ ํŒŒ์ผ ๋ชจ์Œ

//index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
  • GET / ์š”์ฒญ์ด ๋“ค์–ด์˜ค๋ฉด views/index.jade๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค.
  • res.render()๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ํ…œํ”Œ๋ฆฟ์— ๋„˜๊ฒจ์ฃผ๊ณ  HTML์„ ์ƒ์„ฑํ•œ๋‹ค.

 

views ํด๋”

ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ

  • jade ํ…œํ”Œ๋ฆฟ ์—”์ง„์„ ๊ธฐ๋ฐ˜์œผ๋กœ HTML์„ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•œ๋‹ค.
  • res.render()์™€ ์—ฐ๊ฒฐ๋˜์–ด ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  • layout.jade๋ฅผ ์ƒ์†ํ•˜์—ฌ ๊ฐœ๋ณ„ ํŽ˜์ด์ง€์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์‚ฝ์ž…ํ•œ๋‹ค.

 

layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
  • ์ „์ฒด HTML ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜(๋จธ๋ฆฌ๊ธ€, ๋ฐ”๋”” ๋“ฑ)

 

public ํด๋”

์ •์  ํŒŒ์ผ ๊ฒฝ๋กœ

public ํด๋”์— ์œ„์น˜ํ•œ ํŒŒ์ผ์€ ์ •์  ํŒŒ์ผ๋กœ ์ง์ ‘ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค. ์ด๋ฏธ์ง€, JS, CSS ๋“ฑ์˜ ํŒŒ์ผ์„ ๋„ฃ์–ด๋‘๊ณ  ํด๋ผ์ด์–ธํŠธ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค.

 

express ์‹คํ–‰ ๋ฐฉ๋ฒ•

์ง€๊ธˆ๊นŒ์ง€ ์‹ค์Šต ํŒŒ์ผ์€ ์ƒ๋‹จ play ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ฌธ์ œ์—†์ด ์ž‘๋™ํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ generator๋กœ ๋งŒ๋“  ํ”„๋กœ์ ํŠธ๋ฅผ play ๋ฒ„ํŠผ์œผ๋กœ ์‹คํ–‰ํ•˜๋ฉด Running->Done์œผ๋กœ ๋ฐ”๋กœ ์ข…๋ฃŒ๋œ๋‹ค.

www ํŒŒ์ผ์ด ์‹คํ–‰ ์—”ํŠธ๋ฆฌ์ด๊ธฐ ๋•Œ๋ฌธ์—, ํ„ฐ๋ฏธ๋„์—์„œ ๋ช…๋ น์–ด๋กœ ์‹คํ–‰ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

npm start


ํ™•์‹คํžˆ, generator์„ ์“ฐ๋‹ˆ ๋ฒˆ๊ฑฐ๋กœ์šด ๊ฒƒ๋“ค์ด ํ™• ์ค„์–ด๋“  ๋А๋‚Œ์ด๋‹ค. ์›๋ž˜๋„ ํ•  ๊ฒŒ ์—†์—ˆ๋Š”๋ฐ ๋” ํ• ๊ฒŒ ์—†์–ด์ง„ ๋А๋‚Œ..

๋Œ“๊ธ€์ˆ˜0