사용자 입력값 검사: 구분자로 구분된 입력값을 사전에 정의된, 허용된 입력값과 비교해 검사

• 사용자에게서 특정 구분자(#)로 구분된 텍스트를 입력받아 사전에 정의된, 허용된 입력값 리스트와 비교 수행
• 허용된 입력값 리스트에 포함되지 않은 값이 텍스트에 포함되어 있을 시 사용자에게 이에 대한 피드백 제공
  - alert로 경고를 띄운 후 허용되지 않은 항목은 입력값에서 삭제함

게시판 설정 기능의 일부로 포함되었던 기능으로, 해당 게시판에서 게시물 작성자가 입력할 수 있는 키워드를 관리자가 설정할 수 있다. 관리자가 설정할 수 있는 키워드의 종류는 원래 별도의 설정 파일에 변수 형태로 설정되어 있다.
입력 가능한 값의 범주가 이미 정의되어 있기 때문에 그 목록을 체크박스 형식으로 제공하여 사용자가 그 중에서 허용할 항목을 선택하게 하는 것이 가장 효과적인 방법이라고 생각하나, 이것이 기획-클라이언트 파트의 선택이라 이렇게 구현하였다...
나에게 좀 더 재량권이 주어진다면 input 아래에 입력 예시라도 추가하고 싶다.

• javascript

  import $ from "https://esm.sh/jquery";
  
  // 허용된 키워드들: 영문 키워드는 소문자로 입력
  var allowedKeywordList = "#출석#인증#자랑#yolo#유머#awol#질문#리뷰#이벤트".split("#").filter(function (i){return i;});
  // var allowedKeywordList = ["출석","인증","자랑","YOLO","유머","AWOL","질문","리뷰","이벤트"];
  
  // allowedKeywordList에 포함되지 않은 키워드는 등록 불가
  $("#keywordText").on("change keyup paste blur", function(event){
    let content = $(this).val();
    // 입력 중인 텍스트가 #나 공백으로 끝나지 않을 경우 검사 안함 
    if(["change", "keyup"].includes(event.type) && !(content.endsWith("#") || /\s$/.test(content))){
      return;
    }
    // 사용자가 입력한 키워드 text parsing
    content = content.replace(/,/g, "").replace(/\s/g, "");
    let inputKeywordList = content.toLowerCase().split("#").filter((keyword) => {
      keyword = keyword.trim();
      if(keyword.length > 0){
        return keyword;
      }
    });
    console.log(inputKeywordList)
    // 파싱한 키워드 목록을 허용된 키워드와 그렇지 않은 것으로 분류
    let validKeywordList = inputKeywordList.filter((keyword) => allowedKeywordList.includes(keyword));
    let invalidKeywordList = inputKeywordList.filter((keyword) => !allowedKeywordList.includes(keyword));
  
    //허용되지 않은 키워드 하나라도 포함 시 alert 띄우고 해당 키워드 삭제
    if(invalidKeywordList.length > 0){
      // alert("허용되지 않은 키워드입니다.");
      alert(invalidKeywordList[0] + "은(는) 허용되지 않은 키워드입니다.");
      $("#keywordText").val(validKeywordList.join("#"));
    }  
  })

• HTML

  <input type="text" id="keywordText" value="" placeholder="키워드는 해시태그 단위로 구분하여 입력해 주세요" style="width:50em;" />