1. 문제 설명

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

• 아이디의 길이는 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" 입니다.

2. 제한사항

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

3. 입출력 예제

4. 나의 접근 방식

• 예시를 보면서 어떤 경우에 어떤 식으로 문자가 바뀌어야 하는지를 파악했다.
• 문자를 특정 문자로 바꾸거나 생략하고 싶을 때는 정규표현식이 가장 유용하게 사용할 수 있음을 알고 있었다.
• 그리고 나머지 사항은 조건문과 반복문으로 처리하면 될 것이라고 생각했다.

5. 결과

function solution(new_id) {
    // 모든 대문자를 소문자로 바꾼다.
    new_id = new_id.toLowerCase()
        // 숫자, '-', '_', '.'이 2번 이상인 경우,
        // 가장 앞에 '.'이 있는 경우를 정규표현식으로 제거한다.
        .replace(/[^\w\.\-]/g,'')
        .replace(/[\.]{2,}/g,'.')
        .replace(/^\./,'')
        .replace(/\.$/,'');

        // new_id가 빈 문자열이 될 경우 'a'로 바꿔준다.
        if(!new_id) new_id = 'a';

        // 길이가 16이상이면 15까지 남겨두고 나머지는 버린다.
        if(new_id.length >= 16) new_id = new_id.slice(0, 15)
        // 마지막으로 '.'이 있는경우 제거한다.
        if(new_id[new_id.length - 1] === '.') new_id = new_id.slice(0, 14)

        // 길이가 2이하라면 마지막 문자열을 임시로 받아 뒤에 계속 붙여준다.
        while(new_id.length <= 2) {
            let temp = new_id[new_id.length - 1];
            new_id = new_id + temp;
        }

        return new_id;
}

6. 개선점이 있다면?

• 정규표현식으로 싹 다 만들어서 한 줄로 끝낼 수 있을 것 같지만, 정규표현식 자체가 익숙지가 않아서 작성하기 애를 먹었다.

1. 문제 설명

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

2. 제한사항

• 전체 학생의 수는 2명 이상 30명 이하입니다.
• 체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
• 여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
• 여벌 체육복이 있는 학생만 다른 학생에게 체육복을 빌려줄 수 있습니다.
• 여벌 체육복을 가져온 학생이 체육복을 도난당했을 수 있습니다. 이때 이 학생은 체육복을 하나만 도난당했다고 가정하며, 남은 체육복이 하나이기에 다른 학생에게는 체육복을 빌려줄 수 없습니다.

3. 입출력 예제

4. 나의 접근 방식

• 체육복을 잃어버렸지만, 여분의 체육복을 그대로 가지고 있을 경우 잃어버린 경우에서 제외해도 된다.
• 그렇게 확실히 잃어버린 학생들을 모아서 여분이 있는 학생들과 비교한다.
• 자신보다 번호가 1만큼 크거나 작으면 빌릴 수 있다는 점을 이용한다.
• 그렇게 결국, 이미 여분이 있거나 빌려올 수 있는 학생 수를 더해서 총 체육시간에 참여할 수 있는 학생수를 모두 구할 수 있다.

5. 결과

function solution(n, lost, reserve) {
    // 전체 학생수에서 체육복을 이미 잃어버린 학생의 수를 제외한다.
    let result = n - lost.length;
    // 임시로 빈 배열을 만들어서 체육복이 없지만 빌릴 수 있는 학생들을 구한다.
    let arr = [];

    // 모든 학생들의 목록을 정렬하여 index를 최대한 맞춘다.
    lost.sort((a, b) => a - b);
    reserve.sort((a, b) => a - b);

    for(let i = 0; i < lost.length; i++) {
		// 만약, 체육복을 잃어버렸지만, 여벌의 체육복이 있다면
        if(reserve.includes(lost[i])) {
			// 자신이 여분을 사용한다. 그래서 잃어버린 목록에서 제외하고
            reserve = reserve.filter(el => el !== lost[i]);
			// 체육을 할 수 있는 학생의 수도 늘린다.
            result++;
        } else {
			// 여분의 체육복이 없는경우, 빌릴 수 있는지를 확인 하기 위해 임시 배열에 넣는다.
            arr.push(lost[i]);
        }
    }

    lost = arr;

    for(let i = 0; i < lost.length; i++) {
		// 자신보다 번호가 하나 낮은 학생 중 체육복을 빌릴 수 있는지 확인한다.
        if(reserve.includes(lost[i] - 1)) {
            reserve = reserve.filter(el => el !== lost[i] - 1);
            result++;
        }

		// 자신보다 번호가 하나 높은 학생 중 체육복을 빌릴 수 있는지 확인한다.
        else if(reserve.includes(lost[i] + 1)) {
            reserve = reserve.filter(el => el !== lost[i] + 1);
            result++;
        }
    }
    return result;
}

