[React] 서버 구현 - 1 (mongoDB 연결, 유저 모델 생성)

 

이전글 : 2022.06.07 - [NodeJS] - [NodeJS] Express와 Sequelize-cli를 사용한 Access 및 Refresh 토큰 구현

[NodeJS] Express와 Sequelize-cli를 사용한 Access 및 Refresh 토큰 구현

 

NodeJS를 통해 전부 구현을 했더니,

알고보니 React로 다시 구현을 해야했습니다.(...)

 

이유가 뭐냐면,

 

NodeJS 파트를 보면 알겠지만,

노드 파트에서 router.get 이나 router.post 등으로 링크를 배분했는데,

이런식으로 배분해버리면 리액트에서 제대로 작동을 안한다나 뭐라나..

 

그리고 다른 팀원들이 한 파트에 집어넣으려하니 그것도 그거대로 문제가 발생했고,

결국엔 다시 리액트 방식으로 맞추어서 다시 제작하게 되었습니다.

(제발 제대로 찾아보고 하자..)

 

대부분의 내용은

인프런 무료 강의

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8/lecture/37061?tab=curriculum

를 참고했고, 프로그램에 맞추어 조금 변형된 부분이 있습니다.

 

어찌됬건 만들긴 해야하니 잊고 다시 시작하도록 합시다.

---

기본적으로 코드가 돌아가는 방식은 NodeJS와 비슷한데,

아니, 사실상은 거의 똑같습니다.

app.get과 app.post의 방식으로 바꾼거고,

클라이언트 폴더를 추가하여 클라이언트로부터 정보를 받도록 구현만 하면 되기때문에

카테고리 [NODEJS]에서 바뀐 부분은 크게 없습니다.

 

MySQL이 아니라 MongoDB로 연동한 점이나,

router가 아닌 app으로 받은점,

이정도 외에는 자잘한 부분 정도가 바뀌었다고 생각하면 됩니다.

 

 

NODEJS 때와 똑같이,

Windows 운영체제에서 VScode를 사용해서 제작했고,

Nodejs의 버전은 v16.14.2

이후에 클라이언트에서 사용할

React의 버전은 v18.1.0 이라고 나와있는데,

강의와는 다르게 v6 버전이라고 생각하면 편합니다.

 

---

 

저번과 똑같이,

# npm i express --save

를 사용하여 express를 설치하고,

 

# npm init

를 통해 package.json을 설정합시다.

 

그리고 서버의 가장 메인 파트가 될 index.js를 만들어줍니다.

 

위치는 server라는 폴더를 만들고, 그안에 만들어주는 식으로 합시다

( ./server/index.js )

 

// ../server/index.js

// express 모듈 가져오기
const express = require('express')
// 새로운 express app 생성
const app = express()
// port 설정
const port = 5000

// root인 /, ( = localhost:5000/) 접근했을 때 Hello World!를 응답해준다.
app.get('/', (req, res) => {
  res.send('Hello World!')
})

// ${port}는 맨위에 정의해준 port = 5000의 값이 들어간다.
// 콘솔에는 그러니 Example app listening at http://localhost:5000 으로 생성됨
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

당연히 NodeJS때와 똑같으니 자세한 설명은 넘어갑니다.

 

이제 MongoDB를 연동할 차례.

 

MongoDB를 만드는 방법은 구글링하면 널려있으니..

연동하는 방법만 추가합니다.

 

몽고DB를 연동하기 위해서는

# npm i mongoose --save

를 사용해서 모듈을 먼저 다운받아야합니다.

 

// ../server/index.js

import mongoose from ('mongoose')
const config = require('./config/key')        // mongoURI 보안

...

mongoose.connect(config.mongoURI)
.then(() => console.log('== MongoDB Connected =='))
.catch(err => console.log(err))

...

코드를 보게되면 다른 페이지랑 다른 부분이 있는데,

 

mongoose.connect 부분이 조금다를겁니다.

 

이게 버전 때문인데,

제일 최신버전부터는

// 이전버전.
{
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
    useFindAndModify: false,
}

