๋กœ์ผ“๐Ÿพ
article thumbnail
๋ฐ˜์‘ํ˜•

express-generator

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

Express ์™ธ์—๋„ koa๋‚˜ hapi ๊ฐ™์€ ์›น ์„œ๋ฒ„ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์žˆ์ง€๋งŒ ๋‹ค์Œ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด Express๊ฐ€ ์••๋„์ ์œผ๋กœ ์ธ๊ธฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

 

https://www.npmtrends.com/express-vs-koa-vs-hapi

๋ฌผ๋ก  ์‚ฌ์šฉ์ž๊ฐ€ ๋งŽ๋‹ค๊ณ  ํ•ญ์ƒ ์ข‹์€๊ฑด ์•„๋‹ˆ์ง€๋งŒ, ์‚ฌ์šฉ์ž๊ฐ€ ๋งŽ์€ ๊ฒƒ์—๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋งŽ์„ ์ˆ˜๋ก ๋ฒ„๊ทธ๊ฐ€ ์ ๊ณ , ๊ธฐ๋Šฅ ์ถ”๊ฐ€๋‚˜ ์œ ์ง€๋ณด์ˆ˜๋„ ํ™œ๋ฐœ์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Express-generator๋Š” Express ํ™˜๊ฒฝ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌ์ถ•ํ•ด์ฃผ๋Š” npm์ž…๋‹ˆ๋‹ค.  ๋”ฐ๋ผ์„œ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ Node.js ๊ฐœ๋ฐœ์„ ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

npm๋ฅผ ์ด์šฉํ•˜์—ฌ express-generator ์„ค์น˜ํ•˜๊ธฐ

 

1 ."npm i -g express-generator" ์„ ํ„ฐ๋ฏธ๋„์— ์ž…๋ ฅํ•˜์—ฌ ์‹คํ–‰์‹œ์ผœ์ค๋‹ˆ๋‹ค.

  • npm i ๋Œ€์‹  install๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • '-g' ๋Š” ๊ธ€๋กœ๋ฒŒ์˜ ์•ฝ์ž๋กœ ํด๋”์˜ ๊ตญํ•œ๋œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ „์—ญ์œผ๋กœ ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.   
    ๋งŒ์•ฝ ์ „์—ญ ์„ค์น˜๋ฅผ ์›์น˜ ์•Š์œผ๋ฉด '-g'  ๋Œ€์‹  '-save'๋กœ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

2. "express [์„ค์น˜ํ•  ํด๋”์ด๋ฆ„] --view=pug" ์„ ํ„ฐ๋ฏธ๋„์— ์ž…๋ ฅํ•˜์—ฌ ์‹คํ–‰์‹œ์ผœ์ค๋‹ˆ๋‹ค.

  • ํด๋” ์ด๋ฆ„์ด test ๋ผ๋ฉด "express test --view=pug"๋กœ ์ž…๋ ฅํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  • Node.js์˜ ๋Œ€ํ‘œ์ ์ธ ํ…œํ”Œ๋ฆฟ ์—”์ง„์œผ๋กœ๋Š” ejs์™€ pug๊ฐ€ ์žˆ๋Š”๋ฐ --view๋ฅผ
    pug๋กœ ํ•˜๊ฒŒ๋˜๋ฉด ํ…œํ”Œ๋ฆฟ ์—”์ง„์œผ๋กœ pug๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • jade๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ๊ฐœ๋ช…๋œ ๊ฒƒ์ด pug์ž…๋‹ˆ๋‹ค.(pug์— ๊ด€ํ•œ๊ธ€์€ ์ถ”ํ›„ ์˜ฌ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.)

pug ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค. ๊ท€์—ฝ์ฃ ? ์ง„์งœ ๊ทธ ํผ๊ทธ์—์š”

1, 2๋ฒˆ๊นŒ์ง€ ์ง„ํ–‰ํ•˜์‹œ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํด๋”๊ฐ€ ์ƒ์„ฑ์ด ๋ฉ๋‹ˆ๋‹ค. ์ € ๊ฐ™์€ ๊ฒฝ์šฐ "express express_test --view=pug"๋กœ ํ•˜์˜€๊ธฐ
๋•Œ๋ฌธ์— express_test๋ผ๋Š” ํด๋”๊ฐ€ ์ƒ์„ฑ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

express_test๋ผ๋Š” ํด๋”๊ฐ€ ์ƒ์„ฑ๋˜์—ˆ์ฃ  :)


3. ์ƒ์„ฑํ•œ ํด๋”๋กœ cd ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์„ฑํ•œ ํด๋” ์ด๋™ํ•œ ํ›„

"npm i"๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ํ•„์š”ํ•œ npm ํŒŒ์ผ๋“ค์„ ์„ค์น˜ ํ•ด์ค๋‹ˆ๋‹ค.

 

โ€ป์—ฌ๊ธฐ์„œ ์ž ๊น!!

