Create the Dashboard

#주소록 만들기

우선 주소록이 실행되는 사이트를 만들기 전에 이 사이트를 연결시켜 줄 환경 변수 설정이 필요합니다.

간략하게 환경 변수를 설정하는 방법에 대해 소개를 해 보자면(이 방법은 윈도우 체제에서의 경우입니다),

1.윈도우 검색창에 시스템 정보를 친다.

1. 고급에서 환경 변수를 누른 후 MONGO_DB를 선택하고 확인을 누른다

추가)mongo연결하려면 mLab가입을 해야합니다. (http://mlab.com/)

MongoDB Hosting: Database-as-a-Service by mLab

mLab is the largest cloud MongoDB service, hosting over 900,000 deployments worldwide on AWS, Azure, and Google. Get started with a free database.

mlab.com

가입이 완료되었으면, 플랜을 설정해 준 다음 데이터 베이스 생성을 해 줍니다. 데이터 베이스를 생성한 후에 각자 생성한 DB를 클릭하시고

DB사용자 등록을 해 주셔야 합니다. Users 탭의 Add database user을 눌러주시면 됩니다.

START PROJECT

위에서 mongoose로 DB연결을 하였으니, VS에서 새 터미널 창을 열어서

git clone https://github.com/a-mean-blogger/{파일이름}.git

cd {파일이름}

npm install

atom .

를 차례로 입력해 줍니다.

이제 프로젝트를 폴더를 만들고 터미널에 npm init 으로 package.json을 생성해 줍니다.

그 다음 npm install --save ejs express mongoose 를 입력한 후 package를 한 번에 설치해 줍니다.

※페이지 코드를 작성한 후 실행을 시켜주는 코드는 1.node {폴더이름}.js 2.nodemon 이 두 가지가 있습니다. 2번을

사용하기 위해서 터미널에 npm install --global nodemon을 입력하여 설치해 줍니다. 설치가 완료되면 터미널에 nodenom 이라고 치면

실행이 됩니다.

(만약 에러가 발생했다면, printenv를 입력하여서 DB connection string이 제대로 설정되어 있는지 확인 할 수 있습니다.)

이제 본격적으로 주소록을 만들어 보겠습니다.

C(create)R(read)U(update)D(delete) => CRUD

(데이터의 생성, 조회, 수정, 삭제가 가능함을 나타냄)

웹브라우저의 form으로 전송된 data를 서버에서 쉽게 사용하기 위해 body-parser package를 설치해야 합니다.

터미널에 npm install --save body-parser을 입력해 줍니다.

(완성된 주소록의 폴더모습과 index.js의 코드입니다. index.js코드 이외에도 만들어야 할 파일들이 있는데 더 많은 폴더들과

코드들은 git에 업로드 하였으니 참고하시길 바랍니다.)

https://github.com/Kimngeunhye/address-book

게시판 취약점 보안

userRouter.js에서 Module 부분을 보시면 sanitize라는 함수가 추가가 된 것을 보실 수 있을 겁니다. 이는 사용자가 자신의 정보를 입력해서 로그인하면 쿠키값에 자신의 정보가 입력이 되는데 sanitize가 존재하지 않게 되면 악의적인 이용자가 이 값에 기존 사용자의 정보를 지우고 자신의 정보를 넣으면, 해당 탭에서 자신이 권한자가 되어서 기존 사용자가 적어놓은 게시물을 임의로 수정 및 삭제(혹은 추가) 가 가능하게 됩니다. 이를 방지하기 위해 sanitize 함수를 선언해 준 것입니다.

//Module

const express = require('express');

const router = express.Router();

const User = require('../models/User');

const sanitize = require('sanitize-html');