NodeJS Express를 활용한 로그인 기능 구현 - boiler-plate 강의 기반으로 한 정리 [1/3]

자바스크립트를 조금 할 줄 아는데, 맨날 리액트만 공부하다보니 답답해서 nodejs를 공부해보기로 함.

 

제일 기본적이지만 어려우면 어렵다고 말해지는 로그인 그리고 auth, 그를 위한 db 연결 기능까지 어떻게 진행했는지 이야기 해봄.

 

---

약 4~5시간 정도 강의 수강 - 강의링크

 

< B A S E >

 

1. nodejs가 설치된 상태에서 진행한다.

 

2. 우선 작업을 시작할 폴더를 만든 후, npm init을 통해 대강의 설명을 적어준다.

 

3. 이제 express를 설치한다. express도 하나의 모듈이기 때문에

터미널에 npm i express -s를 입력해서 설치한다.

 

4. 설치 후 제일 먼저 해보는 것은 항상 Hello World를 띄어보는 것.

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 listening on port ${port}`)
})

위는 express 홈페이지의 시작하기 예제를 참고한 것

 

 

그리고 난 후 터미널에

node index.js를 통해(예제에서는 app.js라고 되어있는데 보통은 index.js라는 이름으로 파일을 생성하는 듯) 서버를 실행한다.

 

그러면 localhost:3000에는 [Hello World!] 가, 콘솔창에는 [Example app listening on port 3000] 이 나타날 것이다!

 

---

< DATA BASE - MongoDB >

 

5. 이제 간단하게 mongodb를 활용해서 콜렉션 - 스키마를 만드는 작업을 진행해야함.

 

6. mongodb는 js기반의 nosql dbms라서 nodejs와 잘 맞아서 같이 사용하는 듯함.

 

7. 우선 nodejs에서 mongodb를 사용하기 위해서는 mongodb를 사용할 수 있는 모듈을 설치해줘야함.

이름은 몽구스

이름 귀여엉

npm i mongoose -s

를 통해 설치를 진행

 

8. models > User.js 파일을 만든 후 아래와 같이 작성한다.

import mongoose from 'mongoose';
const { Schema } = mongoose;

const userSchema = new Schema ({
  name : {
    type:String,
    maxlength: 50
  },
  email:{
    type:String,
    trim:true,
    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)

export default User;

mongo db의 스키마를 만드는건데, 간단하게 말해서 json 형식의 데이터 구조를 생성한다고 치면된다.

그걸 모델이라고 부르는것 같고?

 

우선 ES6 문법으로 mongoose를 임포트 해온 후

몽구스를 { Schema } 로 정의한다.

 

이게 나도 왜그러는지 대충 감으로만 지금 알고 있는데,

느낌상 mongodb의 데이터 구조가 json 형식 그러니까 오브젝트 형식으로 되어있으니까

그것 자체를 오브젝트에 넣고, 그렇게 넣어진 오브젝트를

클래스로 선언하기 위해 이렇게 하는듯 하다!

아마?!

 

그리고 난 후 새로운 클래스를 변수{객체}에 할당해서 해당 스키마를 짠다.

 

스키마는 위에서 말했는 json형식이기 때문에

key : value로 구성되며

당연히 객체니까 value도 객체가 될수있고 객체의 객체의 객체의 객체개개개개객

 

이후 만든 모델을 다시금 User라는 변수에 저장을 해준다.

아마 이렇게 해주는게 바로 저장이 안되니까 그렇지 않을까 생각한다.

 

그래서 User 변수에 mongoose. model 매소드를 활용하는데

첫번째 인자로는 string 두번째 인자로는 스키마가 온다.

뒤에 더 뭐 많이 올 수 있는 것 같은데 나는 잘 모르겠다 히히 천천히 알아가야지

 

그렇게 내가 만든 스키마를 저장한다.

 

마지막으로 이 모델을 다른곳에서 사용하기 위해 export를 해준다.

원래는 module.export였는데 es6로 내가 다 바꿔버려서 export default User 로 export 해준다.

 

 

11. 이제 index.js로 돌아와서 나의 mongodb와 연결시켜준다.

 

import mongoose from 'mongoose'


mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MONGODB connected'))
  .catch(err => console.log(err))

 

index.js에 몽구스를 임포트 해오고,

몽구스에 커넥트 메소드를 활용해서 이렇게 들고온다.

 

밑에는 에러가 만약 발생한다면 그 에러를 잡기위해 then과 catch구문을 넣어주는것이당

 

그리고 connect의 인자로는 내 mongodb의 uri를 써줘야하는데 이는 환경변수로 지정해줬다.

원래 환경변수 지정해줄때 require로 이렇게 저렇게 들고 왔는데, nodejs에서 숨기는 변수로 지정해주려면 이렇게 해줘야해서

.env파일을 만들고 거기다가 저장해줬다.

이를 위해선 별도로 dotenv라는 모듈을 사용해줬는데 이건 별도로 설명하겠당!

 

[Dotenv 링크 예정]

---

< Route - Register >

 

9. 중간에 git에 올리고 ssh 설정하고 그런 내용들이 있었지만 그 설명은 nodejs 외의 내용같애서 넘기고,

바로 register라우트 만드는 것으로 진행함

 

위에서 mongoose를 통해 db 스키마를 만들었기 때문에 여기에 등록한다고 생각하면 댄당

 

10. 우선 register를 할려면 register를 받는 곳을 만들어야겠쥥?

app.post('/api/users/register',(req,res)=>{
  const user = new User(req.body)
  user.save((err,userInfo) => {
    if(err) return res.json({success:false, err});
    return res.status(200).json({
      success:true}
  )})})

우선 register는 뭔가 내용을 보내야 하기 때문에 get방식이 아닌 post방식으로 통신을 한다.

post뒤에는 해당 api주소를 입력하고, 그 이후에는 (req, res)가 들어온다.

req 는 request로 내가 요청하는 값, res는 response로 거기서 주는값이라고 생각하면 편하다.

 

api에 req를 보내면 해당 내용을 바탕으로 함수를 실행하는데,

우선 const user = new User를 통해 새로운 클래스를 생성한다.

이 클래스는 위의 User 스키마에서 들고온 것으로 당연 위에는 User.js를 미리 import해두어야 한당.

이 클래스에는 req.body의 값을 인자로 넣어주는데 이 값은 json형식으로 들어가는 데이터 값으로

{
'name':'lee',
'password':'abcd'
}

이런식으로 post요청을 할때 쓰는거당.

 

그런데 이렇게 req값을 json 형식으로 받기 위해선 express에서 제공하는 json request를 위한, 그리고 url인코딩을 위한 모듈을 불러와줘야한다.

 

11. 이미 위에서 app을 express로 불러온다고 말해뒀기 때문에 app에 있는 use매소드를 활용한다.

app.use(express.json()) //For JSON requests
app.use(express.urlencoded({extended: true}));

이렇게 써주면 위의것은 json requset를 아래 내용은 url을 인코드하는건데 아직 정확히는 모르겠다.

이 두개를 넣어줘야 req의 body로 들어가는 값을 읽어 올 수 있는 것이다.

 

12. 그리고 10에서 설명하던 내용을 이어서 하겠당!

클래스로 새로 만든 user 스키마는 save를 이용해서 해당 내용을 저장해준다.

save의 첫번째 인자로는 (에러값, 결과값)이 오는데

만약 에러가 발생한다면 해당 내용을 json형식으로 success값에는 false 함께 err를

만약 에러가 발생하지 않는다면 res.status(200)으로 성공했다는 번호와 함께 json형식으로 success값에 true를 보내준다.

 

여기서 나는 궁금한게 그냥 save 매소드만 쓰면 만약 데이터 쓰기가 성공할 시 자동적으로 결과값이 들어가느지다.

왜냐하면 저기 userInfo라는 단어는 어디서도 쓰지 않거덩.

=> 이건 console.log를 활용해서 확인을 해보았는데

아무래도 뭐라고 적든간에 자동적으로 이 정보가 저장되는 것 같다.

딱히 userInfo를 가지고 뭘 할 생각이 아니라면 뭘 넣어도 상관없을듯.

 

우선 이편에서는 register까지만 작성하고 다음편에 이어서 로그인 편을 작성하겠슝.