Don’t worry about failures

웹펙의 옵션들을 통해 번들 사이즈를 최적화를 하고자한다. 1. Webpack mode 1-1 none 모드를 설정하지 않은 경우에는 웹팩의 기본 동작에 따라 동작. 개발 모드나 프로덕션 모드와는 달리 추가적인 최적화나 디버깅 정보를 포함하지 않는다. 1-2. Development 개발에 초점이 맞춰져 있다. 코드 최적화 작업이 이루어지지 않음. 디버깅에 도움되는 추가 정보를 번들에 포함. 소스맵을 생성하여 원본 코드와 번들된 코드 간의 매핑을 제공하여 디버깅에 용이함. 빠른 빌드 시간을 위해 코드 최적화를 최소화하고, 개발자 경험을 향상시키기 위해 빌드된 번들에 추가 정보 포함. 1-3 Production 코드를 최적화하고 번들 파일 크기를 최소화하여 빠른 성능을 제공한다. 불필요한 주석이나 공백 등의 ..

Issue Infinity scroll을 구현하면서, 해당 row에 체크하는 기능을 추가. 리스트의 양이 적을 때는 문제 없이 빠르게 체크 영역이 표시가 되었다. But, 리스트의 양이 많아지면서 문제가 생겼다. 2000줄 정도 스크롤을 내리고 선택을 했을 떄 선택 영역의 반응이 매우 느린 이슈가 생겨버렸다. 원인 파악. 1. 클릭한 리스트에 대해 push, slice 같은 함수에서의 시간 복잡도 문제? 2. 렌더링 문제? 원인 1. console.time을 찍어 보았을 때 현 문제되는 이슈의 원인이 되지 않음. ( 물론 slice 부분에서 O(n)에 따라 선택한 리스트가 많아졌을 때 이슈가 존재할 수 있음. 이 부분은 별도록 처리 ) 원인 2. console.log를 찍어 보았을 때, 클릭한 row에 ..

Reflow, Repaint 그리고 Reflow, Repaint생략을 이해하기에 앞서 선행되어야 하는 개념이 있다. critical rendering path에 대한 개념이다. 이는 이전에 내용을 다뤘기에 생략하도록 한다. (https://sangwonny.tistory.com/7?category=948510) critical rendering path = > DOM + CSSOM => Render Tree => Layout => Paint => Composite Reflow CSSOM, render tree, layout, paint 과정을 다시 그려줌 강제로 Reflow가 발생하는 현상들의 원인 1. 화면 리사이징 : 브라우 창의 크기를 조정하거나 모바일 기기의 화면 회전과 같이 뷰포트 크기가 변경되..