인프런 노드 리액트 기초 강의 (Node JS, Express JS) 1~10강

인프런 노드 리액트 기초 강의 (Node JS, Express JS) 1~10강

Express JS란?

작업 폴더에 들어가서

> npm init

> npm install express --save

node.js를 설치하고 Express.js를 설치하자

폴더에 index.js 파일을 만든 뒤에

const express = require("express"); const app = express(); const port = 3000; app.get('/', (req, res) => res.send("Hello, World!")); app.listen(port, () => console.log(`Example app listenging on port ${port}!`));

package.json에서 "scripts"부분에다가 "start" : "node index.js", 를 추가하자!

그럼 터미널에> npm run start 를 입력했을 때 node index.js 를 입력한 것처럼 되어서 포트가 실행된다.

변경사항을 확인하려면 서버를 죽이고 다시 켜야한다.

몽고DB 연결하기

클러스터를 생성하기 위해

www.mongodb.com 에 접속해 AWS > Singapore > M0 Sandbox 를 선택한다음 Create Cluster를 눌러 Cluster를 생성한다. 이후 Connect를 눌러 Create a MongoDB user에서 Username과 Password를 지정한다.

Choose a connection method > Connect Your Application > Connectino String only부분을 copy해서

const mongoose = require('mongoose'); mongoose.connect("-------")

위 connect의 매개변수에 넣는다.

이 부분에서 부분을 지우고 패스워드를 입력해준다.

내 IP 기억 용 캡쳐

Mongoose란? : MongoDB를 편하게 쓸 수 있게 하는 툴이라고 한다.

이렇게 되면 연결 성공!

User 모델 만들기

Model을 만들기 위해서 Schema를 만들자.

https://backend-intro.vlpt.us/2/03.html

