Pewwwjjj

나는 왜 이 내용을 글로 쓰는가?얼마 전에 친구가 package-lock.json에 대해 쉽게 설명을 해달라고 물어보더군요.하지만, package-lock.json이 어떤 일을 하는지도 모르고, 해당 파일을 발견하면 무조건 지우고 봤던 제가 설명할 수 있을리가요..그래서 이번 기회에 한 번 관련 내용들을 정리해볼까 합니다. 아니, 그 전에 package.json은 뭔데?package.json은 npm에서 핵심적인 역할을 하는 친구입니다!이름에 걸맞게 각종 npm 패키지들에 대한 정보들과, 의존하고 있는 버전에 대한 정보를 담고 있는...그냥 프로젝트에 대한 전체적인 정보를 담고 있는 JSON 형태의 파일이라고 할 수 있습니다.필수적으로 name과 version에 대한 정보가 명시되어야 하며, 이 항목들이..

우리는 흔히 웹 페이지의 성능을 향상시키고자 할 때 3R을 얘기합니다. 1. Request 개수 줄이기 2. Resource 사이즈 줄이기3. Rendering 시간 단축 Webpack을 통한 모듈 번들링, 이번에 얘기해 볼 Lazy Loading이 1번, Webpack-Minify, Obfuscation, Tree-Shaking, Code-Splitting, 이미지 최적화가 2번,CRP 최적화, Reflow의 최소화, 부드러운 애니메이션 등이 3번 예시에 속한다고 볼 수 있습니다. 이번 포스트에서는 1번 예시 중 Lazy Loading과 기타 내용에 관해 이야기를 해볼까 합니다.이미지와 같이 사이즈가 큰 데이터를 로딩할 때, 사용자의 브라우저 화면에 나타나지 않은 이미지까지 로딩을 하면 페이지의 로딩이..

Throttle과 Debounce가 만들어진 이유나 어떠한 동작의 개념을 가지는 지는 모두 아실 것이라 생각합니다. 그래도 한 번 정리해보자면, Throttle은 이벤트를 일정한 주기마다 (설정한 Milliseconds) 발생하도록 하며, Debounce는 마지막으로 함수가 호출된 시점에서 특정 시간이 지난 후 (설정한 Milliseconds)하나의 이벤트만 발생하도록 하는 기술입니다. 이 두 기술 모두 이벤트 실행에 특정 제약을 걸어 과다한 이벤트 로직 실행을 방지하고, 궁극적으로 웹 페이지 성능의 향상을 위해 나타났다고 볼 수 있습니다. 이번 시간에는, 간단하게 이 둘에 대해 구현을 해보고, 어떻게 사용될 수 있는지 예시를 들어보도록 하겠습니다. 코드는 간단합니다. 자바스크립트의 Date 객체를 이용..