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 되고 있다면 똑바로 적용된다.

1. 문제의 발단

다양한 컴포넌트들을 디자인하여 만들던 도중, 많은 사람들이 flex-box와 애니메이션과 함께 매우 유용하게 쓰일 수 있지만, 또 배우기는 헷갈리는 부분이 있겠다는 생각에 세트로 이 포스팅을 작성하려고 한다.

2. position?

• 간단하게 요소들의 배치될 방법을 정한다.
• 주로 부모의 크기를 무시하고 브라우저에 전체 창에 맞춰 위치를 맞출 수 있다.

3. 속성

• static : 기본값. 우리가 원래 알던 컴포넌트 대로 배치된다.
• relative : 부모요소를 기준으로 위치를 변경 가능하다.
• absolute : 모든 요소를 무시하고 전제 창에 따라 위치를 변경 가능하다. 요소들을 겹치는 것도 가능하다. z-index를 함께 쓰면 된다.
• fixed : 모든 요소를 무시하고 전체 창에 따라 위치를 변경한다. 하지만 고정되어 버린다. 창 크기를 늘리거나 스크롤을 하여도, 그 자리에서 떨어지지 않는다.
• sticky : 모든 요소를 무시하고 전체 창에 따라 위치를 변경하되, 스크롤 등으로 화면에서 빠져나가더라도, fixed처럼 고정된다. 마치, 그 위치에 컴포넌트가 달라붙어 버리는 느낌이다. 예시를 보면 된다.

4. 위치를 변경하는 속성

• top, bottom, left, right로 단위를 함께 줘서 위치를 변경 가능하다.
• 이런 식으로 footer를 항상 가장 최하단에 박아 버린다.

footer {
	position: absolute;
    bottom: 0;
}