Category: Study

0

Express.js ์Šคํ„ฐ๋”” 1

Express.js ์Šคํ„ฐ๋”” 1์ผ์„ค์น˜Express.js๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋จผ์ € node.js์™€ NPM์ด ์„ค์น˜๋œ ์ƒํ™ฉ์—์„œ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ์œˆ๋„์šฐ ๊ธฐ์ค€์œผ๋กœ Node.js ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ์„ค์น˜ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. ์„ค์น˜๊ฐ€ ์™„๋ ค๋˜๋ฉด ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด express.js๋ฅผ ์„ค์น˜ํ•œ๋‹ค. 12345// ์ข…์†์„ฑ ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•˜๋ฉฐ ์„ค์น˜$ npm install express --save// ์ข…์†์„ฑ ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ์„ค์น˜$ npm install express Hello, World!์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด app.js๋ฅผ ํ†ตํ•ด ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋‹ค. 1234567891011const express = require('express')const app = express()const port = 3000app.get('/', (req, res) => { res.send('Hello World!')})app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`)}) 1$node app.js 1ํ–‰์—์„œ express ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™€ 2ํ–‰์— express ๋ชจ๋“ˆ์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์ƒ์„ฑ๋œ express ์ธ์Šคํ„ด์Šค์ธ app์„ ํ†ตํ•ด 5ํ–‰์—์„œ โ€˜/โ€˜ ๊ฒฝ๋กœ์— ๋Œ€ํ•œ GET๋ฉ”์†Œ๋“œ ๋ผ์šฐํŠธ๋ฅผ ์ง€์ •ํ•˜๊ณ  listen์„ ํ†ตํ•ด ์„œ๋ฒ„๋ฅผ ์—ด๊ฒŒ ๋œ๋‹ค. ์ด๋ ‡๋“ฏ node.js๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ฒŒ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. Express generatorExpress generator๋ฅผ ํ†ตํ•ด ๊ฐ„ํŽธํ•˜๊ฒŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ณจ๊ฒฉ์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. 12$ npm install express-generator -g$ npx express-generator <APP NAME> --view=pug ์ฒซ๋ฒˆ์งธ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด์„œ express-generator๋ฅผ ์ „์—ญ์œผ๋กœ ์„ค์น˜ํ•˜๊ณ , ๋‘๋ฒˆ์งธ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด์„œ APP NAME์— ํ•ด๋‹นํ•˜๋Š” express ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ƒ์„ฑ๋œ๋‹ค. ์—ฌ๊ธฐ์„œ --view=pug๋Š” ๋ทฐ ์—”์ง„์— ํ•ด๋‹นํ•˜๋ฉฐ ejs, hbs, hjs, jade, pug, twig, vash๋“ฑ์ด ์žˆ๋‹ค. ๊ธฐ๋ณธ์œผ๋กœ jade๋กœ ์ง€์ •๋˜๋ฉฐ ๋งŒ์•ฝ ๋ทฐ ์—”์ง„์ด ํ•„์š”์—†๋Š” ๊ฒฝ์šฐ --no-view๋ฅผ ์ด์šฉํ•ด ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋ทฐ 12$ cd myapp$ npm install ์ƒ์„ฑ ์ดํ›„ express ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋‚ด๋ถ€๋กœ ํด๋”๋ฅผ ์ด์šฉํ•ด ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๋ฉด ๊ธฐ์ดˆ ๊ฐœ๋ฐœ ์ค€๋น„๊ฐ€ ๋๋‚˜๊ฒŒ ๋œ๋‹ค. 1234567891011121314151617.โ”œโ”€โ”€ app.jsโ”œโ”€โ”€ binโ”‚ โ””โ”€โ”€ wwwโ”œโ”€โ”€ package.jsonโ”œโ”€โ”€ publicโ”‚ โ”œโ”€โ”€ imagesโ”‚ โ”œโ”€โ”€ javascriptsโ”‚ โ””โ”€โ”€ stylesheetsโ”‚ โ””โ”€โ”€ style.cssโ”œโ”€โ”€ routesโ”‚ โ”œโ”€โ”€ index.jsโ”‚ โ””โ”€โ”€ users.jsโ””โ”€โ”€ views โ”œโ”€โ”€ error.pug โ”œโ”€โ”€ index.pug โ””โ”€โ”€ layout.pug ํŒŒ์ผ์˜ ๊ตฌ์กฐ์—์„œ Javascript์™€ ๊ด€๋ จ๋œ ํด๋” ๋ฐ ํŒŒ์ผ์€ app.js, bin/www, routes/*์ด๋ฉฐ ์›น ๋ฆฌ์†Œ์Šค&ํ…œํ”Œ๋ฆฟ์— ๊ด€๋ จ๋œ ํด๋”๋Š” public/*, views/*์— ํ•ด๋‹น๋œ๋‹ค. bin/www์—์„œ๋Š” ์„œ๋ฒ„ ๊ตฌ๋™๊ณผ ๊ด€๋ จ๋œ ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๊ณ , app.js์—์„œ๋Š” routes/*์˜ ๋ผ์šฐํ„ฐ๋“ค๊ณผ ๋ฆฌ์†Œ์Šค ํด๋” ๋ฐ ๋ทฐ ํ…œํ”Œ๋ฆฟ ํด๋”๋ฅผ ์ง€์ •ํ•˜๋Š” ๋“ฑ ์„œ๋ฒ„ ๊ตฌ๋™ ์ด์ „์— ํ•„์š”ํ•œ ์„ค์ •์„ ํ•˜๊ฒŒ ๋œ๋‹ค. ๊ธฐ๋ณธ ๋ผ์šฐํŒ…app.js๋ฅผ ์ž์„ธํžˆ ๋ณด๋ฉด 123// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'pug') ๋จผ์ € ๋ทฐ ์—”์ง„์„ ์ง€์ •ํ•˜๋ฉฐ ๋ทฐ ์—”์ง„์˜ ์ข…๋ฅ˜๋Š” ์œ„ express-generator์— โ€“view ์ธ์ž๋ฅผ ์ง€์ •๋œ ์—”์ง„์„ ์‚ฌ์šฉํ•œ๋‹ค. 1234app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ extended: false }));app.use(cookieParser()); ๊ฐœ๋ฐœ์— ์œ ์šฉํ•œ ๋‹ค์–‘ํ•œ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ฆฌ์†Œ์ŠคํŒŒ์ผ(js, css, image๋“ฑ)์˜ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•˜๊ฒŒ ๋œ๋‹ค. 12app.use('/', indexRouter);app.use('/users', usersRouter); use๋Š” ๋ฏธ๋“ค์›จ์–ด๋กœ ๋“ฑ๋กํ•  callbackํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๋Š”๋ฐ, ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ ๊ฒฝ๋กœ๋ฅผ ์ค„ ๊ฒฝ์šฐ ํ•ด๋‹น ๊ฒฝ๋กœ์— ๋Œ€ํ•œ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ฒฝ์šฐ routes/*์— ์žˆ๋Š” ๋ผ์šฐํŠธ๋ฅผ ๋ฏธ๋“ค์›จ์–ด๋กœ ๋“ฑ๋กํ•˜๋Š”๋ฐ ๊ฐ๊ฐ โ€˜/โ€˜, โ€˜/usersโ€™๊ฒฝ๋กœ๋ฅผ ๊ตฌ๋ถ„ํ•˜์—ฌ ๋“ฑ๋กํ•˜๊ฒŒ ๋œ๋‹ค. ๋•Œ๋ฌธ์— ๋‘ ๋ผ์šฐํ„ฐ๋Š” ๋ณ„๊ฐœ์˜ ์ƒํ™ฉ์—์„œ ๋™์ž‘ํ•˜๊ฒŒ ๋œ๋‹ค. ์ •์  ํŒŒ์ผ ์ œ๊ณต1app.use(express.static(path.join(__dirname, 'public'))) ์ •์  ํŒŒ์ผ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ •์  ํŒŒ์ผ์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ๋กœ๋ฅผ static ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋“ฑ๋กํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. static์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ ์ •์  ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ๋“ฑ๋กํ•  ๊ฒฝ์šฐ ๋“ฑ๋ก๋œ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ •์  ํŒŒ์ผ์„ ๊ฒ€์ƒ‰ํ•œ๋‹ค. ์ด ๋ถ€๋ถ„๋„ use์˜ ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ ๊ฒฝ๋กœ๋ฅผ ์ฃผ๊ฒŒ ๋˜๋ฉด ๊ฐ€์ƒ ๊ฒฝ๋กœ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.