nodejs 가이드

Node.js Guide

+++

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
const dotenv = require("dotenv");

const app = express();
const prayRouter = require("./routes/prayRouter");
// /pray로 요청하면, PrayCtrl.getAllpray를 처리해달라.

프로젝트 시작하기

npm init

npm을 사용할 때는 무조건 package.json 이 있는 폴더에서 사용해야 한다. 그렇지 않으면 package.json 을 읽지 못하고 다른 곳에 또 만들어버리게 된다.

package.json에 있는 것들을 참고해서 다운로드 받는다.

npm install

구글에 gitignore nodejs 를 찾아서 보면, 남들이 설정해놓은 것들이 있다. 그걸 가져다 쓰면 된다.

package-lock.json 도 포함해줘야 한다. 이유는, security관련한 것들이 들어있기 때문.

git remote add origin https://
git add .
git commit -m "initial commit"
git push origin master

express 공식 페이지에 들어가서, 기본적인 것을 가져온다.

https://expressjs.com/ko/guide/routing.html

var express = require("express"); //require은 기본적으로 node modules에서 해당하는 것을 가져오는 역할을 한다.
var app = express();

// respond with "hello world" when a GET request is made to the homepage
app.get("/", function (req, res) {
  res.send("hello world");
});

import & export

export const userRouter = express.Router();

위와 같이 export하면 , default로 export한 것과는 다르다.

import { userRouter } from "./router";

이런식으로 import 해주어야 한다

default로 export 할 경우에는

export default app;
->
import app from "./app";

이렇게 import 한다.

NPM

Node Package Manager

npm install 옵션중 –save 와 –save-dev의 차이점.

패키지(plugin)를 ./node_modules디렉터리에 설치하고, ./package.json 파일의 dependencies 항목에 플러그인 정보가 저장 됩니다. –production 빌드시 해당 플러그인이 포함된다.

npm install (plugin) --save

npm install (plugin) --save-dev (축약형은 -D)

패키지(plugin)를 ./node_modules에 설치하고 , ./package.json 파일의 devDependencies 항목에 플러그인 정보가 저장된다. –production 빌드시 해당 플러그인이 포함되지 않는다.

devDependencies -> 개발 시에만 사용하는 개발용 의존 패키지.

npm install 명령어에는 지역설치와 전역설치 옵션이 있다. 옵션을 별도로 지정하지 않으면, 지역으로 설치되며, 프로젝트 루트 디렉터리에 node_modules 디렉터리가 자동 생성되고 그 안에 패키지가 설치된다. 지역으로 설치된 패키지는 해당 프로젝트 내에서만 사용할 수 있다.

npm install <plugin>

전역에 패키지를 설치하려면, npm install 명령어에 -g 옵션을 지정한다. 전역으로 설치된 패키지는 전역에서 참조할 수 있다. 모든 프로젝트가 공통 패키지는 지역으로 설치하지 않고 전역에 설치한다.

npm install -g <plugin>

Node.js 프로젝트에서는 많은 패키지를 사용하게 되고, 패키지의 버전도 빈번하게 업데이트되므로, 프로젝트가 의존하고 있는 패키지를 일괄 관리할 필요가 있다. npm은 package.json 파일을 통해서 프로젝트 정보와 패키지의 의존성을 관리한다.

이미 작성된 package.json 이 있다면, 팀 내에 배포하여 동일한 개발 환경을 빠르게 구축할 수 있다는 장점이 있다.

package.json 을 생성하려면, 프로젝트 루트에서 npm init 명령어를 실행한다.

기본 설정값으로 생성된 package.json 파일을 수정하는 방법이 더 편리할 수 있으므로, -y 또는 –yes 옵션을 추가한다. 그러면 기본 설정값으로 package.json 파일을 생성한다.

npm init -y

npm install 명령어에 –save 옵션을 사용하면, 패키지 설치와 함께 package.json 의 dependencies에 설치된 패키지 이름과 버전이 기록된다.

npm install --save node-emoji

(이는 이제 기본 설정이 되었다.)

