[miniProjects] 31_Password Generator

31_Password Generator

💻주제 : 자동 비밀번호 생성기

• 비밀번호 길이
• 대문자 포함
• 소문자 포함
• 숫자 포함
• 기호 포함
  👍🏻 다섯가지 기능을 활용하여 무작위로 비밀번호가 생성됨.

✨js

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random()*26) + 97)
}

function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random()*26) + 65)
}

function getRandomNumber() {
  return String.fromCharCode(Math.floor(Math.random()*10) + 48)
}

function getRandomSymbol() {
  const symbols = '!@#$%^&*(){}[]=<>/,.'
  return symbols[Math.floor(Math.random() * symbols.length)]
}

(1) getRandomLower

• 알파벳의 개수는 26라 random * 26임.
• 97부터 122까지의 수를 생성한다.
  이 숫자들은 소문자 알파벳 'a'부터 'z'까지의 Unicode 값에 해당한다. (97이 소문자 a임.)
• String.fromCharCode()은 Unicode 값을 인수로 받아 해당하는 문자를 반환한다. 이 경우, 무작위로 생성된 Unicode 값을 무작위 소문자 알파벳으로 변환한다.

(2) getRandomUpper

• getRandomLower와 동일.
• 대문자 A가 65라 65부터 시작.

(3) getRandomNumber

• Math.random()*10 : 0부터 9까지의 무작위 숫자를 생성
• 48은 문자 '0'에 해당하기 때문에 48부터 시작함.

(4) getRandomSymbol

• 기호를 sybols 배열에 넣고 무작위로 뽑음.

❓String.fromCharCode()

• JavaScript의 내장 함수 중 하나로, 유니코드(Unicode) 값을 인수로 받아 해당하는 문자열을 반환하는 역할을 한다.
  예를 들어, String.fromCharCode(65, 66, 67)은 ABC라는 문자열을 반환한다. 여기서 65는 문자 'A'의 유니코드 값, 66은 문자 'B'의 유니코드 값, 67은 문자 'C'의 유니코드 값에 해당한다.

---

const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol
}

clipboardEl.addEventListener('click', () => {
  const password = resultEl.innerText;
if (!password) {
  return;
}
navigator.clipboard.writeText(password);
  alert('클립보드에 복사되었습니다!')
})


generateEl.addEventListener('click', () => {
  const length = +lengthEl.value //+를 붙여 숫자로 변환
  const hasLower = lowercaseEl.checked
  const hasUpper = uppercaseEl.checked
  const hasNumber = numbersEl.checked
  const hasSymbol = symbolsEl.checked
  
  resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)
})

function generatePassword(lower, upper, number, symbol, length) {
  let generatedPassword = ''
  //체크표시 된거 수량 세기
  const typesCount = lower + upper + number + symbol
  const typesArr = [{lower}, {upper}, {number}, {symbol}]
  //false값은 걸러냄
  .filter(item => Object.values(item)[0])

  if(typesCount === 0) {
    return ''
  }

  for(let i=0; i<length; i+=typesCount) {
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0]
      generatedPassword += randomFunc[funcName]()
    })
  }

  const finalPassword = generatedPassword.slice(0, length)
  return finalPassword
}

• randomFunc 객체는 네 가지 속성(lower, upper, number, symbol)과 해당 속성에 연결된 함수(getRandomLower, getRandomUpper, getRandomNumber, getRandomSymbol)를 가지고 있다. 이 객체는 각 속성을 통해 무작위 문자를 생성하는 함수에 접근하는 데 사용된다.

• clipboardEl 요소는 클립보드 버튼을 나타내며, 클릭 이벤트 리스너가 등록되어 있다.
  클릭 시, resultEl의 내용을 가져와 비어 있지 않은 경우 해당 비밀번호를 클립보드에 복사한다. 그리고 '클립보드에 복사되었습니다!'라는 알림을 표시한다.

• generateEl 요소는 생성 버튼을 나타내며, 클릭 이벤트 리스너가 등록되어 있다.
  클릭 시, 입력된 옵션에 따라 length의 길이로 비밀번호를 생성한다.
  hasLower, hasUpper, hasNumber, hasSymbol 변수는 각각 소문자, 대문자, 숫자, 특수 문자 포함 여부를 나타내는 체크박스 요소의 상태를 가져온다.
  generatePassword 함수를 호출하여 비밀번호를 생성하고, 그 결과를 resultEl 요소의 내용으로 설정한다.

• generatePassword 함수는 주어진 옵션에 따라 length 길이의 비밀번호를 생성한다.
  체크된 옵션의 개수를 typesCount 변수에 저장한다.
  typesArr 배열에 소문자, 대문자, 숫자, 특수 문자를 나타내는 객체를 담는다. 이때, 체크된 옵션만 필터링하여 배열에 추가한다.

• 옵션이 하나도 선택되지 않은 경우 빈 문자열을 반환합니다.

• 비밀번호를 생성하기 위해 length만큼 반복하고, typesArr 배열의 각 요소에 대해 순회한다.
  각 요소에서 함수 이름을 가져와 randomFunc 객체에서 해당 함수를 호출하여 무작위 문자를 생성하고, generatedPassword에 추가한다.

• 최종 비밀번호는 생성된 비밀번호에서 length만큼 잘라내어 반환된다. (default가 20이면, 긴 무작위 문자열에서 20만 잘라서 결과를 보여준다는 것.)

❓❗엥 css

.result-container #result {
  word-wrap: break-word;
  /* 100%는 부모요소, 40px는 버튼의 요소임
  비밀번호 결과값이 부모요소에서 버튼을 뺀 길이 안에서 생성되어야 함. */
  max-width: calc(100% - 40px);
}

❓word-wrap

• CSS에서 사용되는 속성으로, 긴 단어나 긴 URL 등이 요소의 경계를 벗어나지 않고 자동으로 줄 바꿈되도록 지정한다.
• normal
  기본값. 긴 단어나 긴 URL이 요소의 경계를 벗어나면 줄 바꿈하지 않고, 그대로 표시된다.
• break-word
  긴 단어나 긴 URL이 요소의 경계를 벗어나면 줄 바꿈이 발생하여 다음 줄로 이어서 표시된다. 이때, 단어나 URL의 중간에서도 줄 바꿈이 발생할 수 있다.

👍🏻참고로, word-wrap 속성은 CSS3에서는 overflow-wrap으로 대체되었다. overflow-wrap은 word-wrap과 동일한 기능을 수행하며, 더 이해하기 쉬운 이름으로 변경되었다.