[React JS] 4. 백엔드 기본구조 생성하기

[React JS] 4. 백엔드 기본구조 생성하기

 

1. 백엔드 기본구조 생성

package.json 생성

npm init

express 설치

npm install express

- index.js 가 entry파일 (여기로 요청이 들어옴)

 

nodemon 설치

npm install nodemon

파일구조 생성

 

필요한 패키지 다운

npm install bcryptjs cors dotenv express jsonwebtoken mongoose

- bcrypt : 비번 암호화

- cors : origin 두 개에서 통신 가능하게

- env : 환경변수 생성 생성한거 사용

- jsonwebtoken : 사용가능

- mongoose : mongo db 사용

---

2. express.static()

이미지, css, js 파일같은 정적인 파일 제공하려면 Express의 express.static 내장 미들웨어 사용

app.use(express.static('uploads'));
// 가상경로 지정도 가능
// ex) app.use('/image', express.static('경로'));

상대 경로를 사용할 경우 에러남 -> 절대경로로 해야함

app.use(express.static(path.join(__dirname, "uploads")));

---

3. CORS

- server와 client 통신 --> 그냥 request 보내기 불가

- Same Origin Policy (SOP) 정책 (두 개의 다른 Origin을 가지고 있는 서버 request 불가)

- 해결) Cross-Origin Resource Sharing (CORS)

---

4. Express.json()

- 미들웨어

app.post('/', (req, res) => {
  console.log(req.body);
  res.json(req.body);
}

- json response값 받아오지 못함

app.use(express.json());

- 등록하면 가능

---

5. MongoDB

- mongoDB 회원가입

- mongoose 설치

npm install mongoose

const dotenv = require("dotenv");
const mongoose = require("mongoose");

dotenv.config();

mongoose
  .connect(process.env.MONGO_URI)
  .then(() => console.log("MongoDB Connected..."))
  .catch((err) => console.log(err));

---

6. Mongoose란

- 몽고 DB를 사용하기 위한 다양한 기능을 추가하고 더 편리하게 이용하기 위해 사용하는 모듈

- 몽구스를 이용해 데이터 만들고 관리하기 위해선 Schema 필요

- 해당 Schema로 모델을 만듦

- 선택사항임

몽구스 사용방법

- 스키마 생성

- 스키마 이용해서 모델을 만들기

- 모델 이용해서 데이터 저장/업데이트/삭제 작업 가능

 

스키마생성

const userSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 50,
  },
  email: {
    type: String,
    trim: true,
    unique: true,
  },
  password: {
    type: String,
    minlength: 5,
    maxlength: 90,
  },
  role: {
    type: Number,
    default: 0,
  },
  image: String,
});

스키마 이용해서 모델 만들기

const User = mongoose.model("User", userSchema);
module.exports = { User };

---

7. Express에서 에러 처리하기

- 에러처리기

// 에러 던지는 법
app.get('/', (req, res) => {
  thorw new Error('it is an error');
})

app.use((error, req, res, next) => {
  res.send(error.message || '서버에서 에러가 났습니다.');
})

* 비동기 요청으로 인한 에러는 에러 처리기에서 해당 에러 메시지를 받지 못하기 때문에 서버가 crash 됨

* 비동기로 만드는 법 (next 이용)

app.get('/', function(req, res, next) {
  // Reporting async errors *must* go through 'next()'
  setImmediate(() => { next() new Error('it is an error') });
})

 res.status()

app.use((error, req, res, next) => {
  // status 코드가 있으면 클라이언트에 전달, 없으면 500 클라이언트에 전달 
  res.status(err.status || 500);
})