MEAN Stack Front to Back

Presentation on theme: "MEAN Stack Front to Back"— Presentation transcript:

1 MEAN Stack Front to Back
(MEANAuthApp) 1. 환경 구축 2. Express Setup & Routes

2 참고 Traversy Media 유투브에서 Traversy Media 검색 MEAN Stack Front To Back 동영상
유투브에서 Traversy Media 검색 MEAN Stack Front To Back 동영상 RfqbZMNtaOXJQiDebNXjVapWPZ Github 소스코드

3 목차 1. 환경 구축 2. Express Setup & Routes 3. User Model and Register
4. API authentication and Token 5. Angular 4 Components & Routes 6. Register Component, Validation & Flash messages 7. Auth Service & User Registration 8. Login & Logout 9. Protected Requests & Auth Guard 10. App Deployment to Heroku

4 1. 환경 구축

5 사용할 기술들 Node.js & NPM Express framework MongoDB database
자바스크립트 프로그램 실행 환경 노드 패키지 관리자 Express framework Node.js 상에서 웹서비스를 쉽고 빠르게 구축하기 위한 프레임워 크 MongoDB database 문서 기반 NoSQL 데이터베이스 Mongoose ORM (object relational mapper) Node.js에서 MongoDB를 연결하기 위한 패키지

6 실습 환경 구축 설치할 것들 Node.js MongoDB Visual Studio Code (웹에디터)

7 Node.js 설치 설치 사이트 https://nodejs.org/ 최신 버전으로 설치
기본 설치 위치: C:\Program Files\nodejs 안정화 버전 최신 버전

8 Node.js 설치 설치 확인 C:\Users\bclee>node -v v10.16.3
C:\Users\bclee>npm -v 6.9.0 Node: Node.js 실행 명령어 Npm: 노드 패키지 관리자(node package manager)

9 Node.js 설치 시스템  설정변경  시스템 속성  고급  환경변수 
시스템 변수  Path 에 nodejs 폴더가 등록되었는지 확인 cmd 창이 이미 열려져 있는 경우 다시 열어서 명령 실행

10 MongoDB 설치 설치 사이트 MongoDB 설치 https://www.mongodb.com/
MongoDB 설치 기본 설치 위치 C:\Program Files\MongoDB\Server\4.2\bin

11 MongoDB 설치 MongoDB Compass 가 함께 설치됨 MongoDB를 관리할 수 있는 GUI 툴

12 MongoDB 설치 mongodb 연결 (cmd 명령창에서 실행)
MongoDB 서버 수동 실행 (compass 서버가 안될 때) mongodb 데몬 실행: > mongod --dbpath f:\node\data dbpath 지정 필요 mongodb 연결 (별도의 명령창에서 실행)

13 웹에디터 visual studio code 설치
마이크로소프트가 제공하는 통합개발환경(무료 텍스트에디터) 설치 사이트 유용한 확장기능을 설치하여 사용 프로젝트 열기 현재 폴더에서 vscode 열기 > code . 최근 항목 열기 각종 설정 기능 Font size, tab size, word wrap, auto indent, format on save 내장 명령창 열기 ctrl + `

14 웹에디터 visual studio code 설치
유용한 확장기능 (Extension) Emmet: 태그 쌍 자동 완성 Bracket Pair Colorizer: 괄호 쌍의 색깔을 구별하여 표시 Auto Close Tag: 태그 닫기 자동 완성 Code spell checker: 영문 스펠링 체크 기능 Live server: 로컬 웹서버 운영 Prettier: 코드 포맷 관리

15 2. Express Setup & Routes

16 프로젝트 초기화 프로젝트 폴더 생성 프로젝트 폴더로 이동 vscode 프로그램 열기 내장 명령창 열기
F:\node\meanauthapp 프로젝트 폴더로 이동 Cd F:\node\meanauthapp 여기서 명령창 열기 (shift+오른쪽버튼) vscode 프로그램 열기 > code . (현재 폴더를 프로젝트 폴더로 code 에디터 열기) 현재 폴더에 아무 내용 없음 내장 명령창 열기 ctrl + `

