Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- frontend
- Flutter
- CSS
- Component
- form
- react
- node.js
- Mongoose
- 자바스크립트
- ES6
- GRID
- graphQL
- nodejs
- MongoDB
- backend
- DART
- TypeScript
- express
- NextJs
- ECMAScript
- 리액트
- CLONE
- Session
- JavaScript
- clonecoding
- javscript
- HTML
- API
- heroku
- pug
Archives
- Today
- Total
목록최적화 (2)
Enjoy Programming
[작성해야할 포스트] Code splitting, Chunk load error, Firebase Content-Disposition 등등...
1. Code split으로 최적화 과정중 맞닥뜨린 문제 및 해결과정 그리고 퍼포먼스 향상 2. 빌드 배포후 chunk load 에러 현상 발생. (code split, cache, webpack 등등 ) - nginx location 문제 - service worker 문제 3. firebase file download시 파일명 원본명으로 받기 작업. 위 사항은 최근 해결한 문제들과 해결된듯 한 문제들이다. 시간 날때 작성하자.. 근데 플러터 배우는데 재미있다. 바쁘다 육아하랴 일하랴 공부하랴 근데 재미있긴 하다.. 언제 개인 프로젝트 들어가지..
JavaScript/React
2023. 3. 1. 21:52

nextjs를 사용하면서 img 태그를 사용하면 waning이 뜬다 next/image를 사용해달라고 nextjs는 기본적으로 이미지 최적화의 기능을 제공한다. 그 중 기본적으로 들어가는 lazy loading 기능이 있는데 참 유용하다 예를 들어 페이지를 로드하면 해당 페이지의 이미지를 전부 로딩 하는것이 아닌 viewport상에 나타는 이미지만 로드한다 그리고 로드하기전 alt를 제공해서 blur처리된 blob 이미지를 먼저 보여줌으로써 느려보이지 않게 해주고 사이트 최적화를 진행해준다. 간단히보면 next js showcase 페이지를 보자 먼저 로드된 이미지들이 있고 network를 비워줬다. 그리고 slow 3g로 변경 후 스크롤을 내려보면 그다음 보여줄 이미지를 다운로드 하기 시작하고 로드되기..
JavaScript/NextJS
2022. 7. 17. 22:16