본문 바로가기
카테고리 없음

중복 아이디 확인 체크 기능 낱낱이 파헤쳐 보자!

코딩비쿠 2024. 6. 30. 13:01

아이디 중복 체크 원리 sumnail

 

 

회원가입을 하려다보면, 이미 있는 ID에대해서 중복된 아이디라고 가입이 안되는 게 당연하다고 생각하고 살아왔는데... 막상 내가 해당 기능을 구현할려니까 뭐 어떻게 해야하는지 1도 감이 잡히지 않는다 시불..

 

알코올로 인한 가속 감가로 잔존가치도 남지 않은 뇌를 부여잡고 연구에 연구..하니! 당연히 기능 구현이 될리가 없다 미개한 닝겐 그저 챗GPT님의 명령과 지시에 따를 뿐..

 

시간없으니, 바로 예제와 함께 아이디 중복 체크 원리를 하나하나 살펴보도록 하자!

 

MVC 구조로 맞춰서 구현해 놓았으니, MVC구조가 아직 뭔지 모르는 상급 코린이는 해당 주소로 MVC구조가 뭔지 살펴보고 오는 걸 추천 한다. 

https://codingbigkoooo.tistory.com/entry/MVC-%EA%B5%AC%EC%A1%B0%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

 

먼저 회원가입을 랜더링해줄 ejs 코드부터 가볍게 살펴보자

<body>
    <h1>회원가입</h1>
    <form name="form_register">
      <label for="userid">ID</label>
      <input id="userid" type="text" name="userid" required /><br />
      <label for="password">Password</label>
      <input id="password" type="password" name="pw" required /><br />
      <label for="nickname">Name </label>
      <input id="nickname" type="text" name="name" required /><br />
      <button type="button" onclick="register();">Register</button>
    </form>
 
    <a href="/user/signin">Login</a>

    <script>
 
       
     function register() {
        const form = document.forms['form_register'];

        axios({
          method: 'POST',
          url: '/user/signup',
          data:{
            userid: form.userid.value,
            pw: form.password.value,
            name: form.nickname.value
          }
        }).then((res)=>{
          console.log(res);
          // 입력창 초기화
          editCancel();
        }).catch((error) => {
        console.error('Error:', error);
        if (error.response && error.response.data) {
          alert(error.response.data.message);
        }
      });
    }
     
    </script>
  </body>

 

axios POST 방식으로 userid, password, nickname 창에 해당 value 값을 넣으면, data에 담아서 /user/signup주소의 URL로 전송해 놓게 설정을 해놓았다.

 

자 회원 가입 버튼을 클릭해서   "register()"함수를 실행하면, Controll에 있는 서버측으로 req.body에 해당 정보가 담겨서 들어온다. (post 방식은 정보가 통상 body측에 담겨서 날라온다.)

exports.postsignUp = (req, res) => {
    User.postsignUp(req.body, (result, error) => {

        if(error) {
            return res.status(400).send({ message : error });
        }

        res.send({
            id: result,
            userid: req.body.userid,
            name: req.body.name,
            pw: req.body.pw
        });
    });
};

 

이렇게 Controll에서 해당 정보를 받고 "exports.postsignUp = (req, res) => { " 함수를 실행하면서

"User.postsignUp(req.body, (result, error) => { " Model측으로 req.body 정보를 넘겨 준다.

 

exports.postsignUp = (data, callback) => {

    //중복 아이디 확인 쿼리
    const checkQuery = `SELECT * FROM user WHERE userid = ? `
    conn.query(checkQuery, [data.userid], (err, rows) => {
        if (err) {
            throw err;
        }

        if(rows.length > 0) {
            callback(null, 'User ID already exists');
        } else{
            const insertQuery = `INSERT INTO user (userid, name, pw) VALUES (?, ?, ?)`;
            const values = [data.userid, data.name, data.pw];

            conn.query(insertQuery, values, (err, rows) => {
                if(err){
                    throw err;
                }

                console.log('model/User.js>>', rows);
                callback(rows.insertId, null)
            });
        }
    });
};

 

" exports.postsignUp = (data, callback)" Controll에서  req.body(userid, name, pw) 정보를 data 인자로넘겨 받아 postsignUp 함수(함수 이름 같은건 언제든 너님 편하신 걸로 정하면 된다)를 실행한다. 

 

    const checkQuery = `SELECT * FROM user WHERE userid = ? `