npm install 명령어의 패키지명 뒤에 @버전 을 추가하면 패키지 버전을 지정하여 설치 가능하다.

npm install node-emoji@1.5.0

^ 표시는 이후 해당 패키지의 버전이 업데이트되었을 경우, 마이너 버전 범위 내에서 업데이트를 허용한다는 의미이다.

package.json scripts 프로퍼티의 start 이외의 scripts 실행

npm run <script-name>

전역 패키지 설치 폴더 확인

npm root -g

도움말

npm help <command>

Express

Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다.

*라우팅 = 어떤 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정. 예로, 서울에서 부산을 가려할 때, 여러 경로가 있을 경우 그 중 하나를 선택하여 이동하는 것을 라우팅이라 한다.

*미들웨어 = 미들웨어는 공통 서비스 및 기능을 애플리케이션에 제공하는 소프트웨어다. 데이터관리, 애플리케이션 서비스, 메시징, 인증 및 API관리는 주로 미들웨어를 통해 처리됩니다.
미들웨어는 개발자들이 애플리케이션을 보다 효율적으로 구축할 수 있도록 지원하며, 애플리케이션,데이터 및 사용자 사이를 연결하는 요소처럼 작동합니다.

*마운트 = 물리적인 장치를 특정 위치 즉 디렉터리에 연결시켜주는 것을 마운트라고 한다.

미들웨어 함수는 다음과 같은 태스크를 수행할 수 있다.

모든 코드를 실행.
요청 및 응답 오브젝트에 대한 변경을 실행.
요청-응답 주기를 종료.
스택 내의 그 다음 미들웨어 함수를 호출.

애플리케이션 레벨 미들웨어

아래 예는 마운트 경로가 없는 미들웨어 함수로 표시되어 있다. 이 함수는 앱이 요청을 수신할 때마다 실행된다.

var app = express();
app.use(function (req, res, next) {
  next();
});

다음 예는 /user/:id 경로에 마운트되는 미들웨어 함수가 표시되어 있다.

app.use("/user/:id", function (req, res, next) {
  next();
});

다음 예는 라우트 및 해당 라우트의 핸들러 함수(미들웨어 시스템)이 표시되어 있다. 이 함수는 /user/:id 경로에 대한 GET요청을 처리한다.

app.get("/user/:id", function (req, res, next) {
  res.send("USER");
});

app.use()

app.use('./user',userRouter); //path rule이 생긴 것. /users/?? 식의 주소값을 갖게 된다.
이런식으로 하면,

user가 나올 때마다 userRouter '전체'를 사용한다는 뜻이다.

클라이언트에 전송

res.json( ) : JSON 응답을 전송합니다.
res.send( ) : 다양한 유형의 응답을 전송합니다.

Express 에서 정적 파일 제공

이미지, CSS파일 및 Javascript 파일과 같은 정적 파일을 제공하려면, Express의 기본 제공 미들웨어 함수인 express.static을 사용하라.

정적 자산이 포함된 디렉토리의 이름을 express.static 미들웨어 함수에 전달하면 파일의 직접적인 제공을 시작할 수 있다.

//public이라는 이름의 디렉토리에 포함된 이미, CSS파일 및 Javascript파일을 제공하라는 의미
app.use(express.static("public"));

+++

MVC패턴

Model , View , Control 을 의미한다.

MVC 패턴은 디자인패턴 중 하나입니다. 디자인 패턴이란, 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여, 특정한 “규약”을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말합니다.

어떠한 앱을 만든다고 하면, 그 앱을 유지보수를 하고 또 다른이들과 공유를 하면서 만들어야 할 때, 좀 더 쉽고 깔끔하게 만들 수 있는 방법을 우리는 고안해야 합니다.

라이브러리나 프레임워크가 그에 따른 예이다.

위의 그림처럼 사용자가 controller를 조작하면, controller는 model 을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View 를 제어해서 사용자에게 전달하게 됩니다.

모델, Model

