프론트엔드 정복하기

최수형 | 마이크로프로텍트 > 테스트 코드 작성하시나요?) >> 잘 안하게 되는 것 같아요. 왜 안하게 되는가?) >> 너무 힘들고 일정에 치이다보니 안 하게 된다. 왜 어려운가?) >> Testable한 코드가 아니기 때문에 어떻게 Testable한 코드를 작성할까?) >> 관심사의 분리 Separation of Concerns 를 지키자. *이것을 지키지 않았을 때 => 거대한 진흙 덩어리 Big Ball of Mud가 되기 쉽다. SRP | Single Responsibility Principle SRP는 단일 책임 원칙이라고 한다. 이게 과연 이 컴포넌트의 관심사가 맞는가, 계속 되물으면서 관심사의 분리를 이루는 것이다. 하나의 컴포넌트가 응집된 책임을 지도록 노력하면서 작게 쪼개는 연습하는 게 ..

2020년 10월 20일 React 17버전이 릴리즈됐다. 해당 버전은 새로운 기능보다는 React를 더 쉽게 할 수 있도록 하는 데 중점을 두고 출시되었다. 점진적 업그레이드 React 17버전은 점진적인 React App 업그레이드를 가능하게 한다. 보통은 예를 들어 React15버전을 16버전으로 업그레이드할 때에 React 전체 앱을 한번에 업그레이드시키는 방법을 취한다. 현재도 이 방법이 가장 이상적인 방법이라 생각하며 이것을 추천한다. 반면 유지보수가 더딘 경우, 즉 한 번에 1버전 그 이상으로 업그레이드를 하는 경우에는 앱의 일부는 17 하위 버전으로 유지하는 것이 더 효율적일 수도 있다. 문제는 이 방법을 사용하게 되면 로딩 속도가 느리거나 이벤트에 문제가 야기될 수 있다. React 17..

가장 최신의 릴리즈 버전이었던 Webpack4 버전은 2년(2018년) 전이 마지막이었다. 이에 이어 5번째 Webpack 릴리즈판이 2020년 10월 10일 공개됐다. Webpack5는 다음 5가지 사안을 중점적으로 변화를 꾀했다. 1. Faster builds with persistent caching (영구적인 캐싱으로 더 빨라진 빌드) : an opt-in filesystem cache(옵트인 파일시스템 캐시)를 제공한다. 이에 빌드 속도가 빨라졌다. 2. Smaller bundle sizes (더 작은 번들 사이즈) Tree Shaking(dead code elimination이라고도 함)이 개선됐다. Tree Shaking이란 사용하지 않는 코드를 제거한다. 버전 5에서는 이 기능이 더 수월해..

1. content-visibility 속성이란? 2020년 8월 25일, Chrome 85에 새로운 CSS 속성가 추가됐다. 가장 핵심적인 효과는 **화면 밖에 있는 컨텐츠의 렌더링을 건너뜀으로써 페이지 초기 로드 시간을 획기적으로 줄인다는 것이다. 더 구체적으로 말하면 웹브라우저(또는 앱)가 초기에 페이지를 로딩할 때에 **화면 밖의 컨텐츠에 대해 일부의 렌더링 작업만을 하는 것이다. 이는 content-visibility : auto ; 값을 입력함으로써 가능하고, 페이지 초기 로딩 시간이 단축되는 효과를 갖는다. 아래와 같이 실제 실험 결과 렌더링 성능이 7배 향상됐다는 것을 확인할 수 있다. **화면 밖 = off-screen : 사용자 액션, 즉 선택되거나 포커스를 받는 등의 작용이 이뤄지지 ..