여기서 checkQuery는 데이터 베이스에 userid = ?, 이 "?" 에 바인딩 될 userid와 같은 uesrid가 있는지 DataBase에 있는 user라는 테이블에서 *, 즉 전부 컴토를 해보겠다는 말이다. 여기서 *는 전부를 의미한다고 생각하면 된다.

 conn.query(checkQuery, [data.userid], (err, rows) => {

conn.query는 간단하게 DataBase가 있는 SQL를 실행하기 위한 문법이라고 생각해면 된다.

위 checkQuery를 실행하고 아까 "?"에 data.userid(즉, 사용자가 넣은 아이디)를 바인딩 시켜서 user테이블 전체에 같은게 있는지 찾아보라는 말이고 결과 값으로는 err(에러) 또는 rows(같은 아이디를 발견했을때 나오는 행값)을 반환 하겠다는 말이다.

        if (err) {
            throw err;
        }

 그래서 에러가 나면 에러를 내뱉고,

if(rows.length > 0) {
            callback(null, 'User ID already exists');

여기가 중요하다! rows.length>0값이라면 중복값이 존재하는 거고, 그러면 null값을 주면서 error인자 값에 "User ID already exists"를 담아 보내라는 소리다.

 

rows.length>0값이라면 중복값이 존재라는게 무슨 말일까? SQL을 살펴보면 알 수 있다.

user라는 테이블이 다음과 같은 테이터로 되어 있다고 가정하자.

User테이블 예제1

 

근데 내가 여기서 exampleUser라는 아이디를 회원 가입창에 입력했으면, 

`SELECT * FROM user WHERE userid = exampleUser `

해당 쿼리 실행문에서의 결과 값은 

User테이블 예제2

이렇게 rows 변수의 배열 형태로 나온다. 그러면 이 rows의 길이(length) 값은 1이다. 행이 1개 나왔기 때문이다. 따라서 row.length 는 1이 되고 0보다 크게 되는 것이다. 즉 rows.length>0값이라면 중복값이 존재한다는 말이 되는 것이다.

 

즉 다시 코드로 돌아와서 

 if(rows.length > 0) {
            callback(null, 'User ID already exists');
        } else{
            const insertQuery = `INSERT INTO user (userid, name, pw) VALUES (?, ?, ?)`;
            const values = [data.userid, data.name, data.pw];

            conn.query(insertQuery, values, (err, rows) => {
                if(err){
                    throw err;
                }

                console.log('model/User.js>>', rows);
                callback(rows.insertId, null)
            });
        }

 

중복값이 있으면 첫번째 인자 result에 null 값을 넣고 두번째 인자인 error에는 

"User ID already exists"를 담아 보내라는 소리다.

 

그리고 만약 중복값이 없다면 

data.userid(사용자가 쓴 아이디), data.name(사용자가 쓴 이름), data.pw(사용자가 쓴 비밀번호)를 

insert into user 즉, user라는 테이블에 집어 넣으라는 말이다.

 

그리고 태초에 controll에 있던 postsignUp의 user. postsignUp 의 콜백 함수의 인자 값으로

exports.postsignUp = (req, res) => {
    User.postsignUp(req.body, (result, error) => {

 

첫번째 result인자 값에는 "rows.insertId(몇번째 행인지, 행의 값) " 을 넣어주고 두번째 error인자에는 error가 없으니 null(없음) 값을 집어 넣으라는 소리이다. 

 

그러면 해당 함수가 끝나고 다 controll로 돌아와서

exports.postsignUp = (req, res) => {
    User.postsignUp(req.body, (result, error) => {

        if(error) {
            return res.status(400).send({ message : error });
        }

        res.send({
            id: result,
            userid: req.body.userid,
            name: req.body.name,
            pw: req.body.pw
        });
    });
};

 

rows.length>0값이라면 중복값이 존재하면, 첫번째 result인자 값에 null(없음)을 주면서 error인자 값에 "User ID already exists"를 담아 보냈을 꺼고 그러면 클라이언트(view) 쪽으로 "return res.status(400).send({ message : error });"

status 400에러 상태와 함께 아까 적었던 "User ID already exists" 메세지가 사용자에게 보여질 거다.

 

그리고 중복값이 없다면 성공값으로 result에는 row.insertid가 담기고 error에는 null(없음)값이 담겨

res.send로 클라이언트 응답 값으로

몇번째 행에 아이디와 이름 그리고 패스워드가 어떻게 되는지가 담겨 나가는 거다.

 

 

와씨 소오오름. 진짜 이거 적으면서 이렇게 이해가 잘 갈 수 없다고 생각했다. 챗CPT한테 물어봐도 뜬그름 잡는 소리만 하지 이렇게 알기 쉽게 이야기 해주지 않는다.

 

혹.. 보고도 이해가 안가면 해당 글을 두번 세번 정독하기를 추천한다. 아마 이보다 자세하게 코드 한줄한줄 원리를 설명한 블로그는 없으리라, 딴데가도 의미가 없을 듯 하다.

 

 

여튼 오늘도 코딩 공부하느라 고생했고, 젊음은 짧다. 행복은 방구석 컴퓨터 안에 있는게 아니니

나가서 친구들이랑 한잔하도록 

 

By2 ~

저작자표시 비영리 변경금지

티스토리툴바