[TIL] 12.20

자바스크립트의 최적화에 대해! 그리고 면접 문제 그 두번째 :)

최적화는 무엇이고 왜 해야할까?(면접 문제로 많이 나온다)

• 사용자 경험을 위해!
• make it right, make it fast!
• 시간
  초기 구동 시간: 애플리케이션이 로드 되는 시간
  계산시간 : 동일한 계산을 얼마나 빠르게?
  반응시간 : 사용자의 행동에 빠르게 반응하는가?

1. 초기 구동 시간

• 다운로드 해야 하는 파일 갯수를 작게 유지하기
  (이미지 스프라이트, 이미지 용량 최적화, 최적화된 폰트 사용, *svg의 경우 벡터기반 이미지라 세밀하면 세밀할수록 코드의 양이 늘어 적당하지 않게 됨)
  용량이 적은 이미지는 jpg, jpeg (하지만 투명처리 안됨)
  
• JS, CSS 파일 최소화 (Minifier 익스텐션 활용)

2. 계산 시간

• 알고리즘과 관련 있음

3. 반응 시간

• 반응시간은 HTML 렌더링 방식을 잘 이해하고 있어야 함

• css 속성 별 reflow와 repaint 과정에 대한 내용: 링크

• JS 보다는 CSS 애니메이션을 활용하는 것이 좋다.

• transform 속성을 사용하여야 한다.

• repaint, reflow를 유발하는 속성은 가급적 사용하지 않는다.

• requestAnimationFrame을 사용한다.
  (브라우저의 애니메이션 최적화, 비활성 탭에서 애니메이션이 계속 동작하지 않도록 하여야 함)

• DOM접근과 업데이트는 가급적 적게 한다.
  (DOM 접근은 좁은 범위 내에서!, Document Fragment를 이용하여 한번에 DOM 업데이트하기!)

4. 메모리
메모리의 생명 주기:

메모리 할당 -> 메모리 사용 -> 메모리 해제

자바스크립트에서 사용하지 않는 메모리는 자바스크립트 엔진이 찾아서 삭제한다. 이때 참조카운팅을 하게 되는데, 메모리에 존재하는 값을 참조하는 변수와 함수의 갯수를 카운팅하게 된다. 카운팅 횟수가 0일때, 값을 삭제하게 된다.
*전역변수는 프로그램이 종료되기 전까지 계속 메모리에 존재한다.

모의면접 그 두번째

1. pixel ratio란 무엇인가요?

pixel ratio란 하나의 픽셀안에 들어가는 픽셀 갯수를 이야기 합니다. pixel ratio가 높은 레티나의 경우, 이미지를 적용할 때 일반적으로 두배 크기의 이미지를 사용합니다.
--> 아님 ㅋㅋㅋㅋ

픽셀 레시오란 디바이스 장치의 물리적인 픽셀이고, 두번째는 css 픽셀의 비율을 이야기 함. 픽셀수가 늘어나면 늘어날수록

2. 다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요. (JPG, GIF, PNG, SVG)

JPG는 픽셀로 이미지를 표현하여 다양한 색 표현이 가능한 이미지 포맷인것으로 알고있습니다. 투명처리가 불가하다는 특징이 있습니다.
GIF는 움직이는 이미지 입니다.
PNG 벡터 기반의 이미지로 배경 투명처리가 가능하지만 jpg보다 비교적 크기가 크다는 단점이 있습니다.
SVG는 벡터 방식으로 이미지를 표현하여 크기를 변경해도 깨지지 않습니다. 코드로 이루어져 있어 수정 또한 가능합니다.

-->
크게 JPG, GIF, PNG는 픽셀 단위로 설정되는 비트맵 이미지, SVG는 3차원의 벡터 이미지로 구분지어 설명할 수 있습니다.
JPG는 손상 가능성이 있지만 용량을 크게 줄일 수 있고, GIF는 손상 가능성은 없지만 용량을 줄이기에는 어려움이 있습니다.
하지만 GIF는 JPG보다 여러 장의 이미지 저장이 가능한 특징이 있습니다. 이런 GIF에 다양한 색 설정이 가능한 포맷이 PNG입니다.
SVG는 코드로 설정되어있어 보다 다양한 스타일링과 제어가 가능합니다.

margin collapsing 현상에 대해 말해주세요

마진 겹침 현상이란 부모와 형제요소 간 margin-top 과 margin-bottom이 둘다 존재할 때 부모 높이에 영향을 미치지 않는 현상입니다. 이때 부모 요소에 오버플로우나 inline-block, 또는 border값을 적용합니다.

event delegation (이벤트 위임)에 관해 설명해주세요.

이벤트 발생 이유, 장점 이야기 하기! (이벤트 캡처링, 이벤트 버블링)
하나의 이벤트핸들러로 여러 이벤트를 컨트롤 할 수 있는 장점이 있다!

이벤트 위임이란 부모요소에 이벤트 핸들러를 등록하여 자식요소의 이벤트를 처리하는 방법입니다. 자식요소에 모두 이벤트 핸들러를 달지 않아도 이벤트를 위임할 수 있다는 장점이 있습니다.
이벤트가 발생했을 경우, DOM트리의 하위계층으로 이벤트의 근원지를 찾는 이벤트 캡처링이 일어나고, 캡처링이 끝난 후 상위계층으로 다시 찾아가는 이벤트 버블링이 있습니다. 이러한 전파를 통해 이벤트에 대한 정보를 캡처링, 버블링을 통해 리스터에 전달하여 조작할 수 있는 것입니다.
덧붙여 target 프로퍼티를 통해 이벤트가 어디에서 발생하는지 확인할 수 있습니다. 다만 이벤트 감지를 하지 않아도 되는 자손 요소를 가르킬 수 있기 때문에 target 요소의 nodeName 프로퍼티를 비교하거나, classList.contains를 통해 클래스 유무를 확인하여 이벤트 감지 요소를 특정해주어야 합니다.

클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.

클로져는 폐쇄된 함수 공간에 접근하기 위한 테크닉입니다. 변수가 중복되는 것을 막기 위해, 값을 은닉하기 위한 용도로 사용합니다. 함수를 만들어 클로져 공간을 만들고, 해당 공간에 접근할수 있는 함수를 리턴을 통해 반환하여 접근할수 있도록 합니다.

다음 코드 중 1번과 2번의 차이점을 설명해주세요.
function Car(){};

1. var car = Car();
2. var car = new Car();

1번은 함수로 호출되었습니다. 이때 내부에서 리턴 값을 반환하여 car 변수에는 undefined가 할당됩니다.
2번의 경우엔 생성자 함수로 호출되었습니다. new 라는 키워드를 통해 생성자 함수인 Car를 생성하였고, 리턴을 통해 값을 반환하는 것이 아닌 인스턴스를 반환하여 car 변수에는 Car의 객체가 할당됩니다. 재사용이 가능하다는 특징이 있습니다.