[JS] javaScript Study

2023-03-02 1 분 소요

📖 모던 자바스크립트 Deep Dive

**모던 자바스크립트 Deep Dive (이웅모 저)**

모던 자바스크립트 Deep Dive (이웅모 저)

스터디 진행 방식

자바스크립트 책으로 격주간 공부할 범위를 스터디원들과 함께 결정
격주에 한 번 공부한 내용을 바탕으로, 회고록 발표 및 팀원 중 한명이 이론을 구현한 코드 리뷰 + (지난 발표때 팀원이 구현한 코드를 자신이 구현해와서 코드 리뷰)
자신이 구현한 코드는 나머지 팀원들이 다음 발표 전까지 똑같이 구현 해와야 함 (컨닝 X).

기타

가끔 나도 회고록 발표함. 그리고 내가 문제 낼 수도 있음.

문제 예시) 💻 비동기 요청 처리
정원 - 최대 3명

회고록 및 코드 구현 예시

회고록 예시.hwp

// 정규표현식을 이용한 아이디, 비밀번호 유효성 검사

const id = document.querySelector("#id");
const password = document.querySelector("#password");
const toggle = document.querySelector("#toggle");
const submit = document.querySelector("#submit");
const paragraph = document.querySelector("p");

let onToggle = true;

toggle.onclick = () => {
  if (onToggle) {
    toggle.textContent = "invisible";
    password.type = "text";
  } else {
    toggle.textContent = "visible";
    password.type = "password";
  }

  onToggle = !onToggle;
};

submit.onclick = () => {
  try {
    const { statusID, statusPWD } = checkReg(id.value, password.value);

    if (statusID && statusPWD) {
      paragraph.textContent = "Success!";
    } else {
      paragraph.textContent = `ID: ${statusID}, PW: ${statusPWD}`;
    }
  } catch (e) {
    console.log(`Error: ${e}`);
  }
};

function checkReg(id, password) {
  /**
   * ^: ~로 시작
   * (?:) 비포괄적 괄호, 기억하지 않기때문에, 실패시 바로 탈락
   * (?=.*[A-Za-z]) 임의의 문자가 0개이상 반복되고, 문자가 최소 하나 포함되어 있는지 확인
   * (?=.*\d) 임의의 문자가 0개이상 반복되고, 숫자가 최소 하나 포함되어 있는지 확인
   * [A-Za-z\d].{n,} 대괄호 내부의 문자와 숫자가 n번 이상 반복되었는지 확인
   */
  const regExpID = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{3,}$/;
  const regExpPW =
    /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]*$/;
  const status = { statusID: checkID(), statusPWD: checkPWD() };

  return status;

  function checkID() {
    if (id.length >= 4 && regExpID.test(id)) {
      return true;
    }
    return false;
  }

  function checkPWD() {
    if (password.length >= 8 && regExpPW.test(password)) {
      return true;
    }
    return false;
  }
}