Node + React Basic โ‘ 

minsgyยท2020๋…„ 12์›” 28์ผ
2

node-react

๋ชฉ๋ก ๋ณด๊ธฐ
1/11
post-thumbnail

Node.js (์ž๋™์ฐจ ์—”์ง„)

ํ™•์žฅ์„ฑ ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(ํŠนํžˆ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ) ๊ฐœ๋ฐœ์— ์‚ฌ์šฉ๋˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด ํ”Œ๋žซํผ์ด๋‹ค. ์ž‘์„ฑ ์–ธ์–ด๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉฐ Non-blocking I/O์™€ ๋‹จ์ผ ์Šค๋ ˆ๋“œ ์ด๋ฒคํŠธ ๋ฃจํ”„๋ฅผ ํ†ตํ•œ ๋†’์€ ์ฒ˜๋ฆฌ ์„ฑ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ์œ„ ์„ค๋ช…์„ ๋ณด์ž๋ฉด ๊ฐ€๋ณ๊ณ  ํšจ์œจ์ ์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด ๊ตฌ๊ธ€ Chrome ๊ธฐ๋ฐ˜ JavaScript์˜ ๊ธฐ๋ฐ˜ํ•ด ๋งŒ๋“ , ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ํ”Œ๋žซํผ ์ด๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ•œ ๊ฐ€์ง€ ์•Œ์•„๋‘ฌ์•ผ ํ•  ์ ์œผ๋กœ Node.js๋Š” ์›น์„œ๋ฒ„๊ฐ€ ์•„๋‹ˆ๋‹ค! ๋ผ๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. Apache ์„œ๋ฒ„์™€ ๋น„๊ตํ•ด์„œ HTML์„ ์—ฐ๊ฒฐํ•ด์ฃผ๋ฉฐ, ์„œ๋ฒ„๋ฅผ ์—ด๊ณ  ์ด๋Ÿฌํ•œ ์„ค์ •์€ ์—†๋‹ค๋Š” ์  ์ž…๋‹ˆ๋‹ค.


Express (์ž๋™์ฐจ ํ•ธ๋“ค)

  • NodeJs์˜ ์›นํ”„๋ ˆ์ž„์›Œํฌ ์ค‘, ๊ฐ€์žฅ ๋งŽ์€ ์‚ฌ์šฉ์„ ํ•˜๋Š” ์›น ํ”„๋ ˆ์ž„์›Œํฌ ์ข…๋ฅ˜์ž…๋‹ˆ๋‹ค.

์›นํ”„๋ ˆ์ž„์›Œํฌ๋ž€?
๋‹ค์ˆ˜์˜ ํŽ˜์ด์ง€์˜ ์š”์ฒญ/๊ฐ’ Return/DB ์ ‘์†
์— ๋Œ€ํ•œ ๊ณผ์ •์„ ๋œ๊ธฐ ์œ„ํ•œ ๋„๊ตฌ๋ผ๊ณ  ๋ณด๋ฉด ์‰ฝ์Šต๋‹ˆ๋‹ค!

  • ์ด๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ• ํ•  ์ˆ˜ ์žˆ์–ด์š”!

๊ธฐ๋ณธ ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

  1. Node.js ๋‹ค์šด๋กœ๋“œ ๋ฐ›๊ธฐ

    ์ตœ์‹  ๋ฒ„์ „์ด ์•„๋‹Œ, ์•ˆ์ •์ ์ธ ๋ฒ„์ „์„ ์ถ”์ฒœํ•จ.

  2. package.json ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ

npm init ์‹คํ–‰ํ•˜์—ฌ json ํŒŒ์ผ ์ƒ์„ฑํ•˜๊ธฐ

  1. Express ๋‹ค์šด๋กœ๋“œ ๋ฐ›๊ธฐ

    npm install express --save

  2. (index.js) Example ๋Œ๋ ค์„œ ํ™•์ธํ•ด๋ณด๊ธฐ
 const express = require('express')
 const app = express()
 const port = 3000

    app.get('/', (req, res) => {
      res.send('Hello World!')
    })

    app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
    })
  1. ์‹คํ–‰ ๋ฐ ๊ฒฐ๊ณผ ์ฐฝ

node index.js
npm run start ๋‹จ, package.json scripts ์ถ”๊ฐ€


๋‹ค์Œ ์‹œ๊ฐ„์€ Mongo DB ์—ฐ๊ฒฐ๋ฒ•์„ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

profile
์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์€ ๋‚ด ์„ฑ์žฅ์ œ๐Ÿ”จ

0๊ฐœ์˜ ๋Œ“๊ธ€