<aside> ⭐ 학습목표

• 실전 리팩토링
  • 포트폴리오 관리 시 주의사항
  • 각종 최적화 기법
  • 라이브 리팩토링 </aside>

<aside> 💬 TIL

취준 중이라 그런지 포트폴리오 관련 강의는 더 집중이 되고 재미있었다. 이미지나 폰트 최적화 부분도 지난 시간 했던 성능 최적화 보다는 실질적으로 좀 더 와닿았던 것 같다.

• 이미지 저장시 몇배수로 해야 적당한지 궁금했었다. 부트캠프에서 수업을 듣는 당시 관련 질문을 한 적이 있었는데, 명확한 답변을 듣지 못했다. 당시 이미지를 2배수로 저장하면 용량이 커지고, 정사이즈 저장시 이미지가 깨질 수 있을 것 같은데 어떻게 저장해야 좋을지 질문했던 적이 있었다. 당시에는 그냥 정사이즈로 저장해도 문제없다는 답변을 들었던 것 같다. 하지만 정사이즈 저장시 svg를 제외한 jpeg나 png는 이미지가 깨지는 현상이 있었기 때문에 사실 내 궁금증이 명확히 해결되지는 않았었다. 이번 강의에서 크기는 2x, .webp 형식을 권장했는데 .webp 형식으로 변환하고 보니 용량이 많이 줄어드는 것을 알 수 있었다. 앞으로는 이 방법을 고려해보아야 겠다는 생각을 했다. </aside>

📖 table of contents

1. 포트폴리오 관리 시 주의사항

1. default branch에서 build 확인
2. lock 파일은 하나만!
   1. dependency 파악이 어려움
   2. 패키지는 하나만 사용하기

      1. 팀 프로젝트라면 팀원들과 맞출 것

      2. 패키지 매니저 별 차이 없음 → 체감할 만큼의 프로젝트를 개인적으로 하기 어려움

         🔗 https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm

2. 최적화

• 최적화 시, 꼭 필요한 것인지 확인
• Lighthouse 점수는 올라갔는데, 화면은 오히려 느릴 수 있다.

▪️ 이미지 최적화

1. 용량이 너무 크면 오래걸린다.
   1. 로딩도 오래걸리고
   2. 브라우저 과부하 걸릴 수 있다.
      1. 체감되는 정도는 아니지만, 최적화 관점에서 볼 때는 좋지 않다.
      2. 만약 화면에 보이는 모든 이미지가 오버 사이즈라면?
2. 권장하는 크기는 2x
   1. 윈도우는 굳이 2x 필요없지만
   2. 맥의 retina display에서 이미지가 깔끔하게 보이려면 2x를 넣어줘야 한다.
3. 크기를 줄이는 방법

   1. 디자이너가 있다면 이미지 요청

   2. 서버에서 스토리지에 화면에서 필요한 사이즈별로 이미지를 가지고 있어야 한다.

      1. 같은 이미지가 여러 화면에서 사용되면 해당 영역에 맞는 크기의 presigned-url을 넘겨준다.

      

   3. .webp

      1. size는 2배수로 저장하고, webp로 변환하여 사용한다. webp는 용량을 많이 줄일 수 있다.

   4. 파일 포맷 (상황에 따라 다른 포맷을 사용하여야 한다.)

      1. svg 아이콘 등의 작은 이미지
         1. 강사님 개인적으로는 64*64 보다 작으면 svg 선호
         2. 임의의 기준일 뿐 상황에 따라 개발
      2. png 스크린샷 처럼 세부사항이 잘 보여야 하는 경우
         1. jpeg와 png의 차이점도 이해해야 함
         2. jpeg는 용량이 작은 대신 품질이 손상됨
            1. 백엔드에서 비용이야기 하면, 스토리지 비용 계산해보면 별로 차이 안난다고 함.. 😅
      3. webp 구글에서 권장하는 파일 포맷
         1. 확실히 용량 측면에서 유리하며, 로드가 빨리 됨

▪️ 폰트 최적화