[JS]랜덤 패스워드 생성기!!

우리가 가끔 패스워드를 비밀번호찾기를 하게되는데 

그때 임시비밀번호로 프로그램에서 만들어주는 비밀번호를 이메일로 받게되는 경우가 있었다

 

그때의 기억을 되살려 보며 랜덤패스워드를 만들어보자 

 

 

이 프로그램은 '비밀번호 생성하기' 버튼을 누르게 되면 

영어 소문자, 대문자, 숫자, 특수문자를 조합하여 12자리의 랜덤비밀번호를 생성한다

 

그리고 옆의 복사하기 버튼을 누르면 해당 비밀번호를 복사할 수 있다

---

코드 설명 

 

변수 설정 

const passwordBox = document.getElementById("password");
const length = 12;

const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerCase = "abcdefghijklmnopqrstuvwxyz";
const number = "0123456789";
const symbol = "@#$%^&*()_+~|}{></-=";

const allChars = upperCase + lowerCase + number + symbol;

 

-  passwordBox는 id가 password인 요소를 선택하여 참조하는 변수이다. 이 요소는 사용자가 생성된 비밀번호를 볼 수 있는 input box이다. 

- length는 생성되는 비밀번호의 길이를 나타내는 변수로 여기서는 12자로 설정되어 있다. 

 

- 아래 uppserCase는 대문자, lowerCase는 소문자, number는 숫자, symbol은 특수문자 문자열을 담는 변수이다. 이것들은 랜덤비밀번호를 생성할 때 랜덤하게 선택하여 생성해서 사용하게 된다. 

 

 

- allChars변수는 대문자, 소문자, 숫자, 특수문자를 모두 포함하는 문자열이다. 비밀번호를 생헝할 때 이 문자열에서 랜덤하게 문자를 선택하게 된다.

 

CreatePassword() 함수 

function createPassword() {
  let password = "";
  password += upperCase[Math.floor(Math.random() * upperCase.length)];
  password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
  password += number[Math.floor(Math.random() * number.length)];
  password += symbol[Math.floor(Math.random() * symbol.length)];

  while (length > password.length) {
    password += allChars[Math.floor(Math.random() * allChars.length)];
  }
  passwordBox.value = password;
}

- 생성하기 버튼을 누르게되면 실행되는 함수이다. 

- password라는 빈 문자열을 초기화하고 대문자, 소문자, 숫자, 특수문자 각각에서 하나씩 랜덤하게 선택해서 password에 추가한다. 이렇게 하면 최소한 하나의 대문자, 소문자, 숫자, 특수문자가 비밀번호에 포함되도록 보장할 수 있다. 

- 이후 while 루프를 사용하여 password의 길이가 length(12)보다 작을 때 까지 allCahrs문자열에서 랜덤하게 문자를 선택해 password에 추가한다. 

- 마지막으로 생성된 비밀번호를 passwordBox입력 상자의 값으로 설정한다. 

 

copyPassword()함수 

function copyPassword() {
  passwordBox.select();
  document.execCommand("copy");
}

이 함수는 생성된 비밀번호를 복사하는 역할을 한다. 

- passwordBox.select()는 passwordBox입력상자의 내용을  선택한다. 

-document.execCommand('copy')는 선택된 내용을 클립보드로 복사한다. 사용자는 이제 이 비밀번호를 다른 곳에 붙여 넣을 수 있게 된다. 

 

끝 

매우 간단한 프로그램이다! 

다만, 이렇게 생성된 문자열의 경우 앞의 4자리가 대문자, 소문자, 숫자, 특수문자로 고정된 위치에 만들어 진다는 점이 매력이 떨어지는 것 같다. 모든 문자들이 포함되면서 랜덤하게 생성될 수 있는 알고리즘에 대해서 고려해 봐야될 거 같다.