[멋사 FE 스쿨] 36일차 리뷰

멋쟁이사자처럼 프론트엔드스쿨 w/ 제주코딩베이스캠프 36일차

---

오전(09:00~11:50) 수업 w/ Wade

수업

JavaScript 최적화(Optimization)

• 실무에서 최적화는 다른 작업보다 우선순위가 떨어진다. → 일정이 빠듯해서
• TDD 쓰는 프로젝트? → 팀장님들이 강하게 주장하는 경우
• 사용자에게 만족스러운 경험 제공
• 왜 속도가 중요한가?
  https://web.dev/why-speed-matters/
• 이미지 최적화 사이트
  https://kraken.io/web-interface
• 세밀한 이미지는 왜 svg가 좋지 않을까?
  → 벡터 이미지가 세밀하면 세밀할수록 svg는 코드로 만드는 이미지이기 때문에 코드의 양이 많아져서 용량이 너무 커짐
  그래서 단순한 이미지를 svg로 해주는 게 좋음
• 용량이 작은 이미지는 jpeg, jpg
  → 압축률이 좋다
  but 투명처리가 불가하다, 움직이는 이미지 불가
  투명처리가 필요없는 이미지는 웬만하면 jpeg 처리하자
• 모든 jquery코드가 담겨 있는 페이지
  https://code.jquery.com/jquery-3.6.0.min.js
  → 이렇게 압축하는 것만으로도 용량을 많이 줄일 수 있다.
  보기는 편하지만 스크롤이 엄청난 페이지
  https://code.jquery.com/jquery-3.6.0.js
• 프레임워크는 필요한 것만 사용해야 한다.
• memoization → 연산한 결과가 저장이 되어 있는 것. 같은 연산 만나면 저장된 값만 꺼내오면 된다
• reflow가 발생하면 dom, style, rendering까지 다 다시 계산. 페이지 렌더링 순서가 반드시 지켜지기 때문에 계산 소요가 크다.
• repaint는 paint부분부터만 다시 발생하기 때문에 갠춘
• 각 css가 어떤 단계를 거치게 되는지 보여주는 표
  렌더링 엔진마다의 차이
  성능 최적화에 도움이 될 것
  https://csstriggers.com/
  참고해서 reflow, repaint 발생시키는 css 요소는 지양하기
• 애니메이션 처리할 때는 transform으로 하자!
• 콘솔 찍는 비용도 생각보다 많이 든다
• requestAnimationFrame()
  https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame
  → 설명 다시 정리해보기
• DOM을 탐색하는 비용은 매우 비싸다. 그래서 DOM 탐색을 최소화해줘야 한다.

---

오후(13:00~18:00) 수업 w/ Wade

• querySelector로 뭔가 찾는 것은 for문 같은 것 안에 넣지 말자. DOM 탐색은 자원소모가 크다고 했잖아
• Document Fragment
  https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment
  DocumentFragment → 리액트에서 저 로직을 내부적으로 써서 종종 물어
• DOM 접근은 최대한 좁은 범위에서
• garbage collection 발생
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
• 불필요한데 메모리에 남는 메모리 누수 현상
  순환 참조 문제
• 전역 변수의 메모리 계속 참조 문제가 OOP의 목적이 되기도

좋은 습관 기르기

• 배열, 객체 원본을 수정하지 말기 → 불변하는 객체처럼 다루기
• 엄격모드(strict mode)로 사용하기

면접 질문 연습

• pixel ratio에 대해서 설명해주세요
  → 실제 물리적 기기와 CSS에서의 1px 간 비율을 의미하는데요 retina display등과 같이 사용자간 모니터 해상도 차이에 대응하기 위한
  기법으로, 개발자의 의도에 맞게 모니터에 반영되도록 사용자에 알맞은 pixel ratio값을 통해 개발자의 의도대로 출력되도록 해줄 수 있습니다.
  
  pixel-ratio에 따라서 device-pixel-ratio로 retina 대응해주는데에 사용됩니다
