Frontend 100

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

[javascript] sort() (정렬/객체배열정렬)

1. sort() arr.sort([compareFunction]) compare함수 파라미터 가 생력되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됨. 1. 오름차순 (숫자) 일반적인 문자열 배열은 arr.sort()하면 오름차순으로 정렬됨!But, 숫자일 경우 [10, 2, 1].sort()하면 [1, 10, 2]가 됨!!-> int로 parse하는 함수 작성 let brr = arr.sort(function(a, b) { return parseInt(a) - parseInt(b); }); 2. 내림차순 리턴이 b - a let brr = arr.sort(function(a, b) { return b - a; }); 3. 객체 배열 객체로 이루어진 배열일때는 객체의 ke..

Frontend/javaScript 2022.06.11

List, Array 형태 데이터 파라미터로 Spring 서버와 ajax 통신

일반적인 방법으로 arr전송시 에러가 발생. (ajax에서 controller로 넘어가기 전에 데이터 형태가 맞지않다는 에러) Controller 파리미터 부분에 @RequestParam(value="CREATEDDATAS[]") String[] CREATEDDATAS @RequestParam(value="CREATEDDATAS[]") List CREATEDDATAS @RequestParam(value="CREATEDDATAS") List CREATEDDATAS 위와 같은 방법을 시도했지만 계속 에러가 나서 아래 방법으로 해결함! ajax var data = [{"key1" : "data1", "key2" : "data1"}, {"key1" : "data2", "key2" : "data2"}]; func..