🦁_21.12.29 TIL

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은 변경사항이 있을 때, 서버를 껐다/켰다 하지 않아도 변경사항이 실행될 수 있도록 도와준다