티스토리 뷰
Step1. 사전에 해야할 일
1) Mongo DB 설치
2) 시스템 환경변수 추가
3) DB 실행 명령어
위 명령어를 입력하고 MongoDB를 항상 실행시켜야 한다.
4) 관련 모듈을 설치한다
package.json아래 내용을 다운로드하고 명령 프롬프트 창에다가
%npm install 라고 입력하면 자동으로 패키지가 생성이 된다.
5) MongoDB를 이용하여 database 입력.
입력방법은 다음과 같습니다.
1 2 3 4 5 6 | 1) mongo 입력 2) local와 연결 -> use local 3) DB 정보 입력 -> db.users.insert({id: 'test01', name:'소녀시대', password:'123456'}) 4) 입력한 DB 확인하기 -> db.users.find().pretty() | cs |
Step2. Express 서버 객체 생성
Express를 사용하려면 기본적으로 적용해야하는 내용들입니다.
1) Express 기본 모듈 불러오기
1 2 3 4 5 | // Express 기본 모듈 불러오기 var express = require('express') , http = require('http') , path = require('path'); | cs |
- express 모듈 : express에서 사용하는 기본 모듈
- http 모듈 : http 통신을 하기 위한 기본 모듈
- path 모듈 : 패스 문자열을 다루는 모듈
2) Express의 미들웨어 불러오기
1 2 3 4 | // Express의 미들웨어 불러오기 var bodyParser = require('body-parser') , cookieParser = require('cookie-parser') , static = require('serve-static'); | cs |
- body-parser 모듈 : POST로 요청을 했을 때 요청 파라미터를 확인할 수 있도록 만들어준 미들웨어
※ GET 방식 vs POST 방식
- GET 방식 : 헤더 부분에 요청 정보들을 넣어 보냄
- POST 방식 : 본문 부분에 요청 정보를 넣어 보냄
==> 공통적으론 '요청 정보를 보낸다'라는 점은 POST와 GET방식 둘다 같다. 하지만, 보안 등의 이슈가 있을때나 파일을 요청 정보로 넣어 보내야 하는 경우에는(ex, 파일 업로드) POST 방식을 주로 사용한다.
(*GET 방식은 보안에 취약하다.)
- cookie-parser 모듈 : 쿠키를 설정하거나 확인하는 미들웨어
- 쿠키 : 웹브라우저에 저장되는 정보로서 일정 기간 동안 저장하고 싶을 때 사용.
- serve-static 모듈 : static 미들웨어는, 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어줌.
3) 에러 핸들러 모듈 불러오기
1 2 | // 에러 핸들러 모듈 사용 var expressErrorHandler = require('express-error-handler'); | cs |
- express-error-handler 모듈 : 예상치 못한 오류가 발생했을때 그 오류를 처리할 수 있는 미들웨어.
--> 여기서는 404.html 오류 페이지를 응답으로 보내주는 역할을 하게 된다.
4) 세션(Session) 미들웨어 불러오기
1 2 | // Session 미들웨어 불러오기 var expressSession = require('express-session'); | cs |
- 세션(Session) : 상태 정보를 저장하는 역할이지만 쿠키와는 다르게 서버쪽에 저장이 된다.
ex) 로그인 했을 때 저장되는 세션을 생각하자!
사용자가 로그인을 하면 세션이 만들어지고 로그아웃을 하면 세션이 삭제되는 기능을 만든다고 생각하자. 이러한 기능들은 사용자가 상품 페이지처럼 접근이 제한된 페이지를 조회했을 때 로그인된 상태가 아니라면 로그인 페이지를 자동으로 열어주는 페이지를 만들 수 잇게 된다.
★ 세션을 사용할때는 쿠키도 같이 사용해야 한다.
Step3. Express 모듈 초기화
1) Express 객체 생성
1 2 | // 익스프레스 객체 생성 var app = express(); |
2) http 접속 포트 설정
1 2 | // 기본 속성 설정 app.set('port', process.env.PORT || 3000); //3000번 포트로 설정. | cs |
3) body-parser를 이용한 파싱
1 2 3 4 | // body-parser를 이용해 application/x-www-form-urlencoded 파싱 app.use(bodyParser.urlencoded({ extended: false })) // body-parser를 이용해 application/json 파싱 app.use(bodyParser.json()) | cs |
- 위 내용을 사용하는 이유
application/x-www-form-urlencoded 형식으로 전달된 요청 파라미터를 파싱할 수 있다.
여기서는 login.html에서 입력된 값들을 파싱해온다.
- 파싱(parsing)이란?
값들을 각각 받아보는 것.
4) public 폴더를 static으로 오픈
1 | app.use('/public', static(path.join(__dirname, 'public'))); | cs |
이 경우는 모든 파일을 웹 서버의 루트 패스(path)로 접근할 수 있또록 만든것이다. 참고로 해당 소스코드에서는 public에 html파일들이 담겨있다.
__dirname는 현재 디렉터리라는 의미이다.
5) cookie-parser 설정