๐Ÿ‘‰ ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง & ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง

๋ชจ๋ฐ”์ผ์˜ ์‹œ๋Œ€์— ๋“ฑ์žฅํ•œ ํด๋ผ์ด์–ธํŠธ์‚ฌ์ด๋“œ๋ Œ๋”๋ง Single Page Application(SPA)
SPA๋Š” ์ตœ์ดˆ ํ•œ๋ฒˆ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ๋กœ๋”ฉํ•œ ํ›„ ๋ฐ์ดํ„ฐ๋งŒ ๋ณ€๊ฒฝํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜
์ „ํ†ต์ ์ธ ์›น ๋ฐฉ์‹(SSR)์€ ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ๋ฐฉ์‹์ด๋‹ค. ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €์— ๋‚˜ํƒ€๋‚˜๋Š” ํ˜•ํƒœ ๊ทธ๋Œ€๋กœ๋ฅผ HTML๋กœ ๋งŒ๋“ค์–ด ์ œ๊ณตํ•˜๊ณ , ๋ธŒ๋ผ์šฐ์ €๋Š” HTML์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ์‹์ด์—ˆ๋‹ค. ์š”์ฆ˜์€ ์›น์—์„œ ์ œ๊ณต๋˜๋Š” ์ •๋ณด๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์ „ํ†ต์ ์ธ ๋ฐฉ์‹์€ ์„ฑ๋Šฅ๋ฌธ์ œ์— ์ด์Šˆ๋ฅผ ๋‚ณ์•˜๋‹ค.
ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์€ ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์— ๋”ฐ๋ผ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋‹ค์‹œ ์ฝ์–ด๋“ค์ด๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„์ธก์—์„œ ๋ Œ๋”๋งํ•˜์—ฌ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ์ฝ์–ด๋“ค์ด๋Š” ๊ฒƒ๋ณด๋‹ค ๋น ๋ฅธ ์ธํ„ฐ๋ ‰์…˜์„ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์„œ๋ฒ„๋Š” ๋‹จ์ง€ JSONํŒŒ์ผ๋งŒ ๋ณด๋‚ด์ฃผ๊ณ , html์„ ๊ทธ๋ฆฌ๋Š” ์—ญํ• ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์ˆ˜ํ–‰
ํŠธ๋ž˜ํ”ฝ์„ ๊ฐ์†Œ์‹œํ‚ค๊ณ , ์‚ฌ์šฉ์ž์—๊ฒŒ ๋” ๋‚˜์€ ๊ฒฝํ—˜์„ ์ œ๊ณต

๐Ÿ‘‰ Express

  1. Philosophy
    : http ์„œ๋ฒ„๋ฅผ ์œ„ํ•œ ์ž‘์ง€๋งŒ ๊ฐ•๋ ฅํ•œ ํˆด์„ ์ œ๊ณตํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ

  2. Middleware
    : ์ค‘๊ฐ„ ๋‹จ๊ณ„ ํ•จ์ˆ˜?
    middleware next ์ธ์ž --> ๋‹ค์Œ ๋ฏธ๋“ค์›จ์–ดํ•จ์ˆ˜ ์—ฐ๊ฒฐ ( ์ „ ๋‹จ๊ณ„ ํŒ๋ณ„ )
    .use() ๋ฉ”์„œ๋“œ

  3. Router
    : ๋ผ์šฐํŒ…์€ ์–ด๋–ค ๋„คํŠธ์›Œํฌ ์•ˆ์—์„œ ํ†ต์‹  ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ผ ๊ฒฝ๋กœ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ณผ์ •.
    URI ๋ฐ ํŠน์ •ํ•œ HTTP ์š”์ฒญ ๋ฉ”์†Œ๋“œ (GET, POST ๋“ฑ)์ธ ํŠน์ • ์—”๋“œํฌ์ธํŠธ์— ๋Œ€ํ•œ ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‘๋‹ตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ
    < ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์š”์ฒญ๊ฒฝ๋กœ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค. >

    // node.js router ๋ฐฉ์‹
    if(path === '/a'){
        res.send('aa');
    }else if(path === '/b'){
        if(req.age < 20){
            res.status(400).send('no')
        }else{
            res.send('b')
        }
    }
    
    // express router ๋ฐฉ์‹
    router.get('/a', (req,res) => {
        res.send('aa');
    })
    router.get('/b', (req,res) => {
        if(req.age < 20){
            return res.status(400).send('no')
        }
        res.send('b')
    })
    // ๊ธฐ๋ณธ๊ตฌ์กฐ
    var express = require("express");
    var app = express();
    app.METHOD(PATH, HANDLER);     
    • app์€ express์˜ ์ธ์Šคํ„ด์Šค
    • METHOD๋Š” HTTP ์š”์ฒญ ๋ฉ”์†Œ๋“œ
    • PATH๋Š” ์„œ๋ฒ„์—์„œ์˜ ๊ฒฝ๋กœ
    • HANDLER๋Š” ๋ผ์šฐํŠธ๊ฐ€ ์ผ์น˜ํ•  ๋•Œ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜
    app.get('/', function (req, res) {
      res.send('Hello World!');
    });
    
    app.post('/', function (req, res) {
      res.send('Got a POST request');
    });
    
    app.put('/user', function (req, res) {
      res.send('Got a PUT request at /user');
    });
  • app.route()
    : ๋ผ์šฐํŠธ ๊ฒฝ๋กœ์— ๋Œ€ํ•˜์—ฌ ์ฒด์ธ ๊ฐ€๋Šฅํ•œ ๋ผ์šฐํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฒฝ๋กœ๋Š” ํ•œ ๊ณณ์— ์ง€์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ, ๋ชจ๋“ˆ์‹ ๋ผ์šฐํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์ค‘๋ณต์„ฑ๊ณผ ๊ฐ์†Œํ•˜์—ฌ ๋„์›€์ด ๋œ๋‹ค.

    app.route('/book')
      .get(function(req, res) {
        res.send('Get a random book');
      })
      .post(function(req, res) {
        res.send('Add a book');
      })
      .put(function(req, res) {
        res.send('Update the book');
      });

๐Ÿ‘‰ Cors

Cross Origins Resource Sharing : cross origin์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•œ๋‹ค
๋ณด์•ˆ์ƒ์˜ ์ด์œ ๋กœ ๋ธŒ๋ผ์šฐ์ €์—์„œ cross origin ๋„๋ฉ”์ธ ์š”์ฒญ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œํ•œ

const defaultCorsHeaders = {
    'access-control-allow-origin' : '*',
    'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'access-control-allow-headers': 'content-type, accept',
    'access-control-max-age' : 10 //seconds
}
  • ๋ชจ๋“  ๋„๋ฉ”์ธ( * )์„ ํ—ˆ์šฉ
  • ๋ฉ”์†Œ๋“œ๋Š” GET POST PUT DELETE OPTIONS๋งŒ ํ—ˆ์šฉ
  • ํ—ค๋”์—๋Š” content-type๊ณผ accept๋งŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค
  • preflight request๋Š” 10์ดˆ๊นŒ์ง€ ํ—ˆ์šฉ
    --> ํ—ˆ์šฉ ์„ค์ • ์ฝ”๋“œ