Express 초기설정?

 

읽기전에: 아래 내용들은 사용할 디렉토리마다 해줘야 하는거같아요! (nodemon -g로 install 한 경우 제외인듯?)

 

-express

 

어플리케이션의 규모가 점점 커져서 유저 회원가입/로그인/프론트엔드에 요구하는 다양한 정보 응답 등 과 같이

 

해당 자원에 대해 다른 함수(로직)을 실행하도록 하는것을 라우팅(routing) 이라고 한다.

 

이렇게 라우팅하다가 점점 더 커지면 어떻게 될까요? 바로 코드가 너무 많아진답니다

 

이런 불편함을 해소하기 위해 필요한게 express 입니다

 

express 초기 세팅

 

디렉토리 만들고(mkdir)

그 디렉토리 들어가서(cd)

 

package.json파일 만들기 (npm init -y) > -y는 디폴트 값으로 제공하는 기본설정 값 설정

 

package.json 들어가서 (vim) > 초기값 설정 (js 파일이라던지 등등)

 

express 설치 (npm install express) > 베포용 으로 쓰일 패키지임을 명시 dependency list에 저장됨

> npm install express --no-save > 임시로 쓰고 dependency list에 저장안할거야~

 

>npm install express --save-dev > 로컬 개발환경에서 쓰고싶은 패키지 관리하는 devdependencies에 저장할거야~

 

-브라우저 규약 완화시키기(cors)

 

npm install cors > cors 설치 할거야~

 

현재의 웹 브라우저는 보안상의 이유로 서로 다른 출처의 http 통신을 막도록 기본적으로 세팅되어 있습니다. 동일한 출처의 주체끼리만 서로 통신할 수 있도록 하는 이 SOP(Same Origin Policy) 정책은 보안성 향상을 위한 기본이라 이해할 수 있습니다.

 

백엔드와 프론트 서버가 서로 다른 도메인에서 운용되는 현재의 3세대 웹 서비스 환경에서, 동일한 출처에서만 리소스를 주고 받을 수 없는 실정입니다. 따라서 이러한 SOP 정책을 올바르게 의도한 요청에 한해서 다소 완화시켜 서로간 통신을 가능케 해야 합니다.

 

이는 별도의 CORS 설정을 통해서 서로 다른 두개의 origin/domain 끼리의 데이터를 주고 받게 하기 위한 설정하여 이루어지며, 만일 해당 과정을 생략한다면 CORS 정책 위반을 이유로 웹 브라우저 차원에서 서버 통신을 막습니다.

 

> sop 정책을 완화시키기 위해 쓰는게 cors!

 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

 

모든 request에 cors 요청 설정하기~

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())
 
app.get('/ping', function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

 

 단하나에 route에서만 cors 요청 설정하기

const express = require('express')
const cors = require('cors')
const app = express()
 
app.get('/ping', cors(), function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

cors 디폴트 값

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

• preflightContinue: Pass the CORS preflight response to the next handler. 
• >다음 핸들러에게 CORS 사전요청 응답을 전달합니다.
• optionsSuccessStatus: Provides a status code to use for successful OPTIONS requests, since some legacy browsers (IE11, various SmartTVs) choke on 204.
• >일부 기존 브라우저(IE11, 다양한 스마트)에서 OPTIONS 요청에 사용할 상태 코드를 제공합니다.204호에서 질식(choke on).

사전요청 MDN

https://developer.mozilla.org/ko/docs/Glossary/Preflight_request

사전 요청 - 용어 사전 | MDN

CORS 설명

https://velog.io/@kaitlin_k/CORS

CORS의 필요성과 동작과정

 

-환경변수 설정(dotenv)

npm install dotenv > dotenv 설치 할거야~

 

dotenv 라이브러리는 디폴트로 현재 디렉토리에 위치한 .env파일로 부터 환경변수를 읽어낸다~

 

.env 생성하고

 

그안에서 key-value의 포멧으로 필요한 환경변수 생성해라~

 

.env 파일에 써놓은 값들은 dotenv 라이브러리를 이용해서 process.env에 설정할수 있다.

 

require("dotenv").config();

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

 

require("dotenv").config() > dotenv 요청해와서 구성하는것!

 

configure : 구성하다

 

요거 전에 env에서 가져올라고 하면 undefined가 나온다

 

es모듈(commonjs)에서 불러올라고 하면

 

require 대신에 import 사용

 

// db.js

export const db_host = process.env.DB_HOST;
export const db_user = process.env.DB_USER;
export const db_pass = process.env.DB_PASS;

 

// app.js

import dotenv from "dotenv";
import { db_host, db_user, db_pass } from "./db.js";

dotenv.config();

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

console.log({ db_host, db_user, db_pass });

 

이렇게 하면 db.js 파일이 process.env에 접근했을때 환경변수 설정이 안되어있따 이말이란다~

 

dotenv.config() 함수가 db.js 파일이 임포트된 이후에 호출되었기 때문이란다~

 

그래서

 

DB_HOST: localhost
DB_USER: root
DB_PASS: s1mpl3
{ db_host: undefined, db_user: undefined, db_pass: undefined }

undefiened 로 나온단다~

 

이걸 우리는 어떻게 해결할까용? db.js파일이 임포트된 이후에 dotenv.config()가 실행되었기 때문에 그런거니깐~

 

db.js 파일에 임포트 해주면 된단다~

 

// env.js

import dotenv from "dotenv";

dotenv.config();


// app.js

import "./env.js";
import { db_host, db_user, db_pass } from "./db.js";

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

console.log({ db_host, db_user, db_pass });


DB_HOST: localhost
DB_USER: root
DB_PASS: s1mpl3
{ db_host: 'localhost', db_user: 'root', db_pass: 'myPassword' }

like this~ man~

 

-로그 관리(morgan)

 

Morgan을 사용하면 http(s) 통신시 프론트-백엔드간 소통시 필요로 하는 ‘기본 정보’들을 자동으로 포매팅하여 편리하게 주고 받을 수 있게 됩니다. 여기서 말하는 ‘기본 정보’란, http 통신시 request, response 형태로 주고 받는 status code, http version 등의 메타 정보들을 의미하며, node.js-express 선에서 제공하지 않는 이 기능을 외부의 패키지의 힘을 빌려 사용하게 된 것 입니다. 참고사항으로, Morgan을 사용할 때 내가 원하는 요소대로 내부 속성을 커스터마이징 하여 설정 할 수도 있습니다.

 

그냥 로그 만드는게 express에 없다~ 그래서 morgan 써야한다~

 

npm install morgan(morgan 설치~)

 

const express = require('express') //express 모듈 추가 > 라우팅 쉽게해주는 프레임워크?
const morgan = require('morgan') // morgan 모듈 추가 > log를 위한 morgan
const cors = require('cors') // cors 모듈 추가 > 브라우저 규약 약하게 하기위한 cors
const app = express()
 
app.use(cors()) // cors 사용하기

app.use(morgan('combined')); // morgan 사용하기
 
app.get('/ping', function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

 

app.use(morgan('combined')); > 로그의 포맷을 combined로 지정해서 morgan 사용하기

 

로그의 포맷들 

 

common [:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length]]

 

dev [:method :url :status :response-time ms - :res[content-length]]

 

short [:remote-addr :remote-user :method :url HTTP/:http-version :status :res[content-length] - :response-time ms]

tiny [:method :url :status :res[content-length] - :response-time ms]