• 다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요. (JPG, GIF, PNG, SVG)
  → 우선 정적 동적으로 구분해줄 수 있겠습니다.
  gif는 흔히 이야기하는 ‘움짤’로써 큰 용량을 요구하지만 동영상처럼 움직이는 동적 이미지이고
  다음으로 정적 이미지들인 jpg, png, svg에 대해 말씀드리겠습니다.
  여기서 또한 두 갈래로 나누어 말씀드리겠습니다.
  벡터 기반의 svg와 픽셀 기반의 jpg, png가 있는데요.
  우선 svg는 html과 같은 코드를 통한 연산으로 이미지를 구현해냅니다. 따라서 복잡한 이미지보다는 단순한 이미지 가령, 단선으로 이루어진 그래프, 색이 없는 캐릭터 등에 유리합니다. 하지만 말씀드린 바와 같이 이미지를 다양하게 구현하고자 한다면, 너무 큰 용량을 차지하게 되어 불리합니다.
  이어서 jpg와 png는 2가지 방법으로 나누어 설명드려보겠습니다.
  jpg는 원하는 이미지만을 얻는 방식 가령, 투명한 배경과 색과 같은 방식을 희생해서 용량에서의 장점을 챙깁니다.
  png는 용량이 큰 대신 투명한 배경이나 색 등을 구현해낼 수 있습니다.
  
  webp라는 이미지가 있다. 최신 이미지 포맷 용량도 작으면서, png, gif처럼까지 구현해줄 수 있는 포맷

• margin collapsing 현상에 대해 말해주세요
  → margin collapsing이란 브라우저 내 box block 간 상하 margin값 겹침현상이라고 말씀드릴 수 있습니다.
  예를 들어 설명드리는 것이 쉬울 것 같은데요. 상하로 배치되어 있는 두 block이 있을 때, 위에 있는 block에 margin-bottom값을 40px, 아래 있는 block에 margin-top을 30px을 줘보겠습니다. 이 경우, 사이 거리가 각 block의 margin 값을 더한 70px이라고 생각할 수 있지만 두 값 중 더 큰 값인 40px만 적용되어 40px의 간격을 갖게 됩니다.
  이로 인해서 개발자의 의도가 제대로 반영되지 못하는 문제 발생으로 레이아웃이 망가질 수 있습니다.
  이에 대응하기 위해서 공간을 가진 요소를 사이에 넣거나 부모 요소에 overflow hidden을 넣어주는 것으로 해결할 수 있습니다.
  저 스스로는 margin-top값만을 주는 방식으로 습관을 들이고 있습니다!
  부모자식간, 형제간 발생

포트폴리오 뒤늦게 하려고 하지 말고 한거 계속 그때그때 노션등에 업데이트해놓고 바로 대응할 수 있도록 하자

• event delegation (이벤트 위임)에 관해 설명해주세요.
  → JavaScript에서 특정 요소에서 반응하고자 하는 이벤트를 해당 요소가 아닌 부모 요소 등으로 위임함으로 요소마다 일일이 event 반응 태그를 적지 않고도 대응할 수 있어 코드양을 줄여줄 수 있습니다.
  캡쳐링 버블링까지 녹여서 말해볼 수 있도록 하기
  이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아들어가는 이벤트 캡처링 과 이벤트가 발생한곳에서 이벤트 리스너가 있는곳으로 상위계층으로 찾아가는 이벤트 버블링
• 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요
  → 클로저란 함수 내 공간과 같이 말 그대로 닫힌 공간을 말합니다. 클로저 공간을 통해서 함수내 변수등을 캡슐화하여 은닉할 수 있습니다. 클로저 공간에 접근하기 위해서는 getter, setter 함수를 이용해야합니다. 또는 클로저 내 하위공간을 이용해줄 수도 있습니다. 가령, 함수가 반환하는 object를 통해서 접근 할 수 있습니다.
  함수가 선언된 환경의 변수를 기억하는 현상
  클로저는 메모리 최적화 측면에서는 안좋다
• 다음 코드 중 1번과 2번의 차이점을 설명해주세요.
  function Car(){};
  1. var car = Car();
  2. var car = new Car();
  → 1번의 경우 단순 함수 호출에서 return 된 값이 car 변수에 담기게 되는데 위의 코드에서는 return 값이 없기 때문에 undefined가 car에 할당됩니다.
  반면 2번의 경우 new를 통해 생성자 함수로써 Car이 호출 되었고 이 경우 car는 Car() 함수의 instance로 Car() 객체 자체가 할당 됩니다.