🦁_21.12.29 TIL

qhflrnfl4324Β·2022λ…„ 1μ›” 4일
2
post-thumbnail

21λ…„ 12μ›” 28일

πŸ“ μ½”λ“œλΌμ΄μ–Έ - 일단 λ§Œλ“œλŠ” node.js

πŸ“ƒ Chapter_5 Express둜 개발 νš¨μœ¨μ„± 높이기(1)

πŸ“Ž npm(node package manager)

  • npm이 ν•„μš”ν•œ 이유?
    • chapter 4μ—μ„œ μ„œλ²„λ₯Ό ꡬ좕할 λ•Œ, μ²˜μŒλΆ€ν„° λͺ¨λ“  것을 κ°œλ°œν•œ 것이 μ•„λ‹ˆλΌ const http = require("http")λ₯Ό 톡해 httpλΌλŠ” νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•˜μ—¬ μ„œλ²„ ꡬ좕을 νŽΈλ¦¬ν•˜κ²Œ ν–ˆλ‹€.
    • λ‹€λ₯Έ κ°œλ°œμžκ°€ λ§Œλ“€μ–΄ 놓은 νŒ¨ν‚€μ§€λ₯Ό μ‚¬μš©ν•΄μ„œ κ°œλ°œμ„ 쉽고 효율적으둜 ν•  수 μžˆλ‹€.
      => λ°©λŒ€ν•œ νŒ¨ν‚€μ§€λ₯Ό λͺ¨μ•„μ„œ μ„€μΉ˜/관리가 ν•„μš”
  • Node.js둜 λ§Œλ“€μ–΄μ§„ νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ 및 κ΄€λ¦¬ν•΄μ£ΌλŠ” 툴
  • ν•˜μ§€λ§Œ νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•˜λ‹€ 보면, μ„œλ‘œ μ˜μ‘΄λ˜λŠ” νŒ¨ν‚€μ§€λ“€μ΄ 쑴재
    => μ–΄λ– ν•œ νŒ¨ν‚€μ§€κ°€ λ‹€λ₯Έ νŒ¨ν‚€μ§€μ—λ„ μ‘΄μž¬ν•˜κ³  μ„œλ‘œ μ˜μ‘΄λ˜λŠ” 관계인 νŒ¨ν‚€μ§€λ“€μ΄ 쑴재
    => νŒ¨ν‚€μ§€μ˜ λ²„μ „λ§ˆλ‹€ κΈ°λŠ₯이 λ‹€λ₯Ό 수 μžˆλ‹€.
  • μ„€μΉ˜ν•œ νŒ¨ν‚€μ§€ 버전을 κ΄€λ¦¬ν•΄μ£ΌλŠ” 파일 = package.json
# npm을 μ‚¬μš©ν•  수 μžˆλŠ” 초기 ν™˜κ²½ ꡬ좕
$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm_test) npm_test
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: bori
license: (ISC)
About to write to C:\Users\User\Desktop\likelion\μ½”λ“œλΌμ΄μ–Έ\일단 λ§Œλ“œλŠ” Node.js\js_test\npm_test\package.json:

{
  "name": "npm_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bori",
  "license": "ISC"
}

Is this OK? (yes)
  • μœ„μ˜ 과정이 μ™„λ£Œλ˜λ©΄ npm_test 폴더에 package.json 파일 생성
{
  "name": "npm_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bori",
  "license": "ISC"
}
  • scripts : npm에 λŒ€ν•œ λͺ…λ Ήμ–΄λ₯Ό 넣을 수 μžˆλŠ” λΆ€λΆ„
    • hello λͺ…λ Ήμ–΄λ₯Ό μΆ”κ°€ ν›„ μ‹€ν–‰
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "echo hello"
  },
$ npm run hello

> npm_test@1.0.0 hello
> echo hello
  • npm νŒ¨ν‚€μ§€ μ„€μΉ˜
$ npm install [νŒ¨ν‚€μ§€λͺ…]

