팀프로젝트 유효성 검사

팀프로젝트중 제가 맡은 곳은 유효성 검사 파일을 만드는 것입니다.

처음에 어떻게 할지 몰라 걱정이 많았는데 if문을 사용하면 된다고 하셔서 사용했습니다.

그런데 많은 문자들을 어찌 확인할까 고민중이었는데 마침 튜터님이 오셔서 정규식표현을 사용하면 된다고 말씀하셔서 이것저것 찾아보다 사용하게됬습니다.

 

처음에 따옴표(")가 아닌 / 를 사용하는데 글씨가 빨간색으로 떠서 당황했지만 오류표시는 나지않았기 때문에 사용가능한다는걸 알았습니다. 참고자료에 넣은 것처럼 이외에도 여기저기 찾아본 결과 아래 코드와 같이 사용했습니다.

//영화 검색 유효성 검사
export function movieTitleCheck(find) {
  let scriptTag = /[^가-힣|^a-z|^A-Z|^0-9]/; // 한글,영어대소문자, 숫자가 아니어야하는 값
  let space = /\s/; //공백값
  let escape = /\^/; // 특수문자 ^
  let check = 0;

  if (find.length == 0) {
    //값이 없는 경우
    alert("제목을 입력해주세요");
  } else if (space.test(find) == true) {
    //공백이 있는 경우
    alert("공백은 사용할 수 없습니다.");
  } else if (scriptTag.test(find) == true || escape.test(find) == true) {
    //특수문자가 포함된 경우
    alert("스크립트태그는 들어갈 수 없습니다.");
  } else if (find.length > 20) {
    // 20자 초과한 경우
    alert("20자 이내로 작성해주세요");
  } else {
    check = 1;
  }
  return check;
}

//리뷰 이름 유효성 검사
export function ReviewIdCheck(reviewId) {
  let scriptTag = /[^가-힣|^a-z|^A-Z|^0-9]/; // 한글,영어대소문자, 숫자가 아니어야하는 값
  let space = /\s/; //공백값
  let escape = /\^/; //특수문자 ^
  let check = 0;

  if (reviewId.length == 0) {
    //값이 없는 경우
    alert("아이디를 입력해주세요");
  } else if (space.test(reviewId) == true) {
    //공백이 있는 경우
    alert("공백은 사용할 수 없습니다.");
  } else if (
    scriptTag.test(reviewId) == true ||
    escape.test(reviewId) == true
  ) {
    // 특수문자가 포함된 경우
    alert("아이디에는 스크립트태그를 사용할 수 없습니다.");
  } else if (reviewId.length > 12) {
    //이름 크기가 12자를 초과한 경우
    alert("아이디는 12자리 이하여야 합니다.");
  } else if (reviewId.length < 3) {
    //이름 크기가 3자 미만인 경우
    alert("아이디는 3자리 이상이어야 합니다.");
  } else {
    check = 1;
  }
  return check;
}

//리뷰 비밀번호 유효성 검사
export function ReviewPasswordCheck(reviewPassword, reviewId) {
  let scriptTagKo = /[가-힣]/; //한글을 넣은 배열?
  let space = /\s/; //공백값
  let check = 0;

  if (reviewPassword.length == 0) {
    //값이 없는 경우
    alert("비밀번호를 입력해주세요.");
  } else if (space.test(reviewPassword) == true) {
    //공백이 있는 경우
    alert("공백은 사용할 수 없습니다.");
  } else if (reviewId == reviewPassword) {
    //아이디와 비밀번호가 같을 경우
    alert("비밀번호와 아이디는 같을 수 없습니다.");
  } else if (scriptTagKo.test(reviewPassword) == true) {
    //비밀번호가 한글이 있는경우
    alert("비밀번호는 한글로 작성할 수 없습니다.");
  } else if (reviewPassword.length < 3) {
    //비밀번호가 3자 미만인 경우
    alert("비밀번호는 3자리 이상이어야 합니다.");
  } else if (reviewPassword.length > 20) {
    // 비밀번호가 20자 초과한 경우
    alert("비밀번호는 20자리 이하여야 합니다.");
  } else {
    check = 1;
  }
  return check;
}

//리뷰 텍스트 유효성 검사
export function ReviewText(reviewText) {
  let check = 0;

  if (reviewText.length == 0) {
    //글이 하나도 없는경우
    alert("리뷰를 달아주세요.");
  } else if (reviewText.length > 100) {
    //글이 100자 초과한 경우
    alert("리뷰는 100자리 이하여야 합니다.");
  } else if (reviewText.length < 3) {
    //글이 3자 미만인 경우
    alert("리뷰는 3자리 이상이어야 합니다.");
  } else {
    check = 1;
  }

  return check;
}

처음에는 let scriptTag = /[^가-힣|^a-z|^A-Z|^0-9]/; 이렇게 사용하지않고 let scriptTag = /[~^&()|<>?]/; 이렇게 특수문자들로만 이루어진것을 사용하려 했으나 잘 되지않았습니다.

 

그리고 아무리 검색창에 아무것도 입력하지않은채로 enter키를 눌렀지만 반응이 없어 확인해본 결과 메인 js파일인 app.js파일에서 keyup이 아닌 change로 값이 변경됬을때의 반응만 봐서 적용이 안되는 것이었습니다.

그래서 keyup으로 변경 후 키 값이 enter키인 경우에를 적용해서 사용하니 아무값이 없어도 enter키에 반응하여 알림창이 떴습니다.

//변경전 검색창 enter키
input.addEventListener("change", (e) => {
  //검색 받는 곳에서 change 이벤트가 일어나면(엔터) 발동하는 함수
  let search = e.target.value; //e는 해당 이벤트가 일어나는 곳을 말함 //e.target.value는 해당 input태그에 들어온 값을 말한다 == 사용자가 검색한 것
  if (search == "" || search == " ") location.reload(); //만약 사용자가 아무것도 없이 엔터를 누르면 창을 새로고침한다
  let find = search.replace(" ", "%20"); //쿼리스트링으로 보내야하는데 띄어쓰기를 읽을 수 없어서 쿼리스트링에서 띄어쓰기인 %20을 띄어쓰기 대신 넣는다 //replace(바꾸고싶은 값,바뀔 값)

  fetch(
    `https://api.themoviedb.org/3/search/movie?query=${find}&include_adult=false&language=ko-KR&page=1`, //백틱을 사용해서 안에 검색어를 넣어준다
    options
  )
    .then((response) => response.json())
    .then((res) => printCard(res.results))
    .catch((err) => console.error(err));
});

//변경 후 검색창 enter키
input.addEventListener("keyup", function (event) {
  if (event.key === "Enter") {
    //눌린 키가 enter키일경우
    if (movieTitleCheck(input.value)) {
      //성공할 경우 해당 영화를 출력
      fetch(
        `https://api.themoviedb.org/3/search/movie?query=${input.value}&include_adult=false&language=ko-KR&page=1`, //백틱을 사용해서 안에 검색어를 넣어준다
        options
      )
        .then((response) => response.json())
        .then((res) => printCard(res.results))
        .catch((err) => console.error(err));
    } else location.reload(); //실패할 경우 movieTitleCheck함수에서 alert창으로 경고한 뒤 첫화면 reload
  }
});

 

그리고 localStorage 를 사용해서 리뷰의 아이디, 비밀번호, 리뷰텍스트를 저장하고 불러올 수 있는것을 해보려합니다.

아직 잘 몰라서 찾아보고 있습니다.

 

일단 리뷰를 만드는 함수를 만들었습니다. localStorage를 인터넷에서 찾아보니 객체로도 저장이 가능하다고는 나왔는데 객체 내의 값에 직접적으로 다가가 입력,수정할 수 있는지는 아직 모르겠습니다.

일다는 유효성 검사하는 것만 확인해 봤습니다.

//createReview.js 파일
//함수 쓰기, 읽기, 삭제, 수정
const $reviewName = document.querySelector(".comment-name");
const $reviewPassword = document.querySelector(".comment-password");
const $reviewText = document.querySelector(".comment-text");

import {
  ReviewIdCheck,
  ReviewPasswordCheck,
  ReviewText,
} from "./validationCheck.js";

let createCount = 0;
export let createReviewName = () => {
  $reviewName.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      let check = ReviewIdCheck($reviewName.value);
      if (check == 1) {
      } else $reviewName.value = "";
    }
  });
};

