과거의 이력/프론트엔드

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

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 .

프로젝트에서 미사용 패키지를 정리하면서 문득 package-lock.json이 정확히 어떤 역할을 하는지 궁금해졌다. 따라서 package-lock.json에 대해 정리해보려고 한다. package-lock.json 파일은 언제 생기는걸까? 새로운 패키지를 설치하면 package.json 파일에 해당 패키지의 버전 정보가 저장된다. package-lock.json은 mode_modules 폴더나 package.json 이 수정되고 생성될 때 자동으로 생성된다. package-lock.json 에는 의존성에 대한 정확하고 구체적인 정보를 담게된다. 즉, npm install 명령어를 수행할때 생성되는 파일인 것이다. 이렇게 package-lock.json 이 생성되면 npm install 명령어로 생성하는..