Foundation Test를 위한, [회원가입] - 아이디 패스워드 중복 확인

최종 '회원가입' '로그인' 코드 ** (코드 완성하면 다시 복붙, 수정)

---

회원가입을 해보자

 

일반적으로 생각해보면

일단, 이미 회원가입한 사람은 회원가입할 수 없다. 

 

그렇다면 이미 회원가입했는지 어떻게 알까?

 

가입하려는 아이디 패스워드를 우리가 데이터베이스(DB)에 있는지 보면 된다. 

 

 

어떻게 볼까? 

 

비교해보는 것이다. 

 

바로 중복! 

 

중복확인을 해보자. 

 

 

컴퓨터는 한번에 하나밖에 할 수 없으니, 

아이디/이메일부터 중복 확인 후 

패스워드 중복 확인을 하고 

 

이 두개가 모두 없으면 회원가입을 할 수 있다!

---

[회원가입 흐름]

시작은 user 

→ user가 email, password에 준다 

→ front 가 화면에 띄움

→ front 가 B에 request 준다 (F -> B)

→ B: user data 받아서 생성 

→ B: database (DB) 저장 =  추가 (mysql로 보면,  user table에 한줄 추가되는 것)

( B: 1 rows changed 뜰 것)

→ B-> F 에 보내는 response 에 아래 3개가 담긴다

1. Status code: 200, 201
2. message: userCreated
3. error 

 

** F는 프론트엔드 / B는 백엔드이다

 

F는 중복 아이디를 알 수 없다 (pw 길이 정도는 알 수 있음 (JS 이용)) 

→ F는 request 보냄

→ B는 받고 곧바로 중복인지 알 수 없음

   중복일 때 고객에게 alert 띄어줘야하는데..

 

B는 중복인지 알 수 없는데, 어떻게 알까?

• DB랑 비교해봐야 안다

 

비교하는 방법은?

1. DB 열어서 확인 (근데 불가능. 가입할 때마다 못함)
2. 이거를 이제 할 것 (sql문 쓰는 것)

 

중복가입인지 확인하는 방법

B가 userdata 받아오면, 갖고 있는 DB와 확인! 

 

1. f 중복된 거 있으면, F에 error를 response 로 보냄. 끝! 

(성공 or error 둘중 하나의 메세지만 보냄…. ‘성공인데 애매해' ‘성공인데 반은 나중에할께' 이런 거 없음) 

 

2. If 없으면, 다음 과정 진행 —-> 가입

백엔드가 user data 받아와서 먼저 해야하는 거! 

1. 프론트가 키를 다 잘 줬는지! 

const {name, password, email} = me                 //me는 변수 , {    } 안은 key // 여기 안에 user정보 담겨 있음

 

3개 키 다 들어왔는지 (name, password, email)  

하나라도 없으면 throw                                     // 프론트엔드, 다시 제대로 줘! 

 

2. 이메일 중복 이미 가입한 케이스 

2-1. 유저가 입력한 email 인 ‘shlee@wecode.co.kr’이 이미 DB에 있는지 확인 

 

