[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ํšŒ์› ๊ด€๋ จ : ํšŒ์›๊ฐ€์ž…

2022. 3. 31. 07:59ใ†Programming Project ์ž‘์—…์‹ค/๋‚ด์šฉ ์ •๋ฆฌ

728x90
๋ฐ˜์‘ํ˜•

 

 

๐Ÿง‘๐Ÿป‍๐Ÿ’ป 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 ํ•ด ๋ณผ ๊ฒƒ์ด์—์š”. 

 

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•