CaliforniaLuv
useLayoutEffect는 어떤 용도로 쓰일까?
사내 직장 동료 코드를 리뷰하던 중 useLayoutEffect라는 React hook을 처음 보게 되었다. 해당 기능에 대해 어떤 용도로 사용되고 있는지 묻고 싶었지만… 요즘 동료 분 프로젝트가 너무 바쁜 관계로 직접 따로 조사 해보았다. useLayoutEffect는 어떤 과정으로 구현되는가? const div...
Hello, I’m Lee Jin-Sung
As a front-end developer, I'm responsible for web development. These days, I think UX/UI is important in web site.
Latest Posts
Scroll 애니메이션 트리거 구현
스크롤 이벤트 리스너를 통해 특정 엘리먼트 구간에 도달할 경우 애니메이션을 구현해야하는 경우가 있다. window.scroll(elementY) 보통 window.scroll 이벤트를 활용하여 각각 원하는 특정 엘리먼트 Y 값에 도달할 경우 애니메이션이 동작하도록 하기에는 불필요한 작업과 성능 면에서도 이슈가 있다. ...
ios에서 작동되지 않는 window.scrollTo()
데스크탑, 모바일, OS 환경 QA 테스트를 진행 도중 모바일 환경에서 엉뚱하게 스크롤 이벤트가 동작되는 버그를 발견하였다. 여러 방법을 시도 도중 믿었던 이벤트 트리거에 발등을 찍혀 기록하고자 한다. 원하는 위치에 스크롤 이벤트가 동작되지 않는 scrollTo window.scrollTo(0, Element_Id_...
React 자동 배칭 (auto batching)
React 18 버전 이후부터 자동 배칭(auto batching)을 통해 렌더링 성능 개선에 향상 되었다. 18 버전 이전에 사용하지 않은 React 이용자들은 어떤 작동 원리를 통해 렌더링이 되었는지 모르기 때문에 다뤄보고자 한다. 배칭은 무엇인가? 배칭이란 React Hook인 state의 다수 요소들이 한꺼번...
CleanCode 변수
최근 Robert C. Martin’s의 Clean Code을 읽다보니 나의 근본도 없는 엉망진창의 코드에 회의감이 빠져 들었다. 계속 다음 장을 넘길 때 마다 밥 아저씨의 비난이 담긴 코드는 보기 고통스러우며 내가 그동안 더닝 크루거 효과 그래프에서 우매한 봉우리 단계에 있다는 것을 깨달았다. 지금이라도 개선하기 위해 ...