๋ฐ˜์‘ํ˜•
kkh1902
Steadily
kkh1902
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (151)
    • ๐Ÿ“š Study (1)
      • Spring (9)
      • Java (2)
      • Html, css (10)
      • JS, JQuery (29)
      • DB (5)
      • DevOps (13)
      • roadmap (2)
      • Architecture (1)
      • Flutter (2)
    • ๐Ÿ’ป Computer Science (28)
      • Datastructure (0)
      • Algorithm (2)
      • Design pattern (0)
      • Network (1)
      • DB (13)
      • Operating System (0)
      • Software Engineering (4)
      • CS interview (5)
      • topcit (3)
    • โš’๏ธ Etc (4)
      • Error (3)
      • Trouble_Shooting (1)
    • ๐Ÿ“ฐ News (0)
      • daily (7)
      • think (17)
    • ๐Ÿ“˜ Hobby (13)
      • English (13)
    • ๐Ÿค– AI (7)
      • ML (7)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ๐Ÿ“‹ ์ด๋ ฅ์„œ
  • โšก๏ธ ๊นƒํ—ˆ๋ธŒ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • React JS # 2 The Basic of React
  • Wonder # word
  • SpringBootTest
  • Flutter
  • Qr_payment project # CSS ํ•ด์„ # Basic ๋งจ์œ„ ํ•ด์„
  • junit5
  • git stash
  • Linear Regression
  • React๋ฅผ ๋ฐฐ์›Œ์•ผํ•˜๋Š” ์ด์œ 
  • think #bootstrap์„ ์จ์•ผํ•˜๋Š” ์ด์œ 
  • testcode
  • gitaction
  • sourcetreee
  • db
  • React JS #์ž์Šต์„œ
  • React # JSX
  • ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™ #project๋งŒ๋“ค๋•Œ ์ค‘์š”
  • ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™ # chapter1
  • git
  • React JS # ์ž์Šต์„œ # Component์™€ Props

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.
๊ธ€์“ฐ๊ธฐ / ๊ด€๋ฆฌ์ž
kkh1902

Steadily

๐Ÿ“š Study/JS, JQuery

๋ฏธ๋“ค์›จ์–ด ์‚ฌ์šฉํ•˜๊ธฐ

2022. 5. 14. 22:08
728x90
๋ฐ˜์‘ํ˜•

์„œ๋ก 

  • express ๋ชจ๋“ˆ์•ˆ์— ๋ฏธ๋“ค์›จ์–ด์™€ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ค„ ์•Œ์•„์•ผํ•˜๋Š”๋ฐ ๊ทธ์ค‘ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์•Œ์•„๋ณด์ž
  • ์ง€๊ธˆ๊นŒ์ง€๋Š” use() ๋ฉ”์†Œ๋“œ๋กœ ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜์•ˆ์— ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ๋„ฃ์–ด ํด๋ผ์ด์–ธํŠธ ์‘๋‹ต์„ ์ „์†กํ•ด์•ผ ํ•˜๋Š”๋ฐ ์–ด๋ ค์›Œ์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด๋†“์€ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

Static ๋ฏธ๋“ค์›จ์–ด

  • ํŠน์ • ํด๋”์˜ ํŒŒ์ผ๋“ค์„ ํŠน์ • ํŒจ์Šค๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.
// Express ๊ธฐ๋ณธ ๋ชจ๋“ˆ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
var express = require("express");
const res = require("express/lib/response");
const path = require("path");

// static ๋ฏธ๋“ค์›จ์–ด ํŠน์ • ํด๋”์˜ ํŒŒ์ผ๋“ค์„ ํŠน์ • ํŒจ์Šค๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค€๋‹ค.
var static = require("serve-static");

http = require("http");

// ์ต์Šคํ”„๋ ˆ์Šค ๊ฐ์ฒด ์ƒ์„ฑ
var app = express();

app.use("/public", static(path.join(__dirname, "public")));
res.end("<img src='/image/images.png' width= '50%'>");

http.createServer(app).listen(3000, function () {
    console.log("Express ์„œ๋ฒ„๊ฐ€ 3000๋ฒˆ ํฌํŠธ์—์„œ ์‹œ์ž‘๋จ");
});

 