# νŒ¨ν‚€μ§€ 쀑 ν•˜λ‚˜μΈ express μ„€μΉ˜
$ npm install express
  • package.json 파일 λ‚΄ dependenciesκ°€ μΆ”κ°€λ˜λ©΄μ„œ μΆ”κ°€λœ νŒ¨ν‚€μ§€ λͺ…κ³Ό 버전이 λ‚˜νƒ€λ‚œλ‹€.
    => μ„€μΉ˜λ₯Ό μ„±κ³΅μ μœΌλ‘œ μ™„λ£Œ
  "dependencies": {
    "express": "^4.17.2"
  }
  • package-lock.json : μ„€μΉ˜ν•œ λͺ¨λ“  νŒ¨ν‚€μ§€μ˜ 버전 정보가 λ‹΄κΉ€
  • node_modules 폴더 : λͺ¨λ“  μ˜μ‘΄μ„±μ΄ μžˆλŠ” νŒ¨ν‚€μ§€λ₯Ό 이 폴더 λ‚΄μ—μ„œ 관리
    => express νŒ¨ν‚€μ§€ ν•œ 개만 μ„€μΉ˜ν•΄λ„ λ‹€μ–‘ν•œ νŒ¨ν‚€μ§€(μ˜μ‘΄μ„±)듀이 같이 μ„€μΉ˜
$ npm install -D nodemon
  • -D : κ°œλ°œν™˜κ²½μ—μ„œλ§Œ μ‚¬μš©ν•˜κ² λ‹€λŠ” 의미
    => κ°œλ°œν™˜κ²½μ—μ„œλŠ” ν•„μš”ν•˜μ§€λ§Œ 배포할 λ•ŒλŠ” ν•„μš”μ—†λŠ” νŒ¨ν‚€μ§€λ“€μ΄ 쑴재
    => 이럴 λ•Œ -D μ˜΅μ…˜ μ‚¬μš©
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
  • -g : κΈ€λ‘œλ²Œ μ˜΅μ…˜
    => λͺ¨λ“  νŒ¨ν‚€μ§€μ— κ³΅ν†΅μ μœΌλ‘œ μ‚¬μš©ν•  νŒ¨ν‚€μ§€μ˜ 경우 -g μ˜΅μ…˜μ„ 톡해 μ „μ²΄μ μœΌλ‘œ μ„€μΉ˜
    => ν•œ 번 μ„€μΉ˜λ§ŒμœΌλ‘œ λ‹€μ–‘ν•œ ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš© κ°€λŠ₯

πŸ“Ž express, nodemon

express

  • λΉ λ₯΄κ³  κ°„νŽΈν•œ μ›Ή ν”„λ ˆμž„μ›Œν¬
    μš”μ²­μ΄ 듀어왔을 λ•Œ

  • κΈ°μ‘΄ : req.url νŒŒμ‹± => req.method 확인 => 쿼리문 νŒŒμ‹±μ˜ 과정을 κ±°μΉ¨

  • express : req.get('경둜')와 같이 ν•΄λ‹Ή λ©”μ†Œλ“œλ₯Ό μ μ–΄μ„œ λ°”λ‘œ 확인이 κ°€λŠ₯ => req.query둜 μš”μ²­μ— λ§žλŠ” 쿼리문을 확인할 수 μžˆλ‹€.

    1. ν”„λ ˆμž„μ›Œν¬ : ν”„λ‘œκ·Έλž¨μ„ λ§Œλ“€κΈ° μœ„ν•œ κΈ°λ³Έ ν‹€
      => 체계적인 μ½”λ“œκ΄€λ¦¬ μœ μ§€λ³΄μˆ˜ 용이
      μžλ™μ°¨λ₯Ό λ§Œλ“ λ‹€κ³  κ°€μ •

  • μžλ™μ°¨ μ•ˆμ˜ λΆ€ν’ˆ : 바퀴, 엔진, ν•Έλ“€ λ“±

  • λΆ€ν’ˆλ“€μ„ μ•„λ¬΄λŸ° κΈ°μ€€ 없이 μžλ™μ°¨λ₯Ό λ§Œλ“€κ²Œ 되면 λ°”ν€΄λŠ” 어디에 달아야 ν•˜λŠ”μ§€, 엔진은 μ–΄λ–»κ²Œ ν•΄μ•Όν•˜κ³ , 핸듀은 μ–΄λ–€ λͺ¨μ–‘이어야 ν•˜λŠ”μ§€ μ œμž‘μž μž…μž₯μ—μ„œλŠ” μ–΄λ €μš΄ 뢀뢄이닀.
    => 이 뢀뢄을 ν•΄μ†Œν•˜κΈ° μœ„ν•΄ μžλ™μ°¨ ν”„λ ˆμž„μ„ λ§Œλ“€μ–΄μ„œ 각 λΆ€ν’ˆλ“€μ΄ 어디에 μœ„μΉ˜ν•  수 있고, μ–΄λ–€ λͺ¨μ–‘이어야 ν•˜λŠ”μ§€ 각자의 μž…λ§›μ— 맞게 λ„£μ–΄μ£ΌκΈ°λ©΄ ν•˜λ©΄ μžλ™μ°¨κ°€ λΉ λ₯΄κ²Œ μ™„μ„±

  • μžλ™μ°¨ ν”„λ ˆμž„ = ν”„λ ˆμž„μ›Œν¬

