본문 바로가기

성능 최적화 2

[리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3.
[자바스크립트] 자바스크립트의 동작에 대하여 #1(feat.엔진, 런타임, 콜스택) 저번에 인터뷰의 질문 '자바스크립트는 어떻게 동작하는가?'에 대한 답을 해보았다. [인터뷰] 자바스크립트의 내부 동작 원리에 대해서 설명하라 자바스크립트... 처음 입사하고 맞이한 이 친구,,, 일 년을 넘게 보고 있자니 이젠 익숙을 넘어 친근하기까지 한 언어가 되어버렸다. 하지만 이제껏 내부 구조를 살펴볼 생각보다는 var 부터 선언 all-dev-kang.tistory.com 그래서 이번에는 좀 더 깊숙이 들어가 보고자 한다. 일단 이 글은 blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf 를 토대로 작성한 것이다. 자바스크립트가 단일 쓰레드(single-threaded)이고 콜백 큐(callback queue)를 이.. 2021. 3. 26.