TIL 21-03-28

1. 면접 질문

1. 브라우저의 동작원리를 설명해주세요

답변 =>
HTML 문서를 파싱 > 브라우저 화면에 랜더링하기위해 다루기 쉬운 구조로 바꿈 > css파일 파싱 > 렌더트리 구축 > 렌더트리 배치 > 렌더트리 그리기

스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성함.
화면에 표시하기위한 위치, 크기, 그리기 순서 저장을 위한 별도의 트리 구조(렌더트리)가 필요함.
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

출처 : https://velog.io/@zansol/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC

2. 클로저란 무엇이며 원리와 사용하는 이유를 설명해주세요.

답변 => 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이라고 볼 수 있습니다. 외부함수는 내부함수의 리턴값이 아닌 내부함수 자체를 리턴하게 되고 이 내부함수가 변수에 저장되는 식으로 사용할 수 있습니다. 이렇게 클로저를 사용함으로써 함수의 변수를 외부에 접근하지 못하도록 은닉화를 할 수 있으며 간단하게 함수를 사용할 수 있도록 캡슐화를 제공해줄 수 있습니다.

2. 코딩 테스트 연습 -> 폰켓몬

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

풀이

1. answer(최적의 답)를 정의한다.

let answer = 0;

2. choose(총 폰켓몬 마리수)를 정의한다.

//고를수 있는  폰켓몬 마리수는 전체 폰켓몬의 절반
let choose = nums.length/2;

3. 입출력 예시를 보면 중복된 요소들을 제외한 배열 안에서 폰켓몬들(요소)를 선택해야 한다.

따라서 filter를 통해 같은 값들을 제거한 배열을 만들어준다.

let filtered = nums.filter((el,n)=>{
  return nums.indexOf(el)===n}
  )

4. 만약 뽑을 수 있는 폰켓몬 마리수(choose)가 filtered보다 크다면 filtered 전체를 뽑을 수 있으므로 answer는 filtered의 길이가 됩니다.
   반면에 반대라면 choose만큼 뽑을 수 있으므로 answer는 choose가 됩니다.

재할당된 answer를 return하면 폰켓몬의 최대 선택 마리수를 구할 수 있습니다.

//전체 코드
function solution(nums) {
    let answer = 0;
    let filtered = nums.filter((el,n)=>{
        return nums.indexOf(el) ===n;
    })
   let choose = nums.length/2
   if(choose>filtered.length){
       answer = filtered.length
   }else{
       answer = choose;
   }
   return answer;
}