express-generator

  • express의 κΈ°λ³Έ ꡬ쑰λ₯Ό λ§Œλ“€μ–΄ 쑰금 더 κ°„νŽΈν•˜κ²Œ κ°œλ°œμ„ ν•  수 μžˆλ‹€.

  • express-generatorλ₯Ό μ„€μΉ˜ν•˜λ©΄ λ‹€μŒκ³Ό 같은 디렉토리가 μƒμ„±λœλ‹€

    • bin 폴더 > www파일 : μ„œλ²„λ₯Ό μ‹€ν–‰ν•˜λŠ” 파일, 포트번호λ₯Ό 지정 κ°€λŠ₯
    • public 폴더 : image, js, css λ“± λ¦¬μ†ŒμŠ€κ°€ 포함됨
    • routes 폴더 : νŽ˜μ΄μ§€ λΌμš°νŒ…κ³Ό κ΄€λ ¨λœ 파일 μ €μž₯, μ‹€μ œ μ„œλ²„ 둜직 μž‘μ„±
    • views 폴더 : 이 폴더 λ‚΄μ˜ νŒŒμΌλ“€μ„ ν…œν”Œλ¦Ώ 파일이라고 λͺ…λͺ…. ν…œν”Œλ¦Ώ 파일의 μ’…λ₯˜μ—λŠ” jade, ejs 등이 μžˆλ‹€.
    ν…œν”Œλ¦Ώ 파일 : <%= μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œ %>의 ν˜•μ‹μœΌλ‘œ HTML μ½”λ“œ 내에 JavaScript μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆλ‹€.
    • app.js : 핡심적인 μ„œλ²„ μ—­ν• . λΌμš°νŒ…μ˜ μ‹œμž‘μ 
 # μ΄λ ‡κ²Œ μ—¬λŸ¬ νŒ¨ν‚€μ§€λ₯Ό ν•œ λ²ˆμ— μ„€μΉ˜ κ°€λŠ₯
 $ npm install -g express express-generator nodemon
  • express-generator둜 ν”„λ‘œμ νŠΈ λ§Œλ“€κΈ°
    • express λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•œ ν›„
    • --ejs : ν…œν”Œλ¦Ώ νƒ€μž… μ„€μ •
    • first-project : ν”„λ‘œμ νŠΈ λͺ…
$ express --ejs first-project
# μ„€μΉ˜ ν›„ ν•΄λ‹Ή λ””λ ‰ν† λ¦¬λ‘œ 이동
$ cd .\first-project
# ν•„μˆ˜ νŒ¨ν‚€μ§€ μ„€μΉ˜
$ npm install
  • 문제 λ°œμƒ : Cannot find module 'http-errors' μ—λŸ¬ λ°œμƒ
# μ„œλ²„ μ‹€ν–‰
$ npm start

> first-project@0.0.0 start
> node ./bin/www

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'http-errors'
  • ν•΄λ‹Ή ν”„λ‘œμ νŠΈ ν΄λ”μ—μ„œ cmd 창을 μ—΄μ–΄ λ‹€μ‹œ npm install을 μ‹€ν–‰ν•œ ν›„ npm start λ‹€μ‹œ μ‹€ν–‰
  • http://localhost:3000/둜 접속 : expressκ°€ λ‚˜νƒ€λ‚œλ‹€
# nodemon을 μ΄μš©ν•΄ μ„œλ²„ μ‹€ν–‰
$ nodemon ./bin/www
  • nodemon은 변경사항이 μžˆμ„ λ•Œ, μ„œλ²„λ₯Ό 껐닀/μΌ°λ‹€ ν•˜μ§€ μ•Šμ•„λ„ 변경사항이 싀행될 수 μžˆλ„λ‘ 도와쀀닀

0개의 λŒ“κΈ€