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과 기타 내용에 관해 이야기를 해볼까 합니다.이미지와 같이 사이즈가 큰 데이터를 로딩할 때, 사용자의 브라우저 화면에 나타나지 않은 이미지까지 로딩을 하면 페이지의 로딩이..