export let createReviewPassword = () => {
  $reviewPassword.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      let check = ReviewPasswordCheck($reviewPassword.value, $reviewName.value);
      if (check == 1) {
      } else $reviewPassword.value = "";
    }
  });
};

export let createReviewText = () => {
  $reviewText.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      let check = ReviewText($reviewText.value);
      if (check == 1) {
      }
    }
  });
};

제가 정한 유효성 검사는 잘나오지만 아직 / , \ , | 등의 몇개의 특수문자는 빠지는것을 확인했습니다.

이값은 어찌 넣어야하나 고민하다 튜터님께 여쭤보니 스페셜 캐릭터라는 것도 있고 좀 더 다양하게 이것저것 찾아보고 직접 적용해봐야 한다고 하셨습니다. 그러면서 사이트들과 어떤식으로 검색해야하는지 알려주셨습니다.

regular expression 를 검색하거나 아니면 아래 튜터님이 주신 참고자료 사이트에서 찾아보려 합니다.

 

이 사이트 가 제가 확인하고 싶은 값들을 밑에 바로바로 보여줘서 좀 더 사용하기 편했습니다.

그래서 아래와 같이 코드를 변경하였습니다.

//특수문자 기호들을 다 넣어서 전역변수로 할당해줬습니다.
let scriptTag = /[~!@#\$%\^&\*\(\)_\+\-={}\[\];:<>,\.\/\?\"\'\/\|\\]/; // 특수문자들
//공백값도 따로 할당해줬습니다.
let space = /\s/; //공백값

//위 두 변수를 원하는 함수가 가져다가 사용합니다.

//영화 검색 유효성 검사
export function movieTitleCheck(find) {
  let check = 0;

  if (find.length == 0) {
    //값이 없는 경우
    alert("제목을 입력해주세요");
  } else if (space.test(find) == true) {
    //공백이 있는 경우
    alert("공백은 사용할 수 없습니다.");
  } else if (scriptTag.test(find) == true) {
    //특수문자가 포함된 경우
    alert("특수문자는 들어갈 수 없습니다.");
  } else if (find.length > 20) {
    // 20자 초과한 경우
    alert("20자 이내로 작성해주세요");
  } else {
    check = 1;
  }
  return check;
}

확인결과 전에 검색에서 피해갔던 특수문자들이 다 잘 검사가 되는 것을 확인했습니다.

 

마저 이어서 localstorage 를 해보려 합니다. 먼저 이 localstorage가 어떻게 작동하는지 어떤식으로 저장되는지 궁금해서 튜터님께 물으러 가니 브라우저에 있지만 내 컴퓨터에 저장하는 것이라고 하셨습니다. 즉 게더타운을 보자면 자신의 컴퓨터에서는 줌이 제일 당겨져있을때 다시 껏다 켜서 들어오면 그대로인데 다른 사람들의 컴퓨터에 영향은 없듯이 내 자신의 컴퓨터에 값이 저장되는 것이라고 하셨습니다. 이해하기 쉽게 설명해주셔서 좋았습니다. 그리고 자리로 돌아가서 찾아보는데 생각해보니 제 컴퓨터에 저장이 되는거면 다른분들의 컴퓨터에선 확인하기 어렵지 않나 생각이 들어 다시 질문드리러 갔습니다. 근데 하나의 코드를 받아와서 작업하는것이니 다른분이 값을 저장하면 그값들도 같이 받아와 져서 괜찮다고 하셨습니다.

그래서 나머지는 내일 찾아가며 작성해보려 합니다.

 

 

튜터님이 알려주신 정규표현식 참고자료

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

https://ahkscript.github.io/ko/docs/misc/RegEx-QuickRef.htm

정규표현식 (RegEx) - 간편 참조서 | AutoHotkey

https://www3.ntu.edu.sg/home/ehchua/programming/howto/Regexe.html

Regular Expression (Regex) Tutorial

 

참고자료

https://bluemint.tistory.com/17#recentEntries

[js] javascript validation 체크, 필수값, 유효성 검사, 핸드폰 형식,스크립트태그 입력 방지, 공백 불가

https://yeonvley.tistory.com/13

[JavaScript] 회원가입 유효성검사

https://hamait.tistory.com/342

정규표현식 (Regex) 정리

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dalki0126&logNo=220481945365 

[JavaScript] 정규식을 이용한 validation 체크

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp

RegExp - JavaScript | MDN

https://hianna.tistory.com/697

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)