body-parser ๋ฏธ๋“ค์›จ์–ด

  • POST๋กœ ์š”์ฒญํ–ˆ์„ ๋•Œ ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค€ ๋ฏธ๋“ค์›จ์–ด
  • GET ๋ฐฉ์‹์œผ๋กœ ์š”์ฒญํ•  ๋•Œ๋Š” ์ฃผ์†Œ ๋ฌธ์ž์—ด์— ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
  • POST ๋ฐฉ์‹์œผ๋กœ ์š”์ฒญํ•  ๋•Œ๋Š” ๋ณธ๋ฌธ์ธ ๋ณธ๋ฌธ ์˜์—ญ(Body ์˜์—ญ)์— ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๋“ค์–ด ์žˆ๊ฒŒ ๋˜๋ฏ€๋กœ ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํŒŒ์‹ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋‹ค๋ฅด๋‹ค.
// Express ๊ธฐ๋ณธ ๋ชจ๋“ˆ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
var express = require("express"),
    http = require("http"),
    path = require("path");

// Express์˜ ๋ฏธ๋“ค์›จ์–ด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
var bodyParser = require("body-parser"),
    static = require("serve-static");

// ์ต์Šคํ”„๋ ˆ์Šค ๊ฐ์ฒด ์ƒ์„ฑ
var app = express();

// ๊ธฐ๋ณธ ์†์„ฑ ์„ค์ •
app.set("port", process.env.PORT || 3000);

// body-parser๋ฅผ ์‚ฌ์šฉํ•ด application/x-www-form-urlencoded ํŒŒ์‹ฑ
app.use(bodyParser.urlencoded({ extended: false }));

// body-parser๋ฅผ ์‚ฌ์šฉํ•ด application/json ํŒŒ์‹ฑ
app.use(bodyParser.json());

app.use("/public", static(path.join(__dirname, "public")));

// ๋ฏธ๋“ค์›จ์–ด์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ ํ™•์ธ

app.use(function (req, res, next) {
    console.log("์ฒซ ๋ฒˆ์งธ ๋ฏธ๋“ค์›จ์–ด์—์„œ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•จ.");

    var paramId = req.body.id || req.query.id; //ํด๋ผ์ด์–ธํŠธ์—์„œ ์š”์ฒญํ•  ๋•Œ get๋ฐฉ์‹/post๋ฐฉ์‹ ์š”์ฒญ๋ชจ๋ฅผ ๊ฒฝ์šฐ
    var paramPassword = req.body.password || req.query.password;

    res.writeHead("200", { "Content-Type": "text/html;charset= utf8" });
    res.write("<h1>Express ์„œ๋ฒ„์—์„œ ์‘๋‹ตํ•œ ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.");
    res.write("<div><p>Param id :" + paramId + "</p></div>");
    res.write("<div><p>Param password :" + paramPassword + "</p></div>");
    res.end();
});

 

์ •๋ฆฌ

  • ๋ฏธ๋“ค์›จ์–ด์™€ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋ฏธ๋“ค์›จ์–ด ์ค‘์— bodyparser๋ž‘ static์„ ์จ๋ณด์•˜๋‹ค.
728x90
๋ฐ˜์‘ํ˜•

'๐Ÿ“š Study > JS, JQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Mongo DB์™€ Node.js ์—ฐ๋™ํ•˜๊ธฐ  (0) 2022.05.15
์š”์ฒญ ๋ผ์šฐํŒ…ํ•˜๊ธฐ  (0) 2022.05.14
์ต์Šคํ”„๋ ˆ์Šค๋กœ ์›น ์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ  (0) 2022.05.14
๊ฐ„๋‹จํ•œ ์›น์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ  (0) 2022.05.08
Chap1 start _ require() ๋ฉ”์†Œ๋“œ  (0) 2022.05.07
    '๐Ÿ“š Study/JS, JQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • Mongo DB์™€ Node.js ์—ฐ๋™ํ•˜๊ธฐ
    • ์š”์ฒญ ๋ผ์šฐํŒ…ํ•˜๊ธฐ
    • ์ต์Šคํ”„๋ ˆ์Šค๋กœ ์›น ์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ
    • ๊ฐ„๋‹จํ•œ ์›น์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ
    kkh1902
    kkh1902
    1Day 1 Commit ๋ชฉํ‘œ ๊ณต๋ถ€ํ•œ๊ฒƒ๋“ค ๋งค์ผ ๊ธฐ๋กํ•˜๊ธฐ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”