애플리케이션의 정보, 데이터를 나타냅니다. 데이터베이스, 처음에 정의하는 상수, 초기화값, 변수 등을 뜻합니다. 또한 이러한 DATA, 정보들의 가공을 책임지는 컴포넌트를 말합니다.

사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다.
변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야만 한다.

모델의 속성 중 텍스트 정보가 변경이 된다면, 이벤트를 발생시켜 누군가에게 전달해야 하며, 누군가 모델을 변경하도록 요청하는 이벤트를 보냈을 때 이를 수신할 수 있는 처리 방법을 구현해야 한다.

뷰 , View

input , 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타낸다. 다시 말해 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당합니다. 데이터를 기반으로 사용자들이 볼 수 있는 화면이다.

모델이 가지고 있는 정보를 따로 저장해서는 안된다.
모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 된다.
변경이 일어나면, 변경통지에 대한 처리방법을 구현해야만 한다.

컨트롤러, Controller

데이터와 사용자인터페이스 요소들을 잇는 다리역할을 한다. 즉, 사용자가 데이터를 클릭하고, 수정하는 것에 대한 “이벤트”들을 처리하는 부분을 뜻한다.

모델이나 뷰에 대해서 알고 있어야 한다.
모델이나 뷰의 변경을 모니터링 해야 한다.

MVC 패턴은 결국 “어떻게 나눌 것인가”에 대한 해답 중 하나입니다. 어떤 특정한 역할들에 대한 역할분담을 할 때 가이드라인을 제시하는 방법 중 하나가 바로 MVC 패턴이라는 것입니다.

req.params vs req.query

+++

서버에서 req.params로 받을 수 있는 것은 이미 예약된 값이라고 볼 수 있다.

+++

require(‘모듈명’)

nodejs require link 바로가기

Node.js 의 장점 중에 하나는, 전 세계 수많은 사용자들이 만든 모듈을 쉽게 사용이 가능하다는 것이다. node.js 내장 모듈은 require(‘모듈명’)으로 사용이 가능하다.

그 외에 따로 모듈을 받아서 사용하려면, npm을 통하여 모듈을 다운로드하는 과정이 필요하다. 다운로드 하였다면 똑같이 require을 이용하여 사용이 가능하다.

아래는 node.js의 내장 암호화 모듈인 crypto를 불러오는 코드이다. C의 include, 자바의 import 등과 다른 점은 불러와서 객체( var crypto)에 저장을 한다는 것이다.

var crypto = require("crypto");

NPM 사용법

npm install [모듈명] -g

g는 global 을 뜻한다. 전역 모듈로 다운받는 것이다.이 경우는 많이 사용되지는 않으나, express, gulp나 grunt등 커맨드 터미널에서 사용되어지는 모듈들은 Global 하게 설치하여야 한다. 보통 Global 하게와 Local 하게 두번에 걸쳐서 설치하는 경우가 종종 있다.

npm install [모듈명] –save

–save는 현재 폴더에 package.json 에 집어넣는다는 뜻이다. npm 으로 설치를 할 때에, 해당 모듈을 유지 보수하기 위한 정보가 package.json 에 저장되어있다.

npm install

그냥 npm install 하는 경우도 있는데, 이는 package.json 에 필요한 모듈들을 다 집어넣었을 때에 필요한 모듈들을 한번에 다운로드 하기 위하여 사용되어진다.

Export 사용법

위의 내용들은 전부 기존에 만들어져있는 모듈들을 사용하는 방법들이었다. 물론 우리도 자체적으로 모듈을 만들어서 사용할 수 있다. 그 방법이 바로 exports이다.

exports 에는 모듈 자체를 내보내는 방법과, 함수 각각을 내보내는 방법이 있다.

현재 작성한 js파일을 모듈화하여 내보내기

var app = express();
module.exports = app;

임포트하기 위해서는 파일의 이름이 만약 express.js였다면,

var express = require("../express.js");

위와 같이 그냥 모듈명만 입력하는 것이 아니라, 파일명을 상대 혹은 절대 경로로 입력해주어야 한다. 또한 확장명도 입력해주어야 한다. 그 이후에 사용하는 방식은 일반 모듈과 동일하다.