const existingUser = await myDataSource.query(‘SELECT id, 

email FROM users WHERE email=’${email}’

 

console.log(‘existing user:’ , existingUser)                      // ${email} email 이라는 변수  ; 매번 email 적을 수 없으니 

 

2-2. If  yes,  = 중복 = 아래 if문       중복 있으면 객체로 온다 

if(중복이면), { const error = new Error(“Duplicated_EMAIL_ADDRESS”)

error.statusCode= 400

throw error}                                  // 중복이면, 에러 , 끝 

 

 mysql 로 table 나옴  (select가 sql문이기 때문에)

 

2-3.    If no,        중복 없으면 배열로 나온다  

console 찍었을 때, select문 vscode에서는 중복이 없으면 빈 배열 [ ] 나옴. 

(배열 나오는 이유: select문은 데이터 여러 개 가져오기에, 객체 없으면 배열) 

 

// const {name, password, email} = me  → 여기에서 userdata가져옴

 

mysql > use westagram

          >  show tables;  

          > select id, email From users;         를 하면, 모든 테이블이 나오고

 

전체 중에서 하나만 알고 싶으면 

         mysql> select id, email From users WHERE email = ‘shlee@wecode.co.kr’; 

// 객체안의 id:1 id:3은 mysql 테이블의 id

// typeORM의 O는 object 객체 (객체에 넣어서 javascript로 관리) 

// existingUser[0] 은 첫번째 객체 

// .email dotnotation

 

여기서부터 회원가입 / post만 하고 (프론트가 백엔드에게 Post 하는 것)

app.post("/users", async (req, res) => {

// postman에 http://localhost:8000/users 치는거) 8000는 아래 server 번호 참고 -> postman에 send 후에 터미널에서 확인 (프론트가 예상할 수 있게, usersignup으로 하기도-)

try {

// 1. user 정보를 frontend로부터 받는다. (프론트가 사용자 정보를 가지고, 요청을 보낸다)

const me = req.body;

console.log(me);

// 3단계. DATABASE 정보 저장.

// const name = me.name // 다나

// const password = me.password // 비밀번호

// const email = me.email // email

const { password, email } = me; //구조분해할당 (위랑 같은 거)

// const password = req.body.password

// email, password가 다 입력되지 않은 경우

if (email === undefined || password === undefined) {

// ||는 or , 반대는 &&

const error = new Error("KEY_ERROR");

error.statusCode = 400;

throw error;

}

// 이메일이 중복되어 이미 가입한 경우

// 1. 유저가 입력한 Email인 'shlee@wecode.co.kr'이 이미 우리 DB에 있는지 확인한다.

// mysql에서 use westasgram, show tables, select id, email From users where email='shlee@wecode.co.kr';

const existingUser = await myDataSource.query(`

SELECT id, email FROM users WHERE email='${email}';

`);

console.log("existing user:", existingUser); // existinguser:로 찍어봐라, 쿼리문으로 가져온 이메일로 한번 보자

// 2. 있으면, 즉, 이메일 중복이면 아래 if문 실행

if (existingUser.length > 0) {

// existing user 이용해서 판별`

const error = new Error("DUPLICATED_EMAIL_ADDRESS");

error.statusCode = 400;

throw error;

}

//3. (회원가입 시 패스워드 겹칠 수 있으니) 패스워드 중복 검사 안함

/* if ( ) {

const error = new Error("DUPLICATED_PASSWORD")

error.statusCode=400

throw error

} //if문은 if여러개 있어면 하나씩 확인하고 걸리면 throw 만나니까 catch 로 가고, 한개도 if에 해당 안 되면 바로 return status 200으로 가고 catch는 패스

*/

// 비밀번호가 너무 짧을 때

if (password.length < 8) {

const error = new Error("INVALID_PASSWORD");

error.statusCode = 400;

throw error;

}

/*// 비밀번호에 특수문자 없을 때

const regExp = /^[a-z0-9_]{4,20}$/;

if (regExp) {

const error = new Error("");

error.statusCode = 400;

throw error;

}*/

//instert로 회원정보를 DB에 저장해라 (백엔드에는 저장되어 있음)

const userData = await myDataSource.query(`

INSERT INTO users (

name,

password,

email

)

VALUES (

'yj',

'${password}',

'${email}'

)

`);

// 회원가입 성공 // 성공 메세지를 프론트에게 보내라

return res.status(201).json({

//위의 try 함수에 대한 return // 되면 postman에 메세지 나옴

message: "userCreated", // 여기까지 내려왔다는 건, 오류가 없다는 것, 그러니까 회원가입,유저 생성 된 거// 위에 try안에 오류가 생길 수도 있다고 한 게 없다는 거

});

} catch (error) {

//try안에 예상되는 오류 사항 적고, if 옆의 중괄호 로 가고, 중괄호 안에 const, throw 있고, throwㄹ error로 던졌으니 , return 무시하고 다로 error로 간다

console.log(error);

return res.status(error.statusCode).json({

//만약 에러가 나면 에러 났다고 'error.message' 프론트에게 보내고, 위에는 구체적 오류 메세지// 크게 보면 구조가 try, 여기 return!

message: error.message,

});

}

});