[FrontEnd][Vue-PJ] 개발자 커뮤니티 회원 관련 : 회원가입

 

 

🧑🏻‍💻 Git Hub 주소

 

 

 

🗂 목차

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제

 

👨‍👩‍👧‍👦 회원 관련

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 회원 관련 : 회원 가입

 

- 부 록 -

[Vue.js] axios 설치

[FrontEnd] html Tag 정리

[CSS] CSS 정리

[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Paging 처리

[Vue.js] 기초 개념 정리 - Vue Router

 

 

 

 

 

 

🚀 회원 관련 - 회원 가입

    🔽  화면

main

 

 

회원 가입

 

 

    🔽  Code 분석

SignUp.vue - 31 ~ 54

중요하다고 생각되는 부분에 대해서 Code 분석을 해 보도록 하겠습니다!
회원 가입은 Validation과 중복 확인 등 생각보다 많은 기능이 필요한 것이에요.

최초 38번째 줄에 v-model로 해당 객체 안에 있는 변수에 ID가 저장 되도록 한 것이에요.

 

SignUp.vue - 422 ~ 434

위와 같이 아무 입력값 없는 변수로 초기화를 해 주었습니다.

그리고 나서 `@blur`을 통해 `idHelthChek()`를 호출하게 해 준 것이에요.

 

💡 여기서 잠깐!
@focus, @blur란 무엇일까?

@focus
● 이용자가 해당 Tag의 Click(포커싱) 했을 때, 실행.
● `@focus = **`으로 실행.

@blur
● 이용자가 해당 Tag의 Click(포커싱)을 잃었을 때, 실행.
● `@blure = **`으로 실행.

 

즉, 주니하랑은 ID에 어떤 값이 입력되었을 때, 제대로 입력 되었는지를 표시하기 위해 `@blur`를 이용한 것이에요.

그럼 idHelthCheck()를 만나러 가봐야 겠어요! 🏃

idHelthCheck() {

  if (this.inputParam.username === undefined || this.inputParam.username === '' || this.inputParam.username === null) {

    console.log("ID가 입력되지 않았습니다!")

    this.isIDNullCheck = true;
    this.isIDSpaceCheck = false;
    this.isIDKOREANCheck = false;
    this.isIDSpecialCheck = false;
    this.isIDGoodCheck = false;
    this.isIDDupplicateCheck = false;

    this.$refs.username.focus();

    return false;

  } else if (this.inputParam.username.replace(this.spaceCharacters, '') === "") {
    console.log("ID에 공백 문자가 있습니다!")

    this.isIDSpaceCheck = true;
    this.isIDNullCheck = false;
    this.isIDKOREANCheck = false;
    this.isIDSpecialCheck = false;
    this.isIDGoodCheck = false;
    this.isIDDupplicateCheck = false;

    this.$refs.username.focus();

    return false;

  } else if (this.charKOREAN.exec(this.inputParam.username) !== null) {

    this.isIDKOREANCheck = true;
    this.isIDNullCheck = false;
    this.isIDSpaceCheck = false;
    this.isIDSpecialCheck = false;
    this.isIDGoodCheck = false;
    this.isIDDupplicateCheck = false;

    this.$refs.username.focus();

    return false;

  } else if (this.specialCharacters.exec(this.inputParam.username) !== null) {

    this.isIDSpecialCheck = true;
    this.isIDKOREANCheck = false;
    this.isIDNullCheck = false;
    this.isIDSpaceCheck = false;
    this.isIDGoodCheck = false;
    this.isIDDupplicateCheck = false;

  } else {

      this.isIDKOREANCheck = false;
      this.isIDNullCheck = false;
      this.isIDSpaceCheck = false;
      this.isIDSpecialCheck = false;
      this.isIDDupplicateCheck = false;
      this.isIDGoodCheck = true;

      return true;

  }// if (this.inputParam.userId.replace(pattern, '') === "") 끝
}, // idSpaceCheck() 끝

이 Method가 실행되면 if문을 통해 유효성 검사를 실시하는 것이에요.

 

signUp.vue - idHelthCheck() : 509 ~ 522

이 if문에서는 `InputParam` 객체 안에 `username` 변수에 값이 비어있는지를 검사하는 것이에요.

비어 있다면 if문 안드로 들어오게 될 것이고, 최초 Console에 ID가 입력되지 않았다고 출력해 줄 것이에요.

그런 뒤 isIDNullCheck(ID가 Null인지 확인하는 변수)라는 변수를 `true`로 만들고,
isIDSpaceCheck(ID에 공백이 입력되었는지 확인하는 변수),
isIDKOREANCheck(ID에 한글이 입력 되었는지 확인하는 변수),
isIDSpecialCheck(ID에 특수문자가 입력되었는지 확인하는 변수),
isIDGoodCheck(ID 공백, 미 입력, 한글 미 입력, 특수 문자 미 입력 검사가 완료 되었을 때 이용될 변수),
isIDDupplicateCheck(ID 유효성 검사가 완료 되었는지 확인하는 변수)를 모두 false로 만들어 주는 것이에요.

위에 변수 isIDNullCheck가 `true`가 되면 어떤 일이 발생할까요? 

 

SignUp.vue - 40 ~ 52

바로 여기 44번째 줄에 `v-show`가 동작하면서 ID 입력란 옆에 ID를 입력 해 주세요! 라는 글귀가 보이게 될 것이에요.

 

 

바로 이렇게 말이에요!

 

 

signUp.vue - idHelthCheck() : 524 ~ 536

만약 ID 입력란에 공백이 입력 되었다고 하면 이 If문이 작동하게 될 것이에요.

signUp.vue - data() : 430 ~ 432

if문 안에 보면 `InputParam` 객체 안에 `username` 변수안에 값을 `replace()`를 통해서 첫번째 매개변수에 값을 두번째 매개변수 값으로 바꿔주고, 그것이 입력이 되지 않은 것과 같다면?을 검사하는 것이에요.

즉, `sapceCharacters` 객체에는 공백(Space)를 표현하는 정규 표현식이 들어 있는데, 이 값이 `InputParam` 객체 안에 `username` 변수안에 있다면 그것을 `''` 즉, 아무것도 입력되지 않은 값으로 바꿔버리고, 그걸 아무것도 입력되지 않았는지와 같냐고 물어봐서 맞으면 이 if문이 실행되게 한 것이에요.

if문 안에 들어오면 최초 ID에 공백 문자가 있다고 Console에 출력을 하고, 

isIdSpaceCheck(ID에 공백이 입력되었는지 확인하는 변수)를 `true`로 바꿔준 뒤 나머지 변수는 모두 `false`로 바꿔주는 것이에요.

 

SignUp.vue - 40 ~ 52

그럼 다시 이 곳에서 42번째 줄에 `v-show`가 동작하면서 공백을 입력할 수 없습니다!를 출력하게 될 것이에요.

 

 

바로 이렇게요!

 

signUp.vue - idHelthCheck() : 538 ~ 549

그 다음에는 ID에 한글이 입력되었는지를 확인하는 if문이 기다리고 있는 것이에요.

 

signUp.vue - data() : 430 ~ 432

이번에는 `charKOREAN`을 주목해야 하는 것이에요. 이 곳에는 한글에 해당하는 정규 표현식이 들어 있는데,

idHelthCheck 538번째 줄에서 이 변수안에 값에서 `패턴 객체가 존재하는 값을 리턴 (추출)`하여 `InputParam` 객체 안에 `username` 변수안에 값이 Null이 아니라면? 즉, 비어있지 않다면?을 확인하는 것이에요.

if문에 들어오게 되면 isIDKOREANCheck(ID에 한글이 입력 되었는지 확인하는 변수) 변수를 `true`로 바꾸고, 547번째 줄에 의거해서 ID 입력란이 표시가 되면서 다른 곳은 입력이 되지 않게 해 주는 것이에요.

 

SignUp.vue - 40 ~ 52

그럼 이 곳 46번째 줄에 `v-show`로 인해서 한글은 입력할 수 없습니다!가 출력될 것이에요.

 

 

바로 이렇게요!

 

signUp.vue - idHelthCheck() : 560 ~ 571

이용자가 입력한 ID가 개발자의 의도대로 잘 입력이 되었다면 If문에 걸리지 않고, 여기 else 문 안으로 들어오게 될 것이에요. 그럼 IsIDGoodCheck(ID 공백, 미 입력, 한글 미 입력, 특수 문자 미 입력 검사가 완료 되었을 때 이용될 변수)변수만 `true`로 바꿔주고, 나머지 변수는 모두 `false`로 바꿔주는 것이에요.

 

💡여기서 잠깐!

위 isIDDupplicateCheck(ID 유효성 검사가 완료 되었는지 확인하는 변수)는 왜? `false`로 계속 만들어 줄까?
위의 변수는 ID 중복 확인 Button을 눌러 Back End에서 중복 ID가 있는지 검사를 하고, 중복된 값이 없을 경우 `true`를 만들어 준다.
위에 유효성 검사에서 `true`가 되어 버리면 중복 검사 자체가 무의미 해지기 때문에 계속 `false`로 해 주는 것이다.

 

 

SignUp.vue - 40 ~ 52

그럼 이 곳 50번째 줄에 `v-show`로 인해서 정상 입니다! 중복 확인을 해 주세요!가 출력될 것이에요.

 

 

바로 이렇게요!

 

그럼 만약 유효성 검사를 실패 했을 때, 중복 확인 Button을 누르면 어떻게 될까요?

 

바로 이렇게 `Modal` 창이 뜨면서 중복 확인 자체가 되지 않도록 처리한 것이에요.

 

SignUp.vue - 40 ~ 52

 

그럼 중복 확인 Button이 어떻게 동작하는지 알아 볼 것이에요.

40번째 줄에 중복 확인 Button에 Click Event가 발생하게 되면 `idCheck()`가 호출 되는 것이에요.

그럼 얼른 `idCheck()`를 만나러 가봐야 겠어요! 🏃

idCheck() {

  console.log("입력된 이용자가 이용하고자 하는 ID 값 : " + this.inputParam.username);

  if (this.isIDKOREANCheck) {
    this.showKOREAN = true;

    this.$refs.username.focus();

    return false;
  } else if (this.isIDNullCheck) {
    this.nullShow = true;

    this.$refs.username.focus();

    return false;
  } else if (this.isIDSpaceCheck){
    this.spaceShow = true;

    this.$refs.username.focus();

    return false;
  } else if (this.isIDSpecialCheck) {
    this.spacialShow = true;

    this.$refs.username.focus();

    return false;
  } // validation if 끝

  duplicateUserIdCheck(this.inputParam).then(response => {

    console.log("ID 중복 요청 보낸 뒤 Back End에서 돌아온 응답을 확인 합니다! HTTP STATUS CODE 값 : " + response.data.statusCode);
    console.log("HTTP STATUS CODE 값 : " + response.data.statusCode);
    console.log("DATA 값 : " + response.data.data);
    console.log("한글 응답 값 : " + response.data.messageKo);
    console.log("영어 응답 값 : " + response.data.messageEn);

    if (response.data.statusCode === 409 || response.data.messageEn === "conflict") {
      console.log("이미 등록된 ID 입니다!");

      this.$refs.username.focus();

      this.equalShow = true;
      this.checkShow = false;

      // 최종 '회원 가입' 버튼을 눌렀을 때, 중복 체크를 안하면 가입을 못하게 막기 위한 변수를 false로 바꿔 회원 가입이 안 되게 한다.
      this.isIDDupplicateCheck = false;

      return false;

    } else {
      console.log("이용 가능한 ID 입니다!")

      this.checkShow = true;
      this.equalShow = false;

      // 최종 '회원 가입' 버튼을 눌렀을 때, 중복 체크를 안하면 가입을 못하게 막기 위한 변수를 true로 바꿔 회원 가입이 되게 한다.
      this.isIDDupplicateCheck = true;

      // 중복 확인이 완료된 뒤 '중복 확인' 해달라는 문구를 지우기 위해 false로 변경
      this.isIDGoodCheck = false;

      return true;
    } // if (response.data.statusCode === 409 || response.data.messageEn === "conflict") - else 끝
  })
}, // idCheck() 끝

반응형

`idCheck()`도 참 길게 구현이 되어 있는 것이에요.

그럼 또 하나하나 분석 해 볼게요!

SignUp.vue - idCheck() : 439 ~ 448

최초 `idCheck()`가 호출되면 이용자가 ID 입력란에 어떤 값을 넣었는지 console에 출력하고, 443번째 줄에 if문을 만나는데, 입력값에 `한글`이 입력 되었는지 확인 하는 것이에요.

한글이 입력 되었다면 `showKOREAN` 변수가 `true`로 바뀌게 되는데, 그럼 어떤일이 일어날까요?

SignUp.vue - data() : 398 ~ 410

 

 

SignUp.vue - 227 ~ 240

바로 이 곳 `Modal` 창이 뜰 수 있도록 하기 위해서 해당 변수를 사용한 것이에요.

228번째 줄에 `v-show`의 변수인 `showKOREAN`이 `true` 값이 되면 이 `Modal` 창은 `v-show`로 인해 보이게 되는 것이에요.

`Modal`창에는 '한글을 입력할 수 없습니다!'라는 내용에 글이 보이면서 뜨게 되는 것이에요. 한번 볼까요?

 

 

바로 이렇게요!

 

SignUp.vue - idCheck() : 439 ~ 448

다시 이곳으로 돌아와서 446번째 줄의 `$refs.user.name.focus()`로 인해 ID 입력칸이 표시가 되게 되고, 다른 곳을 선택해도 어떤 값을 넣을수도 없는 상태로 바뀌게 되는 것이에요.

 

 

그럼 이 상태에서 '확인' 버튼을 누른다면 어떤일이 일어나게 될까요?

 

 

SignUp.vue - 227 ~ 240

237번째 줄에 '확인' Button이 있는 것이에요. 여기 `@click`으로 인해 Click Event가 발생하게되면 `showKOREAN` 변수가 `false`로 바뀌게 되고, 228번째 줄에 `v-show`는 `true`일 때만 동작하기 때문에 마치 `Modal` 창이 사라지는 것처럼 보이게 되는 것이에요.

 

바로 이렇게요!

 

SignUp.vue - idCheck() : 450 ~ 467

주니하랑은 null 확인(449 ~ 454), 공백 확인(455 ~ 460), 특수 문자 입력 확인(461 ~ 466)을 동일하게 만들어 해당 If문에 진입하게 되면 해당 내용에 대응되는 `Modal` 창이 뜨도록 만들어 준 것이에요.

여기서 우리가 주목해야 될 것은 그 어디에도 `Axios`를 이용해서 Back End에 `Request`를 던지는 곳이 없다는 점이에요.

위와 같은 유효성 검사에 걸리게 되면 절대로 Back End에 `Request`를 던지지 못하게 구현을 해 놓은 것이에요.

 

 

SignUp.vue - idCheck() : 469 ~ 505

유효성 검사를 모두 통과한 ID 입력값은 본격적으로 `Axois`를 통해 해당 ID가 `Data Base`에 존재하는지 검사할 수 있는 Logic을 탈 수 있는 것이에요.

 

SignUp.vue - 368 ~ 375

먼저 주니하랑은 이 곳에 `Axios`를 이용하기 위해 따로 정의해 둔 `Java Script` File에 Method들을 정의 해 놓고, 이렇게 `import`해서 이용할 수 있게 해 둔 것이에요. 

 

469번째 줄 `duplicateUserIdCheck()`가 호출이 되면 아래 Method가 호출 되는 것이에요.

 

user.js - 1 ~ 12

3번째 줄에 `duplicateUserIDCheck()`에는 이용자가 회원 가입을 위해 입력하는 모든 내용이 들어 있는 `inputParam` 객체를 매개 변수로 받는 것이에요.

 

inputParam 객체(Object)

 

user.js에 8번째줄에 정의된 URI를 통해 Back End에 해당 `Controller` Method가 동작하게 될 것이고, `HTTP Method`는 `POST`로 하여 이용자가 입력한 값을 `요청(Request)`로 던지게 될 것이에요.

 

 

SignUp.vue - idCheck() : 469 ~ 505

그럼 다시 이 곳으로 돌아와서 Back End에서 돌아온 `응답(Response)`값은 `response`에 담기게 되고, 해당 Method의 Body 부가 동작되게 되는 것이에요.

최초 주니하랑은 `응답(Response)`로 들어온 값들을 모두 출력해 주었고,

 

💡 여기서 잠깐!
주니하랑이 `SignUp.vue - idCheck() 471 ~ 475`처럼 객체들을 작성하면서 출력하는 이유에 대해서는 `이 곳`을 확인하시면 아실 수 있도록 준비 해 두었습니다!

 

477번째 줄에 Back End에서 `응답(Response)` 받은 값 중 `statusCode(HTTP Status Code) `의 변수의 값이 `409` 라면 혹은 `messageEn(Status Message English)` 변수의 값이 `conflict`라면 if문이 동작하도록 한 것이에요.

최초 480번째 줄에 의거하여 `$refs.user.name.focus()`로 인해 ID 입력칸이 표시가 되게 되고, 다른 곳을 선택해도 어떤 값을 넣을수도 없는 상태로 바뀌게 되는 것이에요.

그런 다음 `equalShow` 변수의 값을 `true`로 바꾸고, `checkShow` 변수 값을 `false`로 바꿔주는데, 이번에는 또 어떤 행위를 하기 위해 이렇게 했을까요?

 

SignUp.vue - idCheck() : 160 ~ 191

바로 여기 `Modal`창 두개를 Hanling 하기 위해 위와 같이 해 준 것이에요.

최초 `checkShow`는 `false`로 입력 해 주었기 때문에 위 161 ~ 173번째 줄에 작성한 `Modal`창은 동작하지 않지만, `equalShow`는 `true`로 해주었기 때문에 177 ~ 189번째 줄에 작성한 `Modal`창은 동작하게 되는 것이에요.

바로 177번째 줄에 `v-show`의 변수값 `eqaulShow`가 `true`이닌까 동작하게 되는 것이에요.

 

user Table

현재 `Data Base`에는 이렇게 3개의 이용자 정보가 저장 되어 있는데, Test를 위해 `junyharang`으로 `ID 중복 확인` 을 해 보도록 할 것이에요.

 

ID 중복 확인

 

바로 이렇게 `Data Base`에 존재하는 값이 있으면 이렇게 동작되도록 작성한 것이에요.

 

그럼 `Data Base`에 없는 값을 입력하고, `ID 중복 확인`을 하면 어떻게 동작할까요?

 

SignUp.vue - idCheck() : 469 ~ 505

다시 이 곳으로 돌아와서 490번째 else 문 안에 Logic이 동작하게 될 것이에요.

최초 Console에 '이용 가능한 ID 입니다!'가 출력이 될 것이고, 493, 494번째 줄에 의거해서 `checkShow` 변수는 `ture`가 될 것이고, `equalShow`는 `false`가 될 것이에요.

 

SignUp.vue - idCheck() : 160 ~ 191

그럼 아까와는 반대로 `Modal` 창이 동작하게 될 것이에요.

바로 161 ~ 173번째 줄에 `Modal` 창이 동작하게 될 것이고, '사용한 가능한 값 입니다!'라는 문구를 띄어줄 것이에요.

 

ID 중복 확인

바로 이렇게요!

 

 

SignUp.vue - idCheck() : 469 ~ 505

계속해서 `idCheck()`의 497번째 줄을 분석해 볼 것이에요.

`isDupplicateCheck`를 `true`로 변경 해 주고 있는 것이에요.

이렇게 해 주는 이유는 이용자가 모든 입력값을 입력하고, 중복 체크를 각각 해야 하는 항목들이 있는데, 중복 체크를 안하고, 회원 가입 Button을 누르게 되면 중복 체크를 하라고 유도하기 위해 작성 해 준 것이에요.

이 부분에 대한 상세 내용은 아래 회원 가입 Logic을 분석하면서 작성하도록 할 것이에요.

그 다음 500번째 줄에 `isIDGoodCheck`를 `true`로 변경하는데, 이걸 `true`로 변경하지 않으면

 

SignUp.vue - 37 ~ 54

위의 그림 중 50번째 줄에 `V-show`로 인해서 '정상입니다! 중복 확인을 해 주세요!'가 계속 옆에 빨간 글씨로 출력될 것이기 때문이에요.

 

 

이 외에 주니하랑은 아래 회원 가입 창과 같이 비밀번호, 별명(Nick Name), E-mail 주소, 핸드폰 번호에 대해 유효성 검사를 하고, 중복 값이 있는지 확인하도록 구현한 것이에요. 자세한 내용은 ID에 대한 위의 내용과 크게 다를 것이 없기 때문에 분석은 하지 않고, 궁금하신 분들은 주니하랑의 Git Hub에서 해당 Code를 확인하실 수 있습니다!

 

 

 

 

    🔽  회원 가입 하기

이용자가 모든 입력값을 다 입력하고, 철두철미한 유효성 검사를 모두 통과한 다음 본격적으로 회원 가입 Button을 누르게 되면 어떤일이 발생하게 될까요?

 

SignUp.vue - 154 ~ 158

회원 가입 Button을 누르게 되면 위의 그림에서 157번째 <a> Tag가 동작하게 되는데, `@click`으로 인해 Click Event가 발생되면 `goSignup()`이 호출되게 되는 것이에요.

 

그럼 `goSignup()`을 만나러 가봐야 겠어요! 🏃

 

SignUp.vue - goSignUp() : 821 ~ 858

최초 이 Method가 호출되면 823번째 if문이 동작하게 되는데, ID 입력에 대해 설명한 곳에서 `isDupplicateCheck`를 `true`로 변경한 내용을 이 곳에서 분석 해 보겠다고 한 이유가 바로 여기에 있는 것이에요.

ID, 별명, E-mail 주소, 비밀번호, 핸드폰 번호에 대한 유효성 검사가 하나라도 끝나지 않았다면 해당 변수 중 어떤 것은 `false`를 갖고 있게 되는 것이에요.

그렇다면 `else` 문이 작동 되게 되고, 각 항목이 `false`인 것에 따라 if문이 다시 동작하게 되서 경고창이 뜨면서 중복 체크를 해달라고 하고, 끝나버리는 것이에요.

이용자가 모든 유효성 검사와 중복 체크를 했다면 `else`가 아닌 `if`문에 들어가게 될 것이에요.

825번째 줄에 보면 `Axios`를 이용하기 위한 Method `apiSignUp`을 호출하는 것이에요.

 

user.js - 47 ~ 56

그럼 이 친구가 동작하게 되는데, 이 친구는 매개 변수로 이용 `inputParam` 객체(Object)안에 있는 모든 변수를 전달 받는 것이에요.

 

InputParam Object

 

`inputParam`객체 안에는 이용자가 입력했을 ID, 비밀번호, 별명, E-mail주소, 핸드폰 번호가 들어 있게 되는 것이에요.

 

최초 `apiSignup()`이 동작하게 되면 console에 48, 49번째에 해당하는 내용을 출력 해 주고, `Back End`에 URI에 맞는 `Controller` Method를 호출하여 `HTTP Method`는 `POST`로 `요청(Request)`을 보내는데, 이용자가 입력한 회원 가입 내용을 모두 전달하는 것이에요.

 

SignUp.vue - goSignUp() : 821 ~ 858

다시 이 곳으로 돌아와 `Back End`에게 받은 `응답(Response)`에 대한 Data가 824번째 줄 `response`에 담기게 되고, 825번째 줄에 `응답(Response)` Data 중 `statusCode(HTTP Status Code Number)`값이 무엇인지 Console에 찍어 준 뒤 827번째 줄에 해당 값이 200과 같다면 if문이 동작하게 해 준 것이에요.

최초 해당 If문 안에 들어오게 되면 회원 가입이 정상적으로 완료가 되었고, `Data Base`에 이용자가 입력한 내용들이 저장이 되었기 때문에 `Router`를 이용해서 `Main Page`가 `Re Rendering` 되게 해주어 이용자가 Main Page로 이동한 것처럼 보이게 해 주었고, `응답(Response)` Data 중 `statusCode(HTTP Status Code Number)`값이 200이 아니라면 경고창을 띄워 '회원 가입이 실패 했습니다'를 알려주게 한 것이에요.만약 어떤 `Error`에 발생으로 `catch`문에 들어가게 되면 해당 `Error`를 Console에 찍게 하고, 경고창을 띄워 '회원 가입 실패 하였습니다!'를 알려 주도록 한 것이에요.

 

회원 가입 시도

 

 

회원 가입이 완료된 뒤 Main Page로 이동된 모습

 

 

짜잔! 😃

이렇게 회원 가입이 완료 되었어요!

이제 `Login` 기능이 구현이 되면 회원 가입이 완료되면 Main Page가 아닌 `Login` Page로 이동하게 Refectoring 해 볼 것이에요.