함수를 하나씩 보내는 경우

test라는 것을 export하기

exports.test = function (testInt) {
  console.log(testInt);
};

var express = require("../express.js");
express.test(5);

또는

require("../express.js").test(5);

res.locals

res.locals;

로컬에 있는 것은 템플릿에 변수처럼(전역변수 처럼) 존재한다. locals 에 로컬 변수를 저장하면, 이 변수들을 템블릿에서 사용할 수 있다. 자세한 건 express 공식 문서 참고.

그렇다면, 템플릿마다 다르게 변수를 설정하려면 어떻게 해야될까?

title #{pageTitle} | #{siteName}

이는 pug로 작성된 코드이다. 여기서 pageTitle이라는 변수를 앞에 추가해주었다.

.env 환경변수

Node.js 에서 프로그래밍에 필요한 값들을 서술할 수 있는 .env 환경변수 파일

#This is sample.env
NUMBER=1234

Node.js 에서는 프로젝트 디렉토리에 .env 라는 이름의 파일이 존재하면 환경변수처럼 소스코드처럼 가져와서 사용할 수 있다.

.env 을 이용하기 위해서는 프로젝트에 dotenv 패키지를 설치하면된다.

var express = require("express");
var router = express.Router();
require("dotenv").config(); //.env 파일을 자동으로 인식해서 환경변수를 설정해준다.

router.get("/message", function (req, res, next) {
  res.send(process.env.MESSAGE);
});

module.exports = router;

dotenv 패키지를 불러온뒤, config()함수를 실행하면, .env파일의 내용을 process.env객체를 통하여 접근할 수 있다.

MESSAGE 라는 키가 있으면, process.env.MESSAGE 처럼 접근하면 된다.

dotenv 라이브러리

크로스플랫폼 환경변수를 설정할 때 사용하는 것으로, 프로젝트 참여자 각각이 MacOS, Windows, Linux 등 다양한 OS를 사용하고 있을 때, 사용할 수 있다.

npm i -s dotenv
yarn add dotenv

현재 디렉토리의 .env 파일을 자동으로 인식해서 환경변수를 설정해준다.

import dotenv from "dotenv";

dotenv.config();

아래와 같이 작성하면, 원하는 .env 파일의 위치를 직접 지정할 수 있다.

import path from "path";
import dotenv from "dotenv";

dotenv.config({ path: path.join(__dirname, "path/to/.env") });

Axios 사용법 및 튜토리얼

axios 는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 Axios 는 직접적으로 XMLHttpRequest를 다루지 않고 “AJAX 호출”을 할 수 있습니다.

function getPokemonData() {
  axios
    .get(apiUrl + input.value) //axios가 저장한 api 와 인풋 숫자값으로 HTTP GET요청
    .then(function (response) {
      //만약 성공한다면 then 으로 api 요청 결과값은 response에 저장된다.
      pokemonName.innerHTML = response.data.forms[0].name;
    })
    .catch(function (error) {
      console.log(error);
    });
}

response를 인수로 담고 있는 익명함수는 콜백함수로서 비동기 작업이 종료됐음을 알려주는 역할을 한다. 콜백함수는, 음식점에서 음식이 나왔다고 호출벨을 눌러주는 것처럼 어떤 행동을 종료해서 다음 작업이 진행되고 있다는 것을 알려주는 신호이다.

REST API

Representational State Transfer API

REST API 설계 시 가장 중요한 항목은 다음의 2가지로 요약가능.

URI(URL의 상위개념) 는 정보의 자원을 표현해야 한다.
자원에 대한 행위는 HTTP Method(GET,POST,PUT,DELETE) 로 표현한다.

REST API 중심 규칙

URI는 정보의 자원을 표현해야 한다.(리소스명은 동사보다는 명사를 사용)

GET /members/delete/1

위와 같은 방식은 REST를 제대로 적용하지 않은 URI이다. URI는 자원을 표현하는데 중점을 두어야 한다. delete와 같은 행위에 대한 표현이 들어가서는 안된다.

