🦁_21.12.20 TIL

21년 12월 20일

📝 Javascript

📎 자바스크립트 최적화(Optimization)

Make it work, Make it right, Make it fast
- Kent Beck

왜 최적화를 해야할까?

• 사용자의 경험이 좋아진다.
• 면접 문제로 많이 나옵니다.😀

📎 성능 측정의 척도

• 올바르게 동작하게 만들고 === 리소스
  => 자원 소모를 얼마나 많이 하는가?
  => 메모리, 네트워크 트래픽
• 빠르게 동작하게 만든다 === 시간

시간

• 초기 구동 시간 : 초기에 애플리케이션이 로드되는 시간
  
  • 다운로드 해야하는 파일 수, 용량은 작게 유지
    => 이미지 스프라이트 기법, 이미지 용량 최적화, 최적화된 폰트 사용
  • 최소화된 CSS, JavaScript 파일을 사용하여 파일의 용량을 줄임
    => jQuery 참고, JS & CSS Minifier
  • 프레임워크는 필요한 것만 사용
    => 네이버와 다음 사이트 비교
• 계산 시간 : 동일한 계산을 얼마나 빠르게 수행하는가
  => 효율적이고 빠르게 계산을 수행할 수 있도록 코드 작성
  => 알고리즘의 영역 (JS 100제 96번 참고)
• 반응 시간 : 사용자의 행동에 얼마나 빠르게 반응하는가
  => 사용자의 행동에 얼마나 빠르게 반응 하는지를 판단
  => 반응 시간을 줄이기 위해 브라우저 렌더링 방식을 이해할 필요가 있다.
  • JavaScript보다는 CSS 애니메이션 활용하기
    => JavaScript로 스타일을 수정해도 결국 CSS 속성으로 업데이트가 된다.
  • Transform 속성 사용
  • repaint, reflow를 유발하는 속성은 사용을 지양
  • requestAnimationFrame() 메서드 사용하기
    => 브라우저가 애니메이션을 최적화하도록 하고, 비 활성 탭에서는 애니메이션이 동작하지 않도록 한다.
  • DOM 접근과 업데이트는 되도록 적게 한다.
    => DOM 접근은 가능한 좁은 범위에서 적게 사용
    => Document fragment를 사용해서 한 번에 DOM을 업데이트

브라우저 렌더링 방식

• 내용 추가하기

📎 메모리

메모리의 생명주기

가비지 컬렉션

• 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행
  => 도달 가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행

• 가비지 컬렉션은 엔진이 자동으로 수행
  => 이를 억지로 실행하거나 막을 수 없다.

• 객체는 도달 가능한 상태일 때 메모리에 남는다.

• 참조된다고 해서 도달 가능한 것은 아니다.
  => 서로 연결된 객체들도 도달 불가능할 수 있다.
  

도달 가능한 값

어떻게든 접근하거나 사용할 수 있는 값
=> 이 값은 메모리에서 삭제되지 않는다.

• 아래의 값들은 태생부터 도달 가능하므로 명백한 이유 없이는 삭제되지 않는다.
  => 이런 값은 루트(root)라고 부른다.
  • 현재 함수의 지역변수와 매개변수
  • 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수
  • 전역 변수
  • 기타 등등
• 루트가 참조하는 값 또는 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이다.

가비지 컬렉션 기본 알고리즘 : mark-and-sweep

• 가비지 컬렉션의 수행 단계
  • 가비지 컬렉터는 루트 정보를 수집하고 이를 mark(기억) 한다.
  • 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 mark 한다.
  • mark 모든 객체에 방문하고 그 객체들이 참조하는 객체도 mark 한다.
    => 한 번 방문한 객체는 전부 mark하기 때문에 같은 객체를 다시 방문하지 않는다.
  • 루트에서 도달 가능한 모든 객체를 방문할 때까지 위 과정 반복
  • mark 되지 않은 모든 객체를 메모리에서 삭제

참고링크

https://ko.javascript.info/garbage-collection

📎 좋은 습관 기르기

배열이나 객체를 불변하는 객체처럼 다루기

• 배열이나 객체는 불변하는 객체처럼 다루는 것이 데이터의 변화를 추적하는데 용이하다
• 만약 배열 데이터를 수정해야 한다면, 기존에 사용했던 원본 데이터는 그대로 두고 새로운 배열을 만들어 사용하기

엄격모드(strict mode) 사용

