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 파일 μƒμ„±ν•˜κΈ°

  3. Express λ‹€μš΄λ‘œλ“œ λ°›κΈ°

    npm install express --save

  4. (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개의 λŒ“κΈ€