신규 아이디 추천(Javascript)

카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다.
다음은 카카오 아이디의 규칙입니다.

아이디의 길이는 3자 이상 15자 이하여야 합니다.
아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다.
단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다.
"네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 주려고 합니다.
신규 유저가 입력한 아이디가 new_id 라고 한다면,

1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다.
2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다.
3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다.
4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다.
5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다.
6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다.
     만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다.
7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.

예를 들어, new_id 값이 "...!@BaT#\*..y.abcdefghijklm" 라면, 위 7단계를 거치고 나면 new_id는 아래와 같이 변경됩니다.

1단계 대문자 'B'와 'T'가 소문자 'b'와 't'로 바뀌었습니다.
"...!@BaT#\*..y.abcdefghijklm" → "...!@bat#\*..y.abcdefghijklm"

2단계 '!', '@', '#', '*' 문자가 제거되었습니다.
"...!@bat#\*..y.abcdefghijklm" → "...bat..y.abcdefghijklm"

3단계 '...'와 '..' 가 '.'로 바뀌었습니다.
"...bat..y.abcdefghijklm" → ".bat.y.abcdefghijklm"

4단계 아이디의 처음에 위치한 '.'가 제거되었습니다.
".bat.y.abcdefghijklm" → "bat.y.abcdefghijklm"

5단계 아이디가 빈 문자열이 아니므로 변화가 없습니다.
"bat.y.abcdefghijklm" → "bat.y.abcdefghijklm"

6단계 아이디의 길이가 16자 이상이므로, 처음 15자를 제외한 나머지 문자들이 제거되었습니다.
"bat.y.abcdefghijklm" → "bat.y.abcdefghi"

7단계 아이디의 길이가 2자 이하가 아니므로 변화가 없습니다.
"bat.y.abcdefghi" → "bat.y.abcdefghi"

따라서 신규 유저가 입력한 new_id가 "...!@BaT#\*..y.abcdefghijklm"일 때, 네오의 프로그램이 추천하는 새로운 아이디는 "bat.y.abcdefghi" 입니다.

문제

신규 유저가 입력한 아이디를 나타내는 new_id가 매개변수로 주어질 때, "네오"가 설계한 7단계의 처리 과정을 거친 후의 추천 아이디를 return 하도록 solution 함수를 완성해 주세요.

제한사항

new_id는 길이 1 이상 1,000 이하인 문자열입니다.
new_id는 알파벳 대문자, 알파벳 소문자, 숫자, 특수문자로 구성되어 있습니다.
new_id에 나타날 수 있는 특수문자는 -_.~!@#$%^&*()=+[{]}:?,<>/ 로 한정됩니다.

입출력 예

no	new_id	result
예1	"...!@BaT#*..y.abcdefghijklm"	"bat.y.abcdefghi"
예2	"z-+.^."	"z--"
예3	"=.="	"aaa"
예4	"123_.def"	"123_.def"
예5	"abcdefghijklmn.p"	"abcdefghijklmn"

입출력 예에 대한 설명

입출력 예 #1
문제의 예시와 같습니다.

입출력 예 #2
7단계를 거치는 동안 new_id가 변화하는 과정은 아래와 같습니다.

1단계 변화 없습니다.
2단계 "z-+.^." → "z-.."
3단계 "z-.." → "z-."
4단계 "z-." → "z-"
5단계 변화 없습니다.
6단계 변화 없습니다.
7단계 "z-" → "z--"

입출력 예 #3
7단계를 거치는 동안 new_id가 변화하는 과정은 아래와 같습니다.

1단계 변화 없습니다.
2단계 "=.=" → "."
3단계 변화 없습니다.
4단계 "." → "" (new_id가 빈 문자열이 되었습니다.)
5단계 "" → "a"
6단계 변화 없습니다.
7단계 "a" → "aaa"

입출력 예 #4
1단계에서 7단계까지 거치는 동안 newid("123.def")는 변하지 않습니다. 즉, new_id가 처음부터 카카오의 아이디 규칙에 맞습니다.

입출력 예 #5
1단계 변화 없습니다.
2단계 변화 없습니다.
3단계 변화 없습니다.
4단계 변화 없습니다.
5단계 변화 없습니다.
6단계 "abcdefghijklmn.p" → "abcdefghijklmn." → "abcdefghijklmn"
7단계 변화 없습니다.

나의 풀이

1단계부터 7단계까지 있으니까 가독성이 좋게 만들려고 일부러 각 단계를 변수에 따로따로 할당해 줬다.