자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현

위의 잘못된 것을 HTTP Method를 통해 수정해보면

DELETE /memberss/1

으로 수정할 수 있다. 회원정보를 가져올 때는 GET, 회원 추가 시의 행위를 표현하고자 할 때는 POST METHOD를 사용하여 표현합니다.

회원정보를 가져올 때,

GET /members/1

회원을 추가할 때,

POST /members/2

POST - POST를 통해 해당 URI를 요청하면 리소스를 생성합니다. GET - GET을 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐멘트에 대한 자세한 정보를 가져온다. PUT - PUT을 통해 해당 리소스를 수정한다. DELETE - DELETE를 통해 리소스를 삭제합니다.

다음과 같은 식으로 URI는 자원을 표현하는 데에 집중하고 행위에 대한 정의는 HTTP METHOD를 통해 하는 것이 REST한 API를 설계하는 중심 규칙입니다.

URI 설계 시 주의할 점

1)슬래시 구분자(/)는 계층 관계를 나타내는 데 사용

http://example.com/houses

2)URI 마지막 문자로 슬래시를 포함하지 않는다.

3)하이픈(-)은 URI 가독성을 높이는데 사용

4)밑줄(_)은 URI에 사용하지 않는다.

5)URI 경로에는 소문자가 적합하다.

6)파일 확장자는 URI에 포함시키지 않는다.

phono.jpg (x)

자원을 표현하는 Collection 과 Document

컬렉션은 문서들의 집합, 객체들의 집합이라고 생각하라. 도큐먼트는 단순히 문서로 이해해도 되고, 한 객체라고 이해해도 된다.

http: // example.com/sports/soccer/players/13

좀 더 직관적인 REST API를 위해서는 컬렉션과 도큐먼트를 사용할 때, 단수 복수도 지켜준다면, 좀 더 이해하기 쉬운 URI를 설계할 수 있다.

HTTP 응답 상태 코드

잘 설계된 REST API는 URI만 잘 설계된 것이 아닌, 그 리소스에 대한 응답을 잘 내어주는 것까지 포함되어야 한다. 정확한 응답의 상태코드 만으로도 많은 정보를 전달할 수가 있기 때문입니다.

200 - 클라이언트의 요청을 정상적으로 수행함. 201 - 클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨.

400 - 클라이언트의 요청이 부적절 할 경우 사용하는 응답 코드 401 - 클라이언트가 인증되지 않은 상태에서 보호된 리소스를 요청했을 때 사용하는 응답 코드

301 - 클라언트가 요청한 리소스에 대한 URI가 변경 되었을 때 사용하는 응답 코드

500 - 서버에 문제가 있을 경우 사용하는 응답 코드

nodejs는 데이터를 다루기에 좋다. 하드코어한, 하드웨어적인 것을 다루기에는 좋지 않다.

하드코어한 거는 차라리 장고가 더 맞다.

nodemon

+++

Nodemon은 Node.js에 기반한 웹 애플리케이션을 개발할 때, 파일에 변경사항이 발생했을 때, 저절로 애플리케이션이 재실행되도록 도와주는 패키지다. Nodemon을 설치하면, 코드를 수정하고 저장버튼을 눌렀을 때, 애플리케이션이 저절로 실행되게 할 수 있다.

package.json 파일로 이동해서, script의 start 칸의 앞에 nodemon –exec을 추가한다.

morgan

+++

morgan 은 미들웨어에 로깅 기능을 추가해주는 플러그인이다.

Helmet

+++

nodejs 보안에 도움을 주는 플러그인.

Body Parser

+++

클라이언트 POST request data 의 body로부터 파라미터를 편리하게 추출합니다.

var express = require('express')
var app = express()
app.post('/profile', function(req, res) => {
  console.log(req.body)
})


--->
{
  userID : "힝",
  password : "나도몰라"
}

원래 body-parser을 사용하기 전에는 req.body 에는 디폴트값으로 Undefined가 설정되어있다. 따라서 body-parser가 없으면, undefined Error 와 마주하게 된다.

