2021.12.20. 라방이와 1주년이었다.
1주년 데이트로 최근에 개봉한 스파이더맨을 보려고 예매했는데, 월요일 회고 특강과 겹쳐서 라방이를 만나지 못했다. 일반적인 회고 시간이면 그냥 빠지려고 했는데.. 회고 그룹이 바뀌어서 뭔가 참석해야 될 거 같았다..
근데 막상 가니깐 별 특별한 내용 없이 회고가 진행되어서 차라리 데이트나 할 걸 하며 후회를 했다. 난 숫자에 예민하기 때문에 1주년 등 기념일에 스티커사진을 남기는 것이 큰 행복인데.. 특별한 날에 컴퓨터 앞에서 하루종일 앉아있었다는 사실이 너무 우울하고, 라방이한테도 미안했다ㅜㅜ 다시 생각해도 짜증 한가득!!!
여튼,, 본론으로 돌아와서~~
이 날 수업에서는 자바스크립트 최적화에 대해서 배웠다. (아래 교안 참고)
★ 자바스크립트 최적화
교안 참고: https://paullabworkspace.notion.site/17-Optimization-51fe9c1c9b054dcfad4780048158ba0e
이론은 어느정도 이해가 되었는데 코드를 짜는 것은 역시나 너무 어렵다. 그래도 요즘은 코드를 보면 어떤 흐름을 짜야 된다는 느낌이 온다는 것만으로도 내가 성장하고 있다는 것을 느끼기는 한다. 언제 한번 날잡고 JS 빡시게 공부해야지 하면서도 놀다가 소중한 시간을 다 보낸다.. 그래도 틈틈이 공부는 하고 있다. 아래 TMI 참고!!!
- TMI (개인 공부)
: 월욜에는 '혼공스(윤인성 지음): 혼자 공부하는 자바스크립트'를 1/3 가량 읽었다. 확실히 JS에 익숙해지고 있는 것인지 아직까지 이해가 되지 않는 부분은 없었다. 다만 이것은 100% 소화하지 못하고 있어서 코드를 짜지는 못할 거 같다. 수많은 반복과 연습을 통해 JS신이 나에게도 영접하기를 ㅋㅋㅋ
그리고 저번에 했었던 면접 대비 모의면접 질의응답 시간을 다시 가졌다.
★ 면접 대비 질의응답
Q11. pixel ratio에 대해서 설명을 해주세요.
A11. pivel ratio는 픽셀의 비율을 뜻하며, 실제 디바이스 장치의 물리적인 픽셀와 css의 픽셀 사이의 비율로 이야기 할 수 있는데 해상도가 높으면 높을수록 css 1픽셀에 들어가는 디바이스의 물리적 픽셀이 늘어나게 됩니다. 또한 디바이스마다 pixel ratio 다르기 때문에 이를 고려하여 반응형으로 설계해줘야 합니다.
- 참고
: pixel ratio란 CSS 에서 말하는 1px 에 실 기기에는 몇 개의 pixel이 들어가 있는지를 나타낸 비율
Q12. 다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요.
(JPG, GIF, PNG, SVG)
A12. JPG는 압축률이 높고 화질이 좋아 일반적으로 많이 사용하지만, 투명 처리가 불가능하다는 단점이 있습니다. GIF는 움직이는 이미지를 나타낼 수 있고, 투명 처리도 가능하지만, 화질이 좋지 않습니다. PNG는 화질도 좋고 투명 처리도 가능합니다. SVG는 벡터들을 조합해 만든 이미지로 크기를 아무리 줄이거나 늘여도 화질이 깨지지 않습니다. 그러나 복잡한 이미지라면 많은 용량을 차지하게 됩니다.
Q13. margin collapsing 현상에 대해 말해주세요.
A13. margin collapsing 현상은 마진 겹침 현상이라고도 합니다. 요소 둘이 붙어있을 경우, 마진을 서로의 방향으로 각각 적용하면 더 큰 마진만 적용되는 현상입니다. 예를 들어 div 두 요소가 위아래로 나란히 있을 경우, 위의 div에 margin-bottom: 30px, 아래의 div에 margin-top: 50px을 주면 두 div의 간격은 50px가 됩니다. 이러한 현상은 빈 테이블 태그를 사용하거나 자식요소에 display inline-block, 부모 속성에 overflow hidden 등을 활용하는 방법으로 해결할 수 있습니다.
Q14. event delegation (이벤트 위임)에 관해 설명해주세요.
A14. 이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아들어가는 이벤트 캡처링과 이벤트가 발생한곳에서 이벤트 리스너가 있는 곳으로 상위계층으로 찾아가는 이벤트 버블링이 있습니다. 이런 전파를 통해 이벤트가 발생된 곳의 정보를 캡처링이나 버블링을 통해 리스너에게 전달하여 조작할 수 있게 하는 것이 이벤트 위임입니다.
이벤트 위임을 하면 이벤트 리스너 관리가 쉽고 메모리 공간 사용량을 줄일 수 있다는 장점이 있지만, 이벤트 위임이 필요 없는 자식 요소가 같이 있을 경우에는 불필요한 이벤트가 발생할 수 있기 때문에 target 요소의 nodeName 프로퍼티를 비교하거나, 특정 클래스의 유무를 classList.contains를 통해 확인하여 이벤트를 감지할 요소를 특정해주어야 합니다.
Q15. 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
A15. 클로져는 함수의 실행이 끝난 뒤에도 함수에 선언된 변수의 값을 접근할 수 있도록 만든 함수를 말합니다. 함수는 블럭으로 둘러싸여 있고 하나의 스코프를 형성합니다. 함수 안에 선언된 변수는 함수 바깥에서 참조할 수 없으며, 함수가 실행된 후에는 더 이상 사용할 수 없습니다. 하지만 자바스크립트에서는 함수 리턴값을 통해 함수 안에 선언된 변수를 노출시킴으로서 클로져를 형성할 수 있습니다.
- 참고
: 클로저는 중첩 함수가 외부 함수보다 더 긴 생명 주기로 살아남아서 외부 함수 스코프 내의 변수를 참조하고 있는 함수를 말합니다. 함수를 중첩하고 내부에 있는 중첩 함수가 외부 함수의 스코프에 있는 변수를 참조하도록 하고, 그리고 외부 함수에서 중첩 함수를 반환하도록 하면 외부 함수는 한 번 실행되고 생명 주기를 다 하지만, 중첩 함수는 반환값으로 다른 변수에 할당되어 계속 참조됩니다.
이 때 이 중첩 함수 내부에서 참조하고 있는 외부 함수의 변수는 계속 참조되기 때문에 가비지 컬렉터에 의해 제거되지 않습니다. 이 외부 함수의 변수는 오로지 중첩 함수 내부에서만 참조할 수 있으며, 외부에서는 절대 접근할 수 없습니다. 그래서 클로저를 사용하면 값을 안전하게 은닉할 수 있습니다.
Q16. 다음 코드 중 1번과 2번의 차이점을 설명해주세요.
function Car(){};
1. var car = Car();
2. var car = new Car();
A16. 1번은 Car 함수가 일반 함수로 호출이 되었고, 2번에서는 Car 함수가 생성자 함수로서 호출이 되었습니다. 일반 함수로 호출된 함수는 해당 함수 내부의 return 값을 반환하여 1번의 car 변수에는 undefined가 할당되고, 생성자 함수로서 호출된 함수는 인스턴스를 반환하여 2번의 car 변수에는 Car 객체가 할당됩니다.
면접 질문도 그렇고, 코드를 짜는 것도 그렇고.. 난 아직 공부할 게 너무나도 많다. 다들 이력서도 작성하고 포트폴리오도 준비하는 것 같은데 난 아직 부족한 점이 투성이라서 그냥 수업만 참여하고 있다. 다들 같은 처지지만 준비한다고 하지만.. 난 정말 아무것도 없어서..ㅜㅜ
강사님들이 이력서는 총알이기 때문에 마구 발사하라고 하시지만.. 나에겐 당장 한개의 총알도 없다..^^ 그리고, 아직 난 전쟁에 나갈 마음의 준비도 하지 못했다. 당장 취업할 생각은 없기 때문에 천천히 총알을 만들 예정이다!! (이번 코딩 교육이 끝나고 프로젝트가 좀 쌓이면 이력서를 작성할 예정)
여튼 화이팅이다 !
★ 긍정의 한줄
들은 것은 잊어버리고, 본 것은 기억하고 직접 해본 것은 이해한다. - 공자 -
Just Do!!! 백문이불여일타다닥!!!
