2022-04-14 TIL

Fact

• 알고리즘 3문제 풀기
• we-study 프로젝트 이미지가 짤리는 문제 파이어베이스 스토리지 사용해서 이미지 받아오기
• useMemo, useCallback, react.memo 잘 사용해서 최적화하기
• 기초부터 완성까지 프론트엔드 책 보면서 최적화할 방법 찾아보고 직접 해보기

Feelings

• 알고리즘 문제를 다시 풀기 시작했는데 역시나 너무 어렵다..
• 하루 목표를 너무 크게 잡았나..? 해당 목표를 못끝냈다

Findings

• translate()은 CSS transform의 값입니다. transform이나 opacity를 변경해도 브라우저의 reflow나 repaint가 다시 발생하지 않고 컴포지션만 실행되는 반면, 절대 위치를 변경하면 reflow가 발생합니다. transform을 사용하면 브라우저에서 이 요소를 위한 GPU 레이어가 생성되지만, 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 translate()가 더 효율적이며, 매끄러운 애니메이션을 위한 페인트 시간이 짧아집니다.
• This는 함수를 호출할 때 결정되는 것이다. 전역범위에서 사용될 때 this는 전역객체를 가르킨다. 함수에서 사용될때도 전역객체를 가르킨다. 객체에 속한 메서드에서 사용될때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킨다. 생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킨다.

Future Action

• 책 꾸준히 읽기
• 스터디 꾸준히 참여하기
• 알고리즘 문제 꾸준히 풀기