Frontend/react 30

logout 기능 (로그아웃)

Client와 Server(DB)에 있는 token을 비교하여 인증 DB에서 로그아웃 하려는 유저의 토큰을 지워주면 비교했을 때 인증실패해서 로그인이 풀리는 것 1. logout route 생성 index.js app.get('/api/users/logout', auth, (req, res) => { //로그인된 상태라서 auth바로 넣어서 사용가능 User.findOneAndUpdate({ _id: req.user._id}, { token: ""}, (err, user) => { //파라미터는 find할것, update할것, 콜백 if(err) return res.json({ success: false, err}); return res.status(200).send({ success: true }) }..

Frontend/react 2022.07.07

Auth (인증/인가)기능

0. Auth 인증(Authentication) 사용자의 신원을 증명 ID와 Password로 로그인하는 과정 JWT나 Session을 이용해 인증을 유지 인가(Authorization) 특정 리소스에 접근할 수 있는 권한을 부여 페이지 이동 때마다 로그인 여부, 유저 role(권한) 체크 Cookie에서 인코딩된 Token을 Server에 가져와서 복호화. 복호화 하면 User ID가 나옴. 1. auth route 생성 index.js ///api/users user랑 관련된거 앞에 붙여주기 나중에 Router(express에서 제공)로 관련기능별로 정리 필요 const { auth } = require('../middleware/auth'); //쩜두개: 상위폴더로 app.get('/api/user..

Frontend/react 2022.07.07

로그인 기능(유저정보, 비밀번호 비교, 토큰 생성)

1. login 라우터 생성 User.findOne으로 req로 받은 email의 정보를 DB에서 찾음. index.js const express = require('express');//express안에 body-parser포함되서 따로 안써도 된다고함 const app = express(); const port = 3000 //아무 포트번호 지정 const cookieParser = require('cookie-parser'); const { User } = require('./models/User'); const config = require("./config/key") app.post('/login', (req, res) => { //라우터의 endpoint가 register // const us..

Frontend/react 2022.07.05

bcrypt 정보 암호화

암호화 하지 않고 데이터 전송시 DB관리자는 사용자의 비밀번호를 볼 수 있음. 민감정보를 암호화할 필요 있음 1. bcrypt 다운로드 npm install bcrypt --save 2. pre함수 생성 2-1. bcrypt 사이트에서 bycrpt.getSalt함수 복사 https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version: 5.0.1, last published: a year ago. Start using bcrypt in your project by running `npm i bcrypt`. There are 3374 other projects in the npm registry using bcr..

Frontend/react 2022.06.26

비밀 정보 보호 (DB 계정 정보 보호)

git에 DB계정 정보를 올리면 다른 사람이 이용할 수 있기 때문에 따로 관리 필요! 1. 파일 생성 2. local 환경에서는 gitignore에 포함된 파일에 정보 작성하고, deploy 환경에서는 별도로 계정정보를 관리해야함. key.js 환경변수 별로 가져올 파일을 지정. 2-1 .dev.js (개발용) 2-1-1. gitignore 설정 2-2. prod.js (운영용) 2-2-1. heroku에서 회원가입 및 로그인 운영용은 외부에서 정보 관리 필요! https://dashboard.heroku.com/apps Heroku dashboard.heroku.com 2-2-2. create app 2-2-3. setting 텝에서 config vars 추가 여기서 Key 이름과 prod.js 에서 ..

Frontend/react 2022.06.23

POST method route 생성(body-parser, postman)

1. body-parser client에서 sever로 보낸 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출해주는 node.js 모듈 근데 express쓰면 이거 따로 안써도 된다고함. 1-1. body-parser이용 npm install body-parser --save const express = require('express');//express안에 body-parser포함되서 따로 안써도 된다고함 const app = express(); const port = 3000 //아무 포트번호 지정 const bodyParser = require('body-parser'); const { User } = require('./models/User');//모델 들고옴 /..

Frontend/react 2022.06.22

Schema / Model

Model Schema를 감싸주는 역할 스키마를 통해서 만드는 인스턴스 Schema 데이터베이스의 구조와 제약 조건에 관한 전반적인 명세를 기술한 메타데이터의 집합 *여기서 만드는 건 웹서버가 데이터베이스에 들어있는 문서들을 객체화하여 사용 할 수 있도록 스키마를 설정 const mongoose = requier('mongoose'); const userSchema = mongoose.Schema({ //유저정보를 define하는 스키마 name: { type: String, maxlength: 50 }, email: { type: String, trim: true, unique: 1 }, password: { type: String, minlength: 5, }, role: { type: Number,..

Frontend/react 2022.06.20

몽고DB 연결

1. 몽고DB 홈페이지에서 Cluster생성 *컴퓨터 클러스터란 여러 대의 컴퓨터들이 연결되어서 하나의 시스템처럼 동작하는 컴퓨터들의 집합. DB 클러스터는 DB 서버가 여러개!! 서버 한 대가 죽어도 대비가 가능하다는 장점. *MongoDB의 구성 복제 구성을 통한 DB HA(High Availability) 사용. 복제 구성된 그룹은 Replica Set이라 하며, 다수의 Replica Set을 함께 구성하여 쿼리의 분산 처리와 Scale out에 유리하게 구성한 형태를 Sharded Cluster 라고 부름 1-1. Cloud상에 몽고 DB를 생성하는 것, Cloud 서비스 제공하는 곳 3가지 중 아무거나 선택해도 상관x 1-2. M0선택 1-3. Cluster Name 설정 (마음대로!) http..

Frontend/react 2022.06.20

Node JS / Express JS 설치

개념 Node.js Node.js가 없을 때 JavaScript를 브라우져에서만 사용 -> 서버사이드에서 JavaScript를 쓸 수 있는 언어 Express.js Node.js를 쉽게 사용할 수 있게 해주는 프레임워크 설치 1. 설치 확인 cmd창에서 node -v 입력, 버전이 나오면 설치되어 있는 것 2. 다운로드 아래 사이트에서 LTS버전으로 다운로드 클릭 다운로드 후에 node -v 쳐서 잘 설치되었는지 확인 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 환경설정 1. 디렉토리 생성 및 npm패키지 설치 cmd에서 npm init D:\>..

Frontend/react 2022.06.16