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