{
  "name": "express-test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

 

"npm i"๋ฅผ ํ•ด์ฃผ๋Š” ์ด์œ ๋Š” package.json๋ผ๋Š” json ํŒŒ์ผ์•ˆ dependecies ๊ฐ์ฒด ์•ˆ์— ์žˆ๋Š” npm๋“ค์„ ์„ค์น˜ํ•ด์ฃผ๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค.

์ผ์ผ์ด npm i express ์ด๋Ÿฐ์‹์œผ๋กœ ์„ค์น˜ํ•  ํ•„์š”์—†์ด "npm i" ๋ช…๋ น์–ด ํ•˜๋‚˜๋กœ dependecies ๊ฐ์ฒด ์•ˆ์— ์žˆ๋Š” ๋ชจ๋“  npm์„ ์ž๋™์œผ๋กœ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

 

์ถ”ํ›„ Github์— Node.js ํ”„๋กœ์ ํŠธ๋ฅผ ์˜ฌ๋ฆด๋•Œ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ ๋‚ด์— ๋ชจ๋“  npm ํŒŒ์ผ๋“ค์ด ๊ฐ™์ด ์ปค๋ฐ‹ ๋˜๋Š”๋ฐ ์ด๋Ÿด ๊ฒฝ์šฐ ์ƒ๋‹นํžˆ ๋น„ํšจ์œจ์ ์ด๊ธฐ ๋•Œ๋ฌธ์— gitignore๋กœ npm ํŒŒ์ผ๋“ค์€ ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ package.json ํŒŒ์ผ์€ ์ปค๋ฐ‹์ด ๋˜๊ธฐ๋•Œ๋ฌธ์— package.json ํŒŒ์ผ๋งŒ ์žˆ๋‹ค๋ฉด ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์— ํ•„์š”ํ•œ ๋ชจ๋“  npm์„ ์„ค์น˜ํ• ์ˆ˜ ์žˆ๊ฒŒ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.


4. "npm i" ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด node_modules๋ผ๋Š” ํด๋”๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ์ƒ๊ฒจ๋‚˜๋Š”๋ฐ ์ด๊ณณ์— npm์— ํ•„์š”ํ•œ ๋ชจ๋“  ํŒŒ์ผ์ด ์„ค์น˜๋ฉ๋‹ˆ๋‹ค. 

 

(๋”ฐ๋ผ์„œ gitignore์—๋Š” node_modules์„ ์ž…๋ ฅํ•˜์—ฌ node_modules๊ฐ€ ์ปค๋ฐ‹๋˜์ง€ ์•Š๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” Node.js ํ”„๋กœ์ ํŠธ์˜ ์ปค๋ฐ‹ ํŒŒ์ผ๋“ค์ธ๋ฐ node_modules ํด๋”๊ฐ€ ์—†๋Š” ๊ฒƒ์ด ๋ณด์ด์ฃ ?)

gitignore์— npm ํŒŒ์ผ๋“ค์„ ๋‹ด๊ณ  ์žˆ๋Š” node_modules๋ฅผ ์ž…๋ ฅํ•ด์ค๋‹ˆ๋‹ค.

 

node_modules ํด๋”๋Š” ์ปค๋ฐ‹๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. https://github.com/kingbj940429/BJ.GG

5. ๋งˆ์ง€๋ง‰์œผ๋กœ "npm start" ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ๊ตฌ์ถ•๋œ ๋กœ์ปฌ ์„œ๋ฒ„์— ์ ‘์†ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

npm start ํ•  ๊ฒฝ์šฐ

๊ทผ๋ฐ ์šฐ๋ฆฌ๋Š” ๋กœ์ปฌ ์„œ๋ฒ„์˜ ํฌํŠธ๋ฅผ ๋ฌด์—‡์œผ๋กœ ์„ค์ •ํ•ด์คฌ๋Š”์ง€ ๋ชฐ๋ผ์š”. ํฌํŠธ ๋ฒˆํ˜ธ๋ฅผ ์„ค์ •ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„  /bin/www.js ๋ฅผ ์—ด์–ด์ค๋‹ˆ๋‹ค.

 

 

๋“ค์–ด๊ฐ€์‹œ๋ฉด ๋ญ”์ง€ ๋ชจ๋ฅผ ์ฝ”๋“œ๊ฐ€ ๋งŽ์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ์šฐ์„  ๋‹ค ์ œ์ณ๋‘๊ณ , ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ฃผ๋ชฉํ•ด์ฃผ์„ธ์š” :)

 

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');//์—ฌ๊ธฐ๋ฅผ ์ฃผ๋ชฉํ•ด์ฃผ์„ธ์š”โ˜…
app.set('port', port);

 

process.env.PORT๋Š” ํ™˜๊ฒฝ๋ณ€์ˆ˜์ธ๋ฐ ์ด๊ฒƒ์— ๋Œ€ํ•ด์„œ ์ถ”ํ›„ ์ž์„ธํžˆ ๋‹ค๋ฃจ๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ฃผ๋ชฉํ•  ๊ฒƒ์€ 3000์ด๋ผ๋Š” ์ˆซ์ž์ž…๋‹ˆ๋‹ค. ์ด๊ฒŒ ๋ฐ”๋กœ ์—ฐ๊ฒฐํ•  ํฌํŠธ ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค. ํ•ด๋‹น ํฌํŠธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ localhost:3000์œผ๋กœ ์ ‘์†ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค!!

 

6. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์ด ํ‘œ์‹œ๋๋‹ค๋ฉด ์„ฑ๊ณตํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค :) ์–ด๋ ต์ง€ ์•Š์ฃ ??

 

 

ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜๋Š” ๋ฌธ๊ตฌ๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด??

๊ทธ๊ฑด ๋‹ค์Œ์— ๋‹ค๋ฃจ์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค

 

์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์งˆ๋ฌธ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

 

"๋‚œ ๋ฐ˜๋“œ์‹œ ๋ฐฑ์—”๋“œ ์™•์ด ๋ ๊ฑฐ์•ผ"

 

 

๋ฐ˜์‘ํ˜•
profile on loading

Loading...