• 엄격모드로 사용할 것을 권장
  => 많은 에러를 예방할 수 있다.
• 엄격 모드의 특징
  • 선언하지 않은 변수에 값을 할당할 수 없다.
  • 읽기 전용 객체에 값을 할당하면 에러가 발생
    => 일반 모드에서는 조용한 에러
    => 무시 처리
  • 지울 수 없는 값을 지우려고 하면 에러 발생
    => 일반모드에서는 조용한 에러
    => 무시 처리
  • 함수 파라미터에 중복된 이름을 사용할 수 없다.

일치연산자 사용

// 일치연산자를 사용하지 않을 경우 아래와 같이 동작
1 == 1
1 == '1'
1 == 2
'' == false 
[] == false
null == undefined 

---

📝 모의 면접

📎 pixel ratio에 대해 설명해주세요.

내용 추가하기

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

• 압축의 두 가지 유형
  • 무손실(lossless) : 이미지를 압축해도 품질에 손상을 주지 않음
  • 손실(lossy) : 이미지를 압축하면 품질에 손실이 일어남. 지속적으로 lossy 형식으로 저장하면 이미지의 품질이 점점 나빠진다.

GIF

• 무손실 압축
• indexed color 속성을 가지고 있어서 최대 256가지의 컬러로만 저장 가능
• 애니메이션 가능, 투명 표현 가능

indexed color : indexed는 이미지가 저장할 수 있는 색상의 수가 제안되어 있음을 의미(일반적으로 256개)

JPEG/JPG

• 손실 압축(사람의 눈이 알아채지 못할 정보를 제거해 이미지를 최대한 압축)
• 투명 이미지 불가능

SVG(Scalable Vector Graphics)

• 확장 가능한 벡터 그래픽으로 XML 기반의 2차원 그래픽
  => 벡터 이미지 이므로 아무리 확대해도 이미지가 깨지지 않고 이미지 크기를 키워도 용량이 늘어나지 않는다.
• HTML 태그의 집합으로 이루어져 있어 CSS와 JavaScript로 컨트롤 가능
  => 코드로 이루어진 이미지이므로 복잡한 이미지일 수록 파일의 사이즈가 커진다.
  21.11.25 TIL - 이미지 포맷

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

21.11.04 TIL - 마진 겹침 현상

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

21.12.10 TIL - 이벤트 위임(event delegation)

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

21.12.03 TIL - 클로져(Closure)

📎 다음 코드 중 1번과 2번의 차이점을 설명해주세요.

function Car(){};
1. var car  = Car();
2. var car = new Car();

내용 추가하기

---

📝 프론트엔드 개발자로 성장하기 스프린트_4 with 임동준님

새롭게 생긴 팀, 그리고 감귤마켓 프로젝트의 좋은 점과 아직 막연한 점을 적어주세요

=> 새로운 팀이 생겨서 좋으면서도 어색합니다.

간단히 타이머 앱 만들기

=> 왜 이런 끔찍한...

갑작스러운 미니 프로젝트! 우리 팀이 마주한 문제는 어떤 것들이 있었나요?

=> 처음에 코드샌드박스 라이브 기능을 이용해보려고 하다가 시간이 많이 지났습니다.

상상해보세요. 팀 프로젝트를 하고나서 매우 만족스럽습니다. 과연 우리팀은 무얼 했기 때문에 만족스러울까요?

=> 문제가 있었을 때 서로 우당탕탕하면서 해결하려고 노력하는 모습을 볼 수 있었고, 그 결과물이 좋았을 때 만족스러울 것 같습니다.

만족스러운 모습을 위해 우리는 어떤 걸 시도해볼 수 있을까요?

=> 의견을 내는데 주저하지 않기, 역할 분담하기, 체크리스트 작성하기
=> 모두 협업을 위한 과정이므로 서로 이야기를 잘 들어주고, 도움 주기

---

마무리

• 프로젝트 팀이 구성되면서 기존에 속해 있던 클래스와 회고팀이 변경이 되었다.
  => 새로운 팀이 기대가 되면서도 어색해서 이걸 어쩌나 싶었는데 대화해보니 모두들 즐거웠다. 굳!
• 오랜만에 치킨 먹었다아아
  => 치킨 먹으면서 스프린트 회고 참여했는데 히히 기분 좋아버려어~
• 지금 진행하고 있는 것들 모두 잘 마무리 할 수 있게 노력해야지이