| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 이벤트 루프
- JavaScript Deep Dive
- 프론트엔드
- 알고리즘
- next/Image
- CSS
- 코드스테이츠 메인프로젝트
- 정규표현식
- 자바스크립트
- 자료구조
- OSI 7계층
- Node js
- MUI
- 유데미
- javascript
- 백준 nodeJS
- input class
- 백준
- 코드스테이츠
- 페이지네이션
- kakao map api
- sort
- 배열
- 재귀함수
- react js
- primitive type
- 코딩테스트
- 버블정렬
- Native select
- nodejs
- Today
- Total
목록next/Image (2)
신입 개발자에서 시니어 개발자가 되기까지
[메인 프로젝트] 웹사이트 최적화 (feat. lighthouse)
lighthouse 성능분석 결과 성능 개선을 위해 했던 작업들 1.이미지 최적화 2.JSON데이터 최소화 3.데이터 캐싱 4.중복코드 최소화, 안쓰는 코드 삭제 이미지 최적화 cheerio 라이브러리를 이용해서 상품 url을 크롤링하여 상품이미지를 받아오고 있는데, 이 이미지의 크키가 개당 100kb 정도 된다. 처음엔 Next/image를 사용하지 않고 최적화를 해봤다. 참고 블로그 : https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization 결론적으로는 Next/image를 사용해서 최적화를 했다. 이미지에 사이즈를 미리 알려줘서 브라우저가 필요한 사이즈만큼만 이미지를 다운로드 해야하는데, view포트에 따른 사이즈를 지정해놔도 파..
리액트 컴포넌트 footer import { ReactComponent as LogoFooter } from '../../../public/logos/logoFooter.svg'; import React from 'react'; import Link from 'next/link'; const Footer = () => { return ( © 2023 · All Rights Reserved Team : 나누조, Team Leader : 김형진 BE developers : 최지현, 박지윤, 김연주 FE developers : 송현우, 박경현, 김은수, 김형진 Github : https://github.com/codestates-seb/seb41_main_024 );..