const mongoose = require("mongoose"); const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50, }, email: { type: String, trim: true, // String에서 space부분을 없애준다. unique: 1, // 중복 방지 }, password: { type: String, minlength: 5, }, lastname: { type: String, maxlength: 50, }, role: { type: Number, default: 0, }, image: String, token: { // 유효성 관리 type: String, }, tokenExp: { type: Number, }, }); const User = mongoose.model("User", userSchema); // 모듈의 사용성을 늘리기 위해 exports module.exports = { User };

GIT 설치하기

vscode에 terminal에서 작업한다.

>git init

깃 저장소 만들기

>git status

현재 깃에 올라가는 파일들 서치하기

> git add

Working Directory에서 Staging Area로 파일들을 넘기고,

> git commit

Staging Area에서 Git Repository(로컬)로 파일들을 커밋한다

> git push

원격 Git Repository로 파일을 올린다.

SSH로 Github 연결하기

SSH를 생성해서 나의 깃허브에 등록한 다음,

> git remote add origin

명령어로 github repository와 연결한다.

>git branch -M main

으로 브랜치를 만들고,

> git push -u origin main

명령어로 git push를 진행한다.

Body-Parser Dependency : 데이터를 분석(Parse)해서 req.body로 출력하는 것

> npm install body-parser --save

회원가입을 위한 라우터 만들기

라우터 : 하나의 서버를 말하는 듯?

const express = require("express"); // express 모듈 가져오기 const app = express(); // express의 function을 이용해 app을 만들기 const port = 5000; // 포트를 지정해서 백 서버 생성 const bodyParser = require("body-parser"); //body-parser에 옵션 주기 app.use(bodyParser.urlencoded({ extended: true })); // application/x-www-form-urlencoded의 형태 데이터를 분석해서 디비에 넣게 app.use(bodyParser.json()); // application/json 형태의 데이터를 분석해서 디비에 넣게 const { User } = require("./models/User"); //User 정보 가져와서 인스턴스 만들기 const mongoose = require("mongoose"); mongoose .connect( "mongodb+srv://gyeomi:@testcluster.2znuo.mongodb.net/myFirstDatabase?retryWrites=true&w;=majority", { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false, } ) .then(() => console.log("MongoDB Connected...")) .catch((err) => console.log(err)); app.get("/", (req, res) => res.send("Hello World!!!!!")); // postman app.post("/register", (req, res) => { //회원가입할 때 필요한 정보들을 client에서 가져오면, 그것들을 데이터 베이스에 넣는다. const user = new User(req.body); //bodyParser를 이용해서 req에 데이터를 넣게 해준다. user.save((err, userInfo) => { if (err) return res.json({ success: false, err }); return res.status(200).json({ success: true, }); }); //몽고DB에서 오는 메소드(user모델에 데이터를 저장시킴) }); /* '/register'은 라우터의 end point라고 한다. */ app.listen(port, () => console.log(`Example app listening on port ${port}!`)); // 5000의 포트로 app을 실행시킴

Nodemon : Node를 실행할 때 서버를 내리거나 올리지 않고도 소스의 변화를 감지해 서버에 반영한다.

> npm install nodemon --save-dev

start를 이용해서 node index.js를 했었지만, 이제 nodemon index.js를 실행하도록 한다.

> npm run backend

이 방법을 통해 represh만으로 변경사항을 페이지에서 확인할 수 있다.

- index.js에 포함된 mongoose.connect 부분의 인자에 패스워드가 포함된 문구를 git에서 제외하는 방법

local, product에서 작업하는 두가지 경우를 나누어

다음과 같이 config 폴더를 만든뒤 dev.js에는(local 에서 작업하는 경우)

module.exports = { mongoURI: "mongodb+srv://gyeomi:@testcluster.2znuo.mongodb.net/myFirstDatabase?retryWrites=true&w;=majority", };

배포하여 작업하는 경우인 prod.js에는

module.exports = { mongoURL: process.env.MONGO_URI, };

이렇게 작업한다.

이 두 파일을 연결시킬 key.js에는

if (process.env.NODE_ENV === "production") { module.exports = require("./prod"); } else { module.exports = require("./dev"); }

이렇게 써주고 index.js에

const config = require("config/key.js"); 로 export된 모듈을 불러와 작업환경에 맞는 js파일을 index.js에 포함시키게 한다. 그리고 원래 moongose.connect()의 인자에 들어갔던 부분에는 moongose.connect(config.mongoURI)를 넣어서 디비에 연결해준다.

+ node.js에서 const {User} 처럼 중괄호를 써서 모듈을 불러오는 것은 다음 링크에서 확인할 수 있다.

https://ko.javascript.info/destructuring-assignment

bcrypt를 다운받아서 입력받은 비밀번호를 암호화하도록 해보자.

https://www.npmjs.com/package/bcrypt

여기서 참고!

saltRound 지정 -> salt를 생성하고 -> 생성된 salt로 비밀번호를 암호화한다.

userSchema.pre("save", function (next) { // 비밀번호를 암호화 시킨다. var user = this; // user은 User 스키마를 가리킴 // 다른 요소가 아닌 password가 변경되었을 때만 비밀번호가 암호화되어 저장되도록 한다. if (user.isModified("password")) { bcrypt.genSalt(saltRounds.toExponential, function (err, salt) { if (err) return next(err); // next로 이동하면 바로 save함수가 실행 // salt가 잘 생성되면 아래 문구가 실행 bcrypt.hash(user.password, salt, function (err, hash) { if (err) return next(err); user.password = hash; next(); // save로 돌아가기 }); //user.password : user 스키마의 plain password(가공되지 않은 비밀번호) // salt : 생성된 salt // hash : 암호화된 비밀번호 }); } }); // user정보를 저장하기 전에 function을 실행하게끔

index.js의 save 메소드를 실행하기 전에, User.js에 userSchema.pre 메소드를 사용해 해당 function 매개변수를 먼저 실행하도록 한다.

password를 변경하였을 경우, bcrypt 내부에 genSalt 메소드로 Salt를 생성한 뒤 이 Salt에서 hash로 password를 변경한다.

Salt : 함수의 추가 입력으로 사용되는 랜덤 데이터

Hash : 문자열을 암호화 하는 과정, 해시된 값은 비밀번호 + 솔트값으로 이루어져 있다.

에러 해결

TypeError: Number.prototype.toExponential requires that 'this' be a Number at toExponential ()

????

from http://mingyum119.tistory.com/91 by ccl(A) rewrite - 2021-07-30 17:00:14