https://beomy.github.io/tech/browser/reflow-repaint/ [Browser] Reflow와 Repaint브라우저의 화면이 수정될 때, 렌더링 과정을 최적화 하는 방법에 대해 이야기 할 것입니다.beomy.github.io

실제 실행 시간을 줄이기 (노란색 막대의 시간 줄이기) 렌더링 성능을 개선하는건 사실 가장 핵심적인 최적화 방법 중 하나에요.브라우저의 렌더링 성능은 "단위 작업"들이 얼마나 빨리 처리되는지에 따라 달라져요. 개발자도구의 그 노란색 막대는 "렌더링 작업을 처리하는 시간"을 나타내는데, 이 막대가 짧을수록 브라우저가 더 빨리 화면을 갱신할 수 있습니다.작업을 병렬화하거나, 작은 작업으로 분리해서 한 번에 처리되는 양을 줄이면, 막대가 줄어드는 효과를 볼 수 있어요.최적화 기법으로는 debouncing, throttling, lazy loading 같은 방법들이 있어요.특히 중요한 건, 실제로 한 번에 처리하는 작업량을 줄이는 것입니다.예시: 대용량 데이터를 렌더링할 때, 한 번에 데이터를 모두 그리는 대신..

requestAnimationFrame이 뭐지?requestAnimationFrame은 웹 개발에서 애니메이션을 더 부드럽게 만들기 위해 자주 쓰이는 브라우저 API야.requestAnimationFrame은 브라우저에게 다음 "화면 갱신" 때 호출될 함수를 예약하는 함수야.즉,"브라우저가 화면을 그릴 준비가 됐을 때 콜백을 실행해줄게!"라고 예약하는 거야.즉, 애니메이션이나 화면 갱신이 최적화되도록 도와주는 API인것. 반면에, 예를 들어 scroll 이벤트를 직접 처리하거나, mousemove 같은 걸 직접 받으면?사용자가 마우스를 엄청 빠르게 움직이면스크롤하면→ 엄청나게 많은 이벤트가 초당 100번, 200번, 심지어 300번도 발생할 수 있어.➡️ 이 많은 이벤트마다 바로바로 DOM 조작을 하면,..

https://www.zerocho.com/category/HTML&DOM/post/59e73a7669a8ed0019079d44 https://www.zerocho.com/category/HTML&DOM/post/59e73a7669a8ed0019079d44 www.zerocho.com .

https://velog.io/@gillog/Java-%EC%98%88%EC%99%B8%EC%B2%98%EB%A6%AC-Exception [Java] 예외처리 (Exception) 에러(Error)란 컴퓨터 하드웨어의 오동작 또는 고장으로 인해 응용프로그램에 이상이 생겼거나 JVM 실행에 문제가 생겼을 경우 발생 하는 것을 말하며, 이 경우 개발자가 대처할 방법이 극히 제한 velog.io

gridOptions 객체에 suppressNoRowsOverlay 키에 true값을 부여하면 됨. gridOptions의 api를 사용해 처리해도 되지만, 나는 초기화될때 처리하면 됐기에 디폴트 옵션값으로 설정했다. 참고링크 https://stackoverflow.com/questions/51070840/how-to-avoid-the-no-rows-message-while-loading-data-in-ag-grid How to avoid the "no rows" message while loading data in ag-grid I have an ag-grid which pulls data from the backend via restful call and routed through NGRX patte..

vue.js에서 v-model을 사용하여 셀렉스박스를 생성할때, 'default' 또는 'checked'와 같은 속성은 무시된다. (아래 글 참고) 때문에 디폴트 값은 해당 속성을 사용하는것이 아닌, v-model에 값을 할당하여 디폴트값을 지정해주는 방식으로 사용되어야 한다. 🎵 예시코드 /** template */ {{ list.text }} /** 변수 */ sampleList = [{ text: '선택', value: 0 }, { text: '정민', value: 1 }] // 셀렉트박스 리스트 sampleModel = 1 // 1로 하면 '정민'이라는 리스트가 선택됨 만약 기본으로 선택 을 선택하고 싶다면, 예시코드 기준으로 v-model 값에 0을 할당해주면 된다!

https://hhyemi.github.io/2021/06/09/arrow.html JavaScript - 화살표 함수와 일반 함수의 차이 - CODE:H 화살표 함수(Arrow Function)란 화살표함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한표현으로 간단하게 사용가능하다. function fun() { // 일반함수 ... } const arrFun = () => { // hhyemi.github.io