부분이 생략됩니다.

오히려 적게되면 오류가 납니다.

 

그리고 원래 mongoURI 쪽에는 말그대로 connect를 하기위한 링크가 있어야하는데,

링크를 그대로 적게되면 보안성에 문제가 생깁니다.

(Git이나 웹에 저장을 하게되면 바로 다른사람한테 해킹당할수 있다 같은 공식 메일이 날라옴.)

 

따라서 저는 server/config 폴더를 생성하여, dev.js, key.js,  prod.js 파일들을 만들어 주었습니다.

// ../server/config/dev.js

module.exports = {
    mongoURI: 'mongodb+srv://ohbase:<비밀번호>@oberspace-db-server.rylta.mongodb.net/<원하는 mongoDB 데이터베이스 이름>'
}

// ../server/config/key.js

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

// ../server/config/prod.js

module.exports = {
mongoURI: process.env.MONGO_URI
}

<비밀번호> 부분에는 몽고 DB를 생성할때 만든 비밀번호

<원하는 mongoDB 데이터베이스 이름>의 부분에는 말그대로 원하는 이름을 적으면됩니다.

맨 뒷부분을 설정하지 않으면 자동적으로 test라는 데이터베이스가 생기고,

이후 만들어질 User.js에서 정해진 이름이 그 데이터베이스 내부에 콜렉션으로 생깁니다.

 

ex) 아무것도 적지 않았고, User.js에서 user로 내보냈을경우,

데이터베이스 test - 콜렉션 users 내에 회원정보가 저장됩니다.

 

이렇게 세개로 나눈 이유는 이후 HEROKU라는 배포 환경을 설치했을때 용이하게 사용하기 위함 입니다.

이건 이후에 더 자세히 적도록 하겠습니다.

 

---

이제 mongoDB에 연결했으니, 유저 모델을 만들어주죠.

모델은 스키마를 감싸는 역할이고,

스키마는 값이 저장되는 표 라고 생각하면됩니다.

 

mongoDB로 보게되면,

모델은 데이터베이스 내부에 생성된 콜렉션이고,

스키마는 콜렉션 내에 저장되는 것.

이라고 생각하시면됩니다.

 

// ../server/models/User.js

const userSchema = mongoose.Schema( {    // 스키마 세팅
  userid:  {				// 저장될 아이디
    type: String,  
    maxlength: 50,			// 아이디 최대길이
    trim: true,				// 공백 제거
    unique: 1,				// 아이디 중복 방지
  },
  usermail: {				// 저장될 이메일
    type: String,
    trim: true,             // 공백 제거
    unique: 1,				// 이메일 중복 방지
  },
  password: {				// 저장될 패스워드
    type: String,
    minlength: 5			// 패스워드 최소 길이
  },
  passwordcheck: {			// 패스워드 확인
    type: String,
    minlength: 5			// 최소 길이
  },
  username:  {				// 사용자 이름
    type: String,  
    maxlength: 50
  },
  role: {                   //가입자(디폴트, 0), 관리자는 0을 제외한 숫자.
    type: Number, 
    default: 0
  },
  token: {                  // 토큰 설정 (나중에 유효성 관리 가능)
    type: String
  },
  tokenExp: {               // 토큰 유효기간
    type: Number
  }
})

const User = mongoose.model('User', userSchema)  // 콜렉션 이름 설정
module.exports = { User }                        // export

 

여기서 바로 위에서 말한 콜렉션 이름 설정이 있습니다.

맨 밑에서 두번째줄에, const User = mongoose.model('<콜렉션 이름>', userSchema) 가 기본 형태입니다.

따라서 원하는 콜렉션 이름을 적어 만들어줍시다.

 

참고로 데이터베이스를 따로 만들지 않아도 여기에 자동적으로 만들어줍니다.

 

코드 상 에서 데이터베이스 이름, 콜렉션 이름을 설정해주었는데

mongoDB내에 없다면, 자동 생성 해줍니다.

 

이제 기본적인 설정은 다 되었으니,

다음 시간에는 회원가입을 진행 해봅시다.