17 프로젝트 초기화 프로젝트 생성 > npm init 몇가지 질의에 응답 OK 하면 package.json 파일이 생성됨
Entry point를 app.js로 변경

18 프로젝트 초기화 Package.json 파일에 start script 추가 서버 실행명령 > Node app.js 또는
> Npm start

19 필요한 패키지 설치 설치할 패키지 Express (웹 프레임워크) Mongoose (mongodb 연계를 위한 패키지)
Bcryptjs (패스워드 암호화 저장) Cors (cross-origin resource sharing) Jsonwebtoken (JSON Web Token) Body-parser (POST 등으로 메시지 전달을 위한 패키지) Passport (패스포트, 인증 프레임워크) Passport-jwt (패스포트와 JWT의 연계 기능 제공)

20 필요한 패키지 설치 패키지 설치 > npm install --save express mongoose bcryptjs cors jsonwebtoken body-parser passport passport-jwt 설치과정 설명 패키지 설치 후 현재 프로젝트 폴더에 node_modules 폴더가 새 로 만들어지고 이곳에 관련 패키지들이 설치된 것을 확인 --save 옵션은 설치된 패키지 내역을 package.json 파일의 dependencies에 등록하도록 하는 옵션 향후 다른 폴더/컴퓨터에 설치하는 경우 node_modules 폴더는 옮길 필요가 없으며 package.json 파일만 그대로 복사되어 있다 면 npm install 명령을 실행하면 package.json 파일을 읽어와서 똑같은 환경으로 패키지들이 설치됨

21 필요한 패키지 설치 node_modules 폴더가 새로 생성됨 Dependencies에 설치된 패키지들이 등록됨
최신 버전들이 설치됨

22 app.js 파일 생성 app.js 서버 실행 > node app.js > npm start
const express = require('express'); const path = require('path'); const bodyparser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const app = express(); // port number const port = 3000; // Start server app.listen(port, function(){ console.log("server started on port "+port); }); app.js 서버 실행 > node app.js > npm start 프로젝트의 메인 실행 파일 Package.json에서 entry point로 지정 필요한 패키지들의 기능을 불러와서 객체를 생성함 Express 앱을 생성하고 포트번호를 지정하여 실행

23 Callback 함수 이용 방식 익명함수 (anonymous function) 익명함수에 대한 다음 두가지 표기법은 동일
이곳에서만 사용할 것이므로 이름을 붙이거나 할 필요가 없음 실행시(runtime)에 동적으로 선언, 생성됨 익명함수에 대한 다음 두가지 표기법은 동일 전통적인 표기법 app.listen(port, function() { console.log("Server started on port "+port); }); Arrow function (ES6 표기법) app.listen(port, ()=>{ console.log("Server started on port "+port); });

24 `….` 변수의 활용 자바스크립트 전통 표기법 ES6에서 새로 도입된 표기법 app.listen(port, ()=>{
console.log("Server started on port "+port); }); // start server app.listen(port, () => { console.log(`Server started on port ${port}!`); }); `….` 변수 지정 방식 주의

25 내장객체와 외부패키지 내장객체 외부 패키지 Node.js 설치시 이미 설치되어 있는 객체
v10.x/docs/api/ 에 등록된 것들 패키지를 설치하지 않고도 사 용 가능 예: Path, console, crypto, http, https, os, events, … 외부 패키지 패키지를 설치하여야 사용할 수 있는 패키지

