TIL 21-03-24 (코딩 테스트 크레인 뽑기 게임)

1. 면접 질문

1) 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?

답변 => 네 그렇습니다. 프로젝트를 진행하는 동안 갤럭시와 아이폰에 걸맞는 화면을 구성하기 위해서 미디어 쿼리를 통해 화면크기에 따라 구성이 다르게 되도록 설정하였습니다.

2) 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?

답변 => 효율적인 css를 구성하기 위해서는 부모로부터 자식 순으로, 공통으로 묶일 수 있는 부분부터 예외 처리가 가능한 부분 순으로 작성하는 것이 좋다고 생각합니다. 또한 관심사 분리를 위해서 DOM 안에서 css 사용을 자제하고 css 파일을 따로 만들거나, styled-components와 같이 css 영역을 분리하여 한 문서에서 관리할 수 있게 하는 방법도 효율적인 css 작성 중 하나라고 생각합니다.

3) 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?

답변=> 익명함수는 자바스크립트 안에서 일급 개체로써 변수에 할당할 수도, 함수의 인자를 넘겨받거나 함수를 리턴할 수도 있습니다. 따라서 익명함수는 콜백홤수, 즉 arrow function이나 map, filter와 같은 함수를 바로 사용하여 그 리턴 값을 활용할 수 있는 상황에 사용하게 됩니다.

2. 코딩 테스트 Level 1 - 크레인 뽑기 게임

https://programmers.co.kr/learn/courses/30/lessons/64061

접근 방식

먼저 바구니, 즉 빈 배열을 만듭니다.
결과값 count를 정의해줍니다.(기본값 0)

let basket = [];
let count = 0;
//programmers 코딩 테스트에서는 되도록 const를 사용하지 않는게 좋은 것 같습니다.
//typeerror가 발생합니다.

basket 안에 같은 값이 연속으로 있다면 지워주는 과정이 필요합니다.

 const checkBasket = function(arr){
   //새로 들어온 값과 이전의 가장 마지막 값이 같다면
    if(arr[arr.length-1] === arr[arr.length-2]){
      //두번 삭제한다
      arr.pop();
      arr.pop();
      //지워준 개수만큼 count를 더해준다
      count +=2
      return ;  
    }
}

1. moves의 횟수만큼 basket 안에 인형을 넣는 과정을 하게 된다.
2. board의 index는 깊이를 의미하므로 index를 훑으면서(반복문으로) moves의 위치에서 index가 0이 아닌 것을 basket안에 담는다.
3. 위의 checkBasket을 실행하여 겹치는 인형이 있는지 확인한다.
4. 해당 위치에서 인형을 찾았을 시에는 다음 moves로 넘어가야 하니 break!
5. 과정이 끝나면 지워진 인형 갯수를 return

function solution(board, moves) {
  
    //무브의 수만큼 반복
    for(let m=0; m<moves.length ; m++){
        //board를 훑어서 0이 아닌 곳에서 basket에 넣기
      for(let n = 0; n<board.length ; n++ ){
        //moves의 위치
        let location = moves[m]-1
          if(board[n][location] !== 0){
            //basket 안에 넣는 과정
              basket.push(board[n][location]);
            //넣은 인형 위치는 0으로 변환
              board[n][location] = 0;
              checkBasket(basket);
            //인형을 넣었다면 과정은 끝나므로 break
              break;
          }
      }
  }
   //최종적으로 지워진 인형의 갯수만 return
    return count;
    
}