CaliforniaLuv
메모리 캐시와 디스크 캐시
웹 브라우저(클라이언트) 캐시에서는 메모리 캐시와 디스크 캐시가 분리되어 있는데 각각 어떤 차이가 있는지 알아보자. 메모리 캐시와 디스크 캐시 차이는 무엇인가? 개발자 도구창의 네트워크 태그를 확인해보면 위 사진과 같은 메모리 캐시와 디스크 캐시가 나타나 있다. 여기서 유독 둘의 차이가 있다면 용량(Size) ...
Hello, I’m Lee Jin-Sung
As a front-end developer, I focus on building impactful web experiences. I believe that UI/UX is the most essential element of a successful website.
Latest Posts
map 메서드의 async/await 비동기처리 사용법
각 배열 요소의 값에 따른 Restful API 요청이 필요한 구간에서 단순하게 map 메서드를 사용하면 __Promise {}__ 의 값이 콘솔로그에 출력된다. pending은 대기 상태를 의미하며 아직 아무런 실행 조차 이루어지지 않은 채 응답 데이터를 받은 것을 뜻한다. 문제가 발생한 코드 con...
useLayoutEffect는 어떤 용도로 쓰일까?
사내 직장 동료 코드를 리뷰하던 중 useLayoutEffect라는 React hook을 처음 보게 되었다. 해당 기능에 대해 어떤 용도로 사용되고 있는지 묻고 싶었지만… 요즘 동료 분 프로젝트가 너무 바쁜 관계로 직접 따로 조사 해보았다. useLayoutEffect는 어떤 과정으로 구현되는가? const div...
Scroll 애니메이션 트리거 구현
스크롤 이벤트 리스너를 통해 특정 엘리먼트 구간에 도달할 경우 애니메이션을 구현해야하는 경우가 있다. window.scroll(elementY) 보통 window.scroll 이벤트를 활용하여 각각 원하는 특정 엘리먼트 Y 값에 도달할 경우 애니메이션이 동작하도록 하기에는 불필요한 작업과 성능 면에서도 이슈가 있다. ...
ios에서 작동되지 않는 window.scrollTo()
데스크탑, 모바일, OS 환경 QA 테스트를 진행 도중 모바일 환경에서 엉뚱하게 스크롤 이벤트가 동작되는 버그를 발견하였다. 여러 방법을 시도 도중 믿었던 이벤트 트리거에 발등을 찍혀 기록하고자 한다. 원하는 위치에 스크롤 이벤트가 동작되지 않는 scrollTo window.scrollTo(0, Element_Id_...