function solution(new_id) {
	//대문자를 소문자로 변경
    let step1 = new_id.toLowerCase();
  	//소문자, 숫자,-,_,.를 찾아줌. 문자 하나하나를 검사해서 문자가 분리됨. 그래서 join()으로 다시 합쳐줌
    let step2 = step1.match(/([a-z]|[0-9]|-|_|\.)/g).join('');
  	//replace로 .이 여러개 있는 것을 찾아 .으로 바꿔줌.
    let step3 = step2.replace(/(\.+)/g,'.');
  	//첫번째 .과 마지막 .을 찾아 공백으로 바꿔 줌.
    let step4 = step3.replace(/^\.|\.$/g, '');
	//공백을 찾아 'a'로 바꿔줌
    let step5 = step4;
    if(step4 === '')
        step5 = 'a';
	//길이가 16보다 크다면 15번쨰 문자까지 잘라줌. 마지막이 .이라면 공백으로 변경
    let step6 = step5;
    if(step6.length >= 16)
        step6 = step6.slice(0,15).replace(/\.$/g, '');
	//길이가 2보다 작다면 마지막문자를 잘라서 step7에 붙여줌. 길이가 3 이하일때 까지.
    let step7 = step6;
    if(step6.length <= 2)
        while(step7.length < 3)
            step7 += step6.slice(-1);
	//step7를 return
    return step7;                         
}

참고할 풀이 1

function solution(new_id) {
    const answer = new_id
        .toLowerCase() // 1
        .replace(/[^\w-_.]/g, '') // 2
        .replace(/\.+/g, '.') // 3
        .replace(/^\.|\.$/g, '') // 4
        .replace(/^$/, 'a') // 5
        .slice(0, 15).replace(/\.$/, ''); // 6
    const len = answer.length;
    return len > 2 ? answer : answer + answer.charAt(len - 1).repeat(3 - len);
}

나는 일부러 단계를 보기 좋으라고 변수에 각각 할당해 줬는데, 굳이 그러지 않아도 단계가 알아보기 쉽게 만들어줄 수도 있다는 생각이 들었다. 이런 식으로 주석으로 단계를 적어주면 훨씬 간결하게 적을 수 있다는 사실을 알았다.

2단계에서 나는 숫자와 영문 소문자를 가져온다고 굳이 [0-9][a-z] 정규식을 써줬는데 어차피 앞에서 소문자로 전부 바꿨으니 \w를 써도 가져올 수 있다. 그리고 나는 or조건을 위해서 |를 모두 적어줬는데, [^](Negated set)를 사용하면 안에 존재하는 문자열 외의 나머지 문자를 가져올 수 있다. 참고로 [](Character set)은 안의 문자열에 해당하는 문자를 가져올 수 있다. 그리고 replace()를 쓰면 더 보기 좋았을텐데, 굳이 match를 내가 왜 썼는지 모르겠다.

6단계에서도 아차 싶었던게, slice()가 16자리보다 길다면 15자리까지 잘라줄 것이고, 아니라면 그대로 출력할 것이기 때문에 굳이 if(step6.length)>=15라는 조건을 써 줄 필요 없었다.

마지막 7단계에서 나는 while()문을 써줬는데, 이 풀이에서는 charAt()과 repeat()문을 써줘서 반복해 줬다. charAt()은 인덱스를 제공하면 그 인덱스의 문자를 반환하는 문자이다. repeat(len-1)이라고 해줬으니 마지막 문자열을 반환할 것이고, 그것을 repeat()를 이용해서 반복해 줬다. repeat(3-len)이라고 만들어서 문자 전체 길이가 3이 될 때까지 반복해줄 것이다. 이 방법은 간결하긴 하지만, 함수를 사용하는 방법이고 while문보다 대단히 짧지도 않아서 이 문제에서는 while문을 사용하는 게 나아 보인다. 상황에 맞게 써주면 좋을 듯 하다.

참고할 풀이 2

const solution = (new_id) => {
    const id = new_id
        .toLowerCase()
        .replace(/[^\w\d-_.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace(/^\.|\.$/g, '')
        .padEnd(1, 'a')
        .slice(0, 15)
        .replace(/^\.|\.$/g, '')        
    return id.padEnd(3, id[id.length-1])
}

이 풀이에서 특이한 점은 padEnd()를 사용해 줬다는 것이다. padEnd()는 목표 문자열의 길이와 대체할 문자열을 받아 목표 문자열의 길이보다 짧은 만큼 대체 문자열로 대체해 준다. 마지막 7단계는 목표 문자열이 3, new_id의 마지막 문자열을 인덱스를 이용하여 리턴해줬다.