Pug

+++

Node.js 템플릿 엔진 중 하나이다. 그 중에서 pug는 자주 쓰이는 것이다.

pug는 html 파일들이 예쁘게 보이게함.

이를 쓰기 위해서는 Express에서 설정을 해주어야한다.

view engine 값을 설정해주어야 한다.

app.set("view engine", "pug");

그리고 views 의 설명대로

/views 디렉토리를 만들고, 그 안에 확장자가 pug인 파일을 생성하면 된다.

/views/home.png

multer

++++

multer Github Read.me

굉장히 유명한 node.js 미들웨어다.

Multer는 파일 업로드를 위해 사용되는 multipart/form-data 를 다루기 위한 node.js 의 미들웨어 입니다. 효율성을 최대화 하기 위해 busboy 를 기반으로 하고 있습니다.

주: Multer는 multipart (multipart/form-data)가 아닌 폼에서는 동작하지 않습니다.

설치

$ npm install --save multer

사용법

Multer는 body 객체와 한 개의 file 혹은 여러개의 files 객체를 request 객체에 추가합니다. body 객체는 폼 텍스트 필드의 값을 포함하고, 한 개 혹은 여러개의 파일 객체는 폼을 통해 업로드된 파일들을 포함하고 있습니다.

기본 사용 예제:

var express = require("express");
var multer = require("multer");
var upload = multer({ dest: "uploads/" });

var app = express();

app.post("/profile", upload.single("avatar"), function (req, res, next) {
  // req.file 은 `avatar` 라는 필드의 파일 정보입니다.
  // 텍스트 필드가 있는 경우, req.body가 이를 포함할 것입니다.
});

app.post("/photos/upload", upload.array("photos", 12), function (
  req,
  res,
  next
) {
  // req.files 는 `photos` 라는 파일정보를 배열로 가지고 있습니다.
  // 텍스트 필드가 있는 경우, req.body가 이를 포함할 것입니다.
});

var cpUpload = upload.fields([
  { name: "avatar", maxCount: 1 },
  { name: "gallery", maxCount: 8 },
]);
app.post("/cool-profile", cpUpload, function (req, res, next) {
  // req.files는 (String -> Array) 형태의 객체 입니다.
  // 필드명은 객체의 key에, 파일 정보는 배열로 value에 저장됩니다.
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // 텍스트 필드가 있는 경우, req.body가 이를 포함할 것입니다.
});

텍스트 전용 multipart 폼을 처리해야 하는 경우, 어떠한 multer 메소드 (.single(), .array(), fields()) 도 사용할 수 있습니다. 아래는 .array() 를 사용한 예제 입니다 :

var express = require("express");
var app = express();
var multer = require("multer");
var upload = multer();

app.post("/profile", upload.array(), function (req, res, next) {
  // req.body는 텍스트 필드를 포함합니다.
});

mixin

mixin은 pug 의 함수의 일종이다. 반복되는 Html 을 저장한다.

ESLint

+++

Linter의 사전적 정의는 보푸라기를 떼는 것이다. 즉, 에러들을 잡아내는 역할을 한다는 말이다.

npm install eslint -g //글로벌리하게 설치

eslint --init

이러고도 에러안뜨면, VSCODE내에서 esLint를 다운받자.

그리고 Prettier 다운받고, 설정에서

Format On Save 설정해주자.

그러면, 저장할 때마다 Format을 조정해준다.

그리고 eslint-config-prettier 을 다운받아주자. -> EsLint 의 Formatting 설정 중, Prettier 와 충돌하는 것을 비활성화 시켜준다.

 npm install eslint-config-prettier

WebPack

+++

npm install webpack webpack-cli
//webpack-cli 웹팩을 terminal에서 쓰게 해주는 패키지

extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin

npm install css-loader postcss-loader scss-loader

Babel polyfill

+++

babel-polyfill

브라우저에 아직 없는 것을 채워주는 것이다. 브라우저의 구멍을 메꿔준다고 생각하면 된다.

Passport

+++