1. 문제 설명

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.

1. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다.
2. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다.
3. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다.
4. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진수에 해당하는 값의 배열이다.

네오가 프로도의 비상금을 손에 넣을 수 있도록, 비밀지도의 암호를 해독하는 작업을 도와줄 프로그램을 작성하라.

2. 입력 형식

입력으로 지도의 한 변 크기 n과 2개의 정수 배열 arr1, arr2가 들어온다.

• 1 ≦ n ≦ 16
• arr1, arr2는 길이 n인 정수 배열로 주어진다.
• 정수 배열의 각 원소 x를 이진수로 변환했을 때의 길이는 n 이하이다. 즉, 0 ≦ x ≦ 2n - 1을 만족한다.

3. 입출력 예제

- 1번

- 2번

4. 나의 접근 방식

• 먼저 지도 두 개를 합쳐야 한다는 생각을 하였다.
• 결국, 하나의 배열 안에 가장 상단의 줄부터 지도의 모양이 '#'으로 들어가니까 총결과물의 배열의 길이는 주어진 지도들의 길이와 같다고 생각했다.
• 그러므로, 개수와 같은 길이의 빈 문자열로 이루어진  배열을 만들어주고, 두 개의 지도를 합친 지도를 보고 해석하여, '#'을 넣어주면 된다고 생각하였다.

5. 결과

function solution(n, arr1, arr2) {
	// 주어진 arr1, arr2는 10진법의 수이므로 2진법으로 바꿔준다.
    let two1 = arr1.map(el => el.toString(2).padStart(n, '0'));
    let two2 = arr2.map(el => el.toString(2).padStart(n, '0'))
    
	// 주어진 배열의 길이인 n과 같은 길이의 빈 배열을 만들어 주고,
    let arr = Array(n).fill('')
    
    // arr들을 완전 탐색한다.
    for(let i = 0; i < n; i++) {
        for(let j = 0; j < n; j++) {
        	// 만약 arr1과 arr2의 index의 수가 같다면
            if(two1[i][j] === two2[i][j]) {
            	// 더한 값을 arr를 알맞은 index에 넣는다.
                arr[i] = arr[i] + two1[i][j]
            } else {
            	// 아니라면, 문자열 1을 더해준다. 그럼 바로 뒤로 붙는다.
                arr[i] = arr[i] + '1'
            }
        }
    }

	// 다시 n길이의 배열을 만들어주고,
    let result = Array(n).fill('')
    
    // 또 완전 탐색한다.
    for(let i = 0; i < n; i++) {
        for(let j = 0; j < n; j++) {
        	// 이번에는 합쳐진 지도인 arr를 탐색하며 만약, 요소가 "1"이라면,
            if(arr[i][j] === "1") {
            	// #을 더해 똑같은 index에 넣어주고
                result[i] = result[i] + "#"
            } else {
            	// 아니라면 " "을 넣어주어 0을 처리한다.
                result[i] = result[i] + " "
            }
        }
    }

    return result;
}

6. 개선점이 있다면?

• 이중 반복문의 잦은 사용은 시간 복잡도에서 불리하다. 줄일 수 있다면 줄이는 것이 옳다.
• 만약, 정규표현식을 어떻게 잘 섞어 써도 풀 수 있지 않을까?? 하는 생각이 든다.

1. 문제의 발단

자연스럽게 scss를 사용하고 있었지만 아직 포스팅을 한 번도 한 적이 없었다...! 왜 우리는 scss를 사용하며, 어떤 점이 유리하고 왜 이렇게 다들 사용하는지를 알아보자.

2. SCSS?

• css의 전처리기(CSS Preprocessor)
• 조건문, 반복문, 변수의 정의등 다양한 연산을 css에서도 할 수 있게 해 준다.
• 하지만 웹은 css 파일만을 읽을 수 있기 때문에 scss로 작성된 파일은 컴파일 과정을 거쳐 css로 바뀐다.

3. React에서 어떻게 적용시키나요?

• VS code의 익스텐션을 다운 받는다.

• npm install --save sass로 sass 파일을 프로젝트의 packge.json에 install 한다.
• css 파일을 만들고 오른쪽 하단의 'Watch Sass'를 눌러 컴파일을 계속할 수 있도록 만든다.

4. 어떻게 쓰나요?

$concept-color : #DD4A68;

beader {
	color: $concept-color;

	nav {
    	color: black;
    }

}

• $를 이용하면 선언해서 사용할 수 있다.
• {} 안에 중첩으로 스타일을 적용시킬 수 있다.

5. 저는 왜 적용이 안 되나요?

• 대부분 import를 잘 못 했기 때문이다.
• @import "scss파일 경로"를 css파일이 있는 scss 파일에 최상단에 적용시킨다.
• 그 css 파일은 js 파일에서 import 되고 있다면 똑바로 적용된다.