- pixel ratio에 대해서 설명을 해주세요.
레티나 디스플레이에 대응할때 고려하는 픽셀당 장치 픽셀 수를 뜻합니다.
답 1)
CSS에서 말하는 1px에 실 기기에는 몇 개의 pixel이 들어가있는지 나타낸 비율입니다.
재현님 답)
픽셀의 비율이란 뜻으로, 디스플레이가 가지고 있는 픽셀의 갯수를 뜻합니다.
디바이스 장치의 물리적인 픽셀과 css 픽셀의 비율입니다.
pixel ratio가 커지면 1개의 css 1px에 들어가는 디바이스 물리적인 픽셀의 수가 늘어납니다.
- 다음 이미지 포맷에 대해 각 특징에 대해 설명해주세요. (JPG, GIF, PNG, SVG)
- JPG : 파일 사이즈가 작고 퀄리티가 좋습니다. 압축될때 데이터가 손실됩니다. 압축률이 뛰어납니다. GIF가 256컬러까지 표현하는 반면 24비트 컬러까지 표현할 수 있습니다.
- GIF : 움직이는 이미지에 사용합니다. 투명처리가 가능합니다.
- PNG: 배경이 투명한 파일에 사용하기 적합합니다.
- SVG: 백터로 이루어져 있으며 단순한 이미지인 로고나 아이콘에 사용하기 적합합니다. XML로 표현되어있고 이미지가 복잡해지면 복잡해집니다.
-이외에, WebP
용량이 적은데 퀄리티가 높으면서 투명도 처리가 가능하고 gif처럼 애니메이션도 표현이 가능합니다.
margin collapsing 현상에 대해 말해주세요.
마진 상쇄 원리로, 박스간 상하 마진이 겹치면 더 큰 마진이 작은 마진을 상쇄시키고, 두 마진 값이 같으면 중복으로 상쇄시킵니다. 이를 해결하는 방법은 부모의 overflow나 display 값을 조절해보는 것입니다.
event delegation (이벤트 위임)에 관해 설명해주세요.
자식요소에 일일히 이벤트를 달아주지 않고 부모 요소에 이벤트 리스너를 달고 자식요소에서 이벤트를 감지하게 하게 만드는 방법입니다.
버블링을 이용해 제어하는 방식으로 event.currenttarget과 event.target 으로 어디서 발생하는지 알 수 있습니다.
다른 분 답)
이벤트 위임은 부모 요소에 이벤트 핸들러를 등록하여 자손 요소 각각에 이벤트 핸들러를 등록하지 않고 한 번의 이벤트 핸들러 등록으로 자식 요소에서 일어난 이벤트를 처리할 수 있는 방법입니다. 부모 요소의 이벤트 핸들러에서 받은 이벤트 객체의 target 프로퍼티가 실제로 이벤트가 일어난 요소를 가리키므로, 이를 통해 이벤트 위임을 구현할 수 있습니다. 하지만 target 프로퍼티는 부모 요소 자신도 가리킬 수 있기 때문에 target 프로퍼티의 nodeName 프로퍼티 또는 특정 클래스의 유무를 확인하여 이벤트를 감지할 요소를 특정해주어야 합니다.
다른 분 답 ) 이벤트 위임은 부모 요소에 준 이벤트 핸들러를 붙였을 때, 자식 요소에 따로 이벤트 핸들러를 붙이지 않아도 이벤트가 일어났을 때 동작하는 것을 말합니다. 그래서 event handler 함수에 event.target 의 classList를 검사하여 이벤트가 일어난 요소에 따라 다른 동작이 일어나게 처리할 수 있습니다.
다른 분 답 )
이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아들어가는 이벤트 캡처링 과 이벤트가 발생한곳에서 이벤트 리스너가 있는곳으로 상위계층으로 찾아가는 이벤트 버블링이 있습니다. 이런 전파를 통해 이벤트가 발생된 곳의 정보를 캡처링이나 버블링을 통해 리스너에게 전달하여 조작할 수 있게 하는 것이 이벤트 위임입니다.
이벤트 위임이 왜 발생하는지?
이벤트 전파를 통해서 이벤트 발생 원점을 탐색. 캡처링 선 버블링 후
왜..? 라는 질문에 다시 생각해보기
클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
클로징된 공간에 접근할수 있는 함수를 클로저 함수라고 합니다.
함수 안에 자식함수를 따로 만들어서 리턴으로 밖으로 빼내고 외부에서 부모 함수 스코프에 접근할 수 있도록 합니다.
다른 분 답)
클로저는 중첩 함수가 외부 함수보다 더 긴 생명 주기로 살아남아서 외부 함수 스코프 내의 변수를 참조하고 있는 함수를 말합니다. 함수를 중첩하고 내부에 있는 중첩 함수가 외부 함수의 스코프에 있는 변수를 참조하도록 하고, 그리고 외부 함수에서 중첩 함수를 반환하도록 하면 외부 함수는 한 번 실행되고 생명 주기를 다 하지만, 중첩 함수는 반환값으로 다른 변수에 할당되어 계속 참조됩니다. 이 때 이 중첩 함수 내부에서 참조하고 있는 외부 함수의 변수는 계속 참조되기 때문에 가비지 컬렉터에 의해 제거되지 않습니다. 이 외부 함수의 변수는 오로지 중첩 함수 내부에서만 참조할 수 있으며, 외부에서는 절대 접근할 수 없습니다. 그래서 클로저를 사용하면 값을 안전하게 은닉할 수 있습니다.
다음 코드 중 1번과 2번의 차이점을 설명해주세요.
function Car(){};
1. var car = Car();
2. var car = new Car();
1번은 일반함수를 변수에 할당에 호출한 코드이며, 해당 함수 내부의 return값을 반환합니다.
2번은 생성자함수를 통하여 인스턴스(객체)를 생성한 코드입니다.
다른 분 답 )
1번은 Car 함수가 일반 함수로 호출이 되었고, 2번에서는 Car 함수가 생성자 함수로서 호출이 되었습니다. 일반 함수로 호출된 함수는 해당 함수 내부의 return 값을 반환하여 1번의 car 변수에는 undefined가 할당되고, 생성자 함수로서 호출된 함수는 인스턴스를 반환하여 2번의 car 변수에는 Car 객체가 할당됩니다.
