[11.26]회원가입 구현해보기2 + 로그인✨

💥 API 설계 (로그인)

 - 로그인 POST /login

req : body (id, pwd)

res : `${name}님 환영합니다.`

 

여기서 잠깐! get으로 하지않는 이유는??? 🙋‍♀️

 메소드를 GET으로 하게 되면 id,pwd 노출이 되기 때문!! 꼭 POST로 합시다😊

 

app.post('/login', (req, res) => {

    console.log(req.body) // userId, pwd

    // userId가 DB에 저장된 회원인 지 확인해야함

    const { userId, password } = req.body  // req.body에 전달된 userId, password 꺼내기

    var loginUser = {}  // 전역변수 + 아무리 텅텅 빈 중괄호여도 값이 있는 걸로 봄

    db.forEach(function(user, id){  // value : user / index : id

        if ( user.userId === userId ) {  //user의 userId가 내가 req.body 통해서 받은 userId랑 같니?

            loginUser = user

        }

    })

    if(!isEmpty(loginUser)) {

        console.log("아이디가 동일합니다!")

        // pwd도 맞는 지 비교

        if (loginUser.password === password) {  //user의 password가 내가 req.body 통해서 받은 password랑 같니?

            console.log("비밀번호도 동일합니다!")

        } else {

            console.log("비밀번호를 다시 확인해주세요")

        }

    }else{

        console.log("아이디를 다시 확인해주세요.")

    }

})

function isEmpty(obj) {

    if (Object.keys(obj).length === 0) {

        return true

    } else {

        return false

    }

}

 

일단 로그인을 하기 위해 먼저 회원가입부터 해줍시다!

 

2024.11.25 - [웹 개발 공부하기] - [11.25]회원가입 구현해보기😏

↑ 어제 포스팅 된 글 보면 확인가능!!!

 

자! 회원가입을 했으니 로그인을 해볼까!!!

userId와 password 로만 로그인을 하니까 회원가입 시 적었던 id, pwd 그대로 쳐서 Send !!

 

음.. 잘되었군 :)

 

그럼 아이디 또는 비밀번호가 틀렸을 경우엔 어떻게 뜨나요?🧐

 

사실 보통의 홈페이지들은 '아이디 또는 비밀번호가 틀렸습니다.' 라고 말을 해서

이걸로 코드를 바꿔서 해볼까.. 했는데

정보유출의 위험이 있어서 저렇게 표시하는 건 알겠지만 막상 사용자 입장에선 굉장히 불편했었다 ㅠ

아이디가 틀린거야 비밀번호가 틀린거야! 말을 해봐!!!! 라는 느낌이랄까....

그래서 그냥 아이디, 비밀번호 각각의 결과를 따로 보여주게끔 코드를 그대로 사용했다.

 

 

userId 는 동일하고, password만 다를 땐?

 

그럼 userId가 틀렸을 땐???

 

여기서 약간 생각이 바뀌었다.

아이디가 동일합니다! 는 빠졌으면 좋겠다는 거다...

 

아이디만 틀렸을 때 => 아이디를 다시 확인해주세요

비밀번호만 틀렸을 때 => 비밀번호를 다시 확인해주세요

아이디, 비밀번호가 맞았을 때 => 로그인이 되었습니다.

 

라고 떴으면 좋겠다는거지!! 😲😲

 

그래서 콘솔을 좀 바꿔보았다.

app.post('/login', (req, res) => {

    console.log(req.body) // userId, pwd

    // userId가 DB에 저장된 회원인 지 확인해야함

    const { userId, password } = req.body  // req.body에 전달된 userId, password 꺼내기

    var loginUser = {} // 전역변수 + 아무리 텅텅 빈 중괄호여도 값이 있는 걸로 봄

    db.forEach(function(user, id){ // value : user / index : id

        if ( user.userId === userId ) { // forEach돌면서 db의 객체 하나꺼내서 user의 userId가 내가 req.body 통해서 받은 userId랑 같니?

            loginUser = user

        }

    })

    if(!isEmpty(loginUser)) {

        // pwd도 맞는 지 비교

        if (loginUser.password === password) { //user의 password가 내가 req.body 통해서 받은 password랑 같니?

            console.log("로그인이 되었습니다.")

        } else {

            console.log("비밀번호를 다시 확인해주세요")

        }

    }else{

        console.log("아이디를 다시 확인해주세요.")

    }

})

function isEmpty(obj) {

    if (Object.keys(obj).length === 0) {

        return true

    } else {

        return false

    }

}

결과물은 아주 만족이다!!!

 

오늘은 로그인 부분만 해보았다!
완전 만족 대만족 ㅎㅎ
사실 하면서 중간중간 이해가 안 간 부분이 꽤나 많았는데
실제로 콘솔창에 띄워보고 POSTMAN으로 해보고나니 확 이해가 갔다.
역시 개발의 기초는 콘솔이라더니... 콘솔로 항상 데이터값을 확인해보는 버릇을 들여야할 것 같다.
어제 오늘 한 회원가입 및 로그인 조회 삭제 기능은 혼자서도 만들어 볼 예정이다.
오늘까지 배운 걸로 현재 준비하고 있는 미니프로젝트에도 사용할 수 있을 것 같다.
미니프로젝트 하면서 오류가 이상하게 난 부분이 있었는데,
같은 팀원들이 이리저리 검색도 해봐주시고 같이 고쳐나가주셔서 다행히 고쳤다 ㅠㅠ..
에러 때문에 진도를 못 나간 미니프로젝트도 얼른 마무리를 해봐야겠당!