https://www.zerocho.com/category/NodeJS/post/57b7101ecfbef617003bf457

npm install passport passport-local express session

passport는 자신의 웹사이트에 방문할 때, 여권같은 역할을 한다. passport-local 은 로그인을 직접 구현할 때 사용된다. express-session 은 passport로 로그인 후 유저 정보를 세션에 저장하기 위해 사용한다.

사용자 인증 위해 사용

###passport-local-mongoose

serialization 은, 어떤 field가 쿠키에 포함될 것인지 알려주는 역할을 한다

express-session

쿠키와 세션을 사용하는 이유(로그인 되는 과정)

+++

HTTP 프로토콜에는 비연결성과 비상태성이라는 특징이 있다. 모든 사용자의 요청마다 연결과 해제의 과정을 거치면서 연결 상태를 유지하지 않고 연결 해제 후에도 상태 정보를 저장하지 않기 때문에 서버의 자원을 크게 절약할 수 있다. 하지만 이로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있다.

하지만 우리가 사용하고 있는 웹사이트를 생각해보면 로그인을 한 번 하고나면 심지어 브라우저를 종료했다가 나중에 다시 접속했을 때도 그 로그인 상태를 유지할 수도 있다. 이런 HTTP 의 비상태, 비연결의 특성들을 보완한 기술이 쿠키와 세션이다.

쿠키는 서버를 대신해서 이러한 정보들을 웹 브라우저에 저장(웹 브라우저를 이용하고 있는 컴퓨터에 저장)하고 사용자가 요청을 할 때 그 정보를 함께 보내서 서버가 사용자를 식별할 수 있게 해준다.

쿠키는 주로 세 가지 목적을 위해 사용된다.

세션 관리

로그인, 사용자 닉네임, 접속 시간 , 장바구니 등의 서버가 알아야할 정보들을 저장한다.
개인화

사용자마다 다르게 그 사람에 적절한 페이지를 보여줄 수 있다.
트래킹

사용자의 행동과 패턴을 분석하고 기록한다.

세션은 쿠키를 이용한다. 어떤 웹 브라우저가 서버에 요청을 하면 서버는 세션 아이디를 할당해서 응답할 때 함께 전달한다. 웹 브라우저는 이 세션 아이디를 쿠키에 저장해두고 매 요청마다 세션 아이디를 전달한다. 서버는 세션 아이디를 바탕으로 사용자를 식별하고 사용자의 데이터를 서버에 저장하여 관리한다.

쿠키(Cookie)

쿠키는 서버가 사용자의 웹 브라우저에 저장하는 데이터. 쿠키의 데이터 형태는 key 와 value로 구성되고 String 으로만 이루어져 있다. 4KB이상 저장할 수는 없다.

Session 쿠키 & Permanent 쿠키

세션 쿠키는 웹 브라우저가 종료될 때 제거되는 쿠키이고, Permanent 쿠키는 브라우저가 종료되더라고 쿠키를 유지하는 것이다.

세션(Session)

세션이란, 일정 시간동안 같은 사용자로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이라한다.

또한 여기서 일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써, 연결을 끝내는 시점을 말하며, 즉, 방문자가 웹서버에 접속해 있는 상태를 하나의 단위로 보고 세션이라 칭한다.

계속해서 쿠키를 이용해서 인증을 구현하면, 쿠키가 유출, 조작될 수 있는 보안상 매우 큰 문제가 될 수 있다. HTTP로 개인 정보를 주고 받는 것은 매우 위험하다.

세션은 비밀번호와 같은 인증 정보를 쿠키에 저장하지 않고 대신에 사용자의 식별자인 Session ID를 저장한다. 서버에는 인증 정보와 더불어 이 ID에 해당하는 로그인 상태, 마지막 로그인 시간, 닉네임, 만료기한 등의 정보를 저장한다. 보안상 서버는 사용자의 개인 컴퓨터보다는 훨씬 안전하기 때문에 인증에 Session을 이용한다.

Connect-mongo

+++

mongodb 에 세션을 저장하려할 때 사용.