26 웹브라우저 출력 기능 추가 웹서비스 루트 경로에 대한 응답을 지정 서버 재시작 > npm start 브라우저로 열기
const express = require('express'); const path = require('path'); const bodyParser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const app = express(); const port = 3000; app.get('/', (req, res)=>{ res.send('<h1>서비스 준비중...</h1>'); }); app.listen(port, ()=>{ console.log("Server started on port "+port); 웹서비스 루트 경로에 대한 응답을 지정 서버 재시작 > npm start 브라우저로 열기 localhost:3000

27 Express framework Node.js를 위한 웹 개발 프레임워크 API reference
API reference 핵심 기능은 라우팅, 미들웨어 등

28 Express framework Express 객체 생성
Get method - app.get(path, callback [, callback ...]) Listen method - app.listen(path, [callback]) var express = require('express') var app = express() app.get('/', function (req, res) { res.send('GET request to homepage') }) var express = require('express') var app = express() app.listen('/tmp/sock')

29 Express framework 라우팅 기능 router.all(path, [callback, ...] callback)
router.METHOD(path, [callback, ...] callback) router.param(name, callback) router.all('*', requireAuthentication, loadUser) router.get('/', function (req, res) { res.send('hello world') }) router.param('id', function (req, res, next, id) { console.log('CALLED ONLY ONCE') next() })

30 Express framework 미들웨어란 웹서버가 클라이언트의 요청사항을 수행하 기 전에 먼저 실행해야 하는 기능을 지정
Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next. .use() 함수 이용 var app = express() app.use(function (req, res, next) { console.log('Time:', Date.now()) next() })

31 Nodemon을 이용한 서버 자동 재실행 Nodemon 설치 > npm install -g nodemon
-g 옵션은 글로벌 설치를 의미하며 nodejs의 패키지 설치 위치에 설치됨. 컴퓨터 내의 어떤 위치에서도 실행 가능하게 설치 일반적으로 -g 옵션 없이 설치하면 현재 폴더의 node_modules 폴더 내에 설치하게 되므로 현재 프로젝트에서만 실행 가능함

32 Nodemon을 이용한 서버 자동 재실행 Nodemon 실행
현재 폴더의 package.json 파일을 참조하여 entry point의 앱을 실행함 (node app.js 실행) 폴더 내의 파일이 변경되면 서버를 자동 재실행함. 개발의 편의 성 크게 향상 > nodemon > node app.js > nodemon app.js

33 Nodemon을 이용한 서버 자동 재실행 브라우저 리프레쉬 app.get('/', (req,res)=>{
res.send('<h1>서비스 준비중입니다...</h1><p> Hello world </p>'); }); app.listen(port, function() { console.log("Server started on port "+port); 소스를 수정하고 저장하면 서버가 자동 재실행되어 반영됨 브라우저 리프레쉬

34 CORS Middleware CORS (Cross-origin Resource Sharing)
Ajax에는 Same Origin Policy라는 원칙이 있음. 현재 브라우저에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청 을 보낼 수 있다는 원칙 CSRF(Cross-Site Request Forgery) 크로스 사이트 요청 변조 공격 이런 공격을 방지하기 위해 Same Origin Policy가 중요함

35 CORS Middleware CORS OpenAPI를 통한 매시업(Mashup)이 활성화되고 있는데 여러 개 의 도메인을 사용해야 하는 대규모 사이트를 개발할 때 CORS가 필요함 W3C가 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법 을 표준화 한 것이 CORS임 “요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통 신할 수 있다” 웹서버가 헤더에 Access-Control-Allow-*류의 헤더를 보내면 크 로스도메인 Ajax를 허용함 

36 CORS Middleware Express에서 CORS를 허용하려면 다음과 같은 미들웨어 를 사용해야 함

37 CORS Middleware Npm cors 모듈을 이용하여 간편하게 선언하기
참조 > npm install cors (cors 모듈 설치) var express = require('express'); var cors = require('cors'); var app = express(); app.use(cors()); app.get('/products/:id', function (req, res, next) {   res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () {   console.log('CORS-enabled web server listening on port 80') App.js에 app.use(cors()); 추가 App.use() 함수는 미들웨어를 선언하는 함수

38 Body-Parser Middleware
사용자 입력값을 전달하기 위해 POST 방식의 웹페이지 요청을 처리하기 위한 미들웨어 (로그인시 username/password는 POST 방식으로 전달) const app = express(); // Port number const port = 3000; // CORS Middleware app.use(cors()); // Body Parser Middleware app.use(bodyParser.json()); // Index Route app.get('/', (req,res)=>{ res.send('<h1>서비스 준비중입니다...</h1><p> Hello world </p>'); }); // Start Server app.listen(port, function() { console.log("Server started on port "+port);

39 새로운 루트 추가하기 메인 루트 새로운 users 루트 App.js에 users 루트 등록
새로운 users 루트 별도의 폴더 routes를 만들고 이곳에 users.js 파일을 생성 예정 App.js에 users 루트 등록 const app = express(); const users = require('./routes/users'); // Port number const port = 3000; // CORS Middleware app.use(cors()); // Body Parser Middleware app.use(bodyParser.json()); app.use('/users', users); routes/users.js 파일을 읽어와서 users라는 변수에 할당 users 객체를 /users 루트에 등록

40 새로운 루트 추가하기 routes 폴더 만들기 이곳에 users.js 파일 생성하기 브라우저로 확인

41 여러 개의 루트 추가 routes/users.js const express = require('express');
const router = express.Router(); // Register router.get('/register', (req, res, next) => { res.send('등록하기'); }); // Authenticate router.get('/authenticate', (req, res, next) => { res.send('인증'); // Profile router.get('/profile', (req, res, next) => { res.send('프로필'); // Validate router.get('/validate', (req, res, next) => { res.send('검증'); module.exports = router; routes/users.js

42 Static Folder 등록하기 Public 폴더를 만들고 이곳에 static 파일을 저장할 예정
App.js에 static folder 지정 // CORS Middleware app.use(cors()); // Set Static Folder app.use(express.static(path.join(__dirname, 'public'))); // Body Parser Middleware app.use(bodyParser.json());

43 Static 파일 작성 Public 폴더 생성 Public/index.html Public/hello.html

44 MongoDB 연결하기 MongoDB의 데이터를 저장할 폴더 선정 MongoDB 서버 실행
F:\node\data 폴더에 저장할 예정 F:\node\data 폴더 생성 MongoDB 서버 실행 > mongod --dbpath f:\node\data

45 MongoDB 연결하기 DB 연결정보 저장을 위한 config 파일 작성
config 폴더 생성 (별도의 config 폴더에 작성하여 관리) database.js 파일에 세부 내용 작성 (config 상세 내용) localhost: db가 동작하는 서버의 호스트이름. 동일한 서버에서 db가 동작되는 경우 27017: mongoDB의 기본 운영 포트번호 meanauth: DB이름 지정 secret: 토큰인증에 사용할 서버의 비밀번호 (외부에 공개되지 않고 서버 내에서만 사용됨)

46 MongoDB 연결하기 App.js 파일에서 DB연결 설정 const express = require('express');
const path = require('path'); const bodyParser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const config = require('./config/database'); mongoose.connect(config.database, {useNewUrlParser: true}); mongoose.connection.on('connected', ()=>{ console.log('Connected to Database '+config.database); });

47 MongoDB 연결하기 에러 발생시 처리 추가 const config = require('./config/database');
// Connect to Database mongoose.connect(config.database, {useNewUrlParser: true}); // on Connection mongoose.connection.on('connected', ()=>{ console.log('Connected to Database '+config.database); }); // on Error mongoose.connection.on('error', (err)=>{ console.log('Database error: '+err);

48 서버에 업로드 및 실행 포트번호 사용 요령 서버에 업로드 및 실행 포트번호는 자신에게 할당된 번호 중에서 순서대로 사용할 것.
남이 사용하는 포트번호와 충돌되지 않도록 주의. 여러 개의 서버를 동시에 실행하는 경우 포트번호가 달라야 함 서버에 업로드 및 실행 계정 루트에 node 폴더 생성. 이곳에 하부 폴더로 업로드 Entry 파일 이름 변경 (추후 실행할 다른 프로세스와 구별 필요) $ mv app.js -> app_id_1.js 서버실행 $ node app_id_1.js & & 기호는 백그라운드 실행을 의미. 서버는 터미널을 끄더라도 계속 실행되어야.

49 서버에 업로드 및 실행 서비스 확인 서비스 검색 및 중지 브라우저에서 접속하고 확인 현재 실행중인 프로세스 검색 프로세스 중지
자신의 계정 홈페이지(아파치 서비스)와는 별도로 실행됨 서비스 검색 및 중지 현재 실행중인 프로세스 검색 $ ps -ef | grep node 프로세스 중지 $ kill -9 프로세스번호