이미지 최적화 기법
WebP는 사파리 구 버전에서 지원 ❌
jpg 이용: resize, compress를 이용해 용량을 줄여준다.
클립아트, 라인아트와 같은 색상 수가 적은 이미지
png 이용: palette 줄여 용량을 줄여준다.
gif ❌
색상 깨지고 용량도 png-8보다 크다.
번외
svg 파일 확인이 필요하다. png를 그대로 가져다 썼다던지 등...
그러면 svg 파일을 사용하는 의미가 없다.
날짜, 시간
<time>
HTML time 요소
시간의 특정 지점 또는 구간을 나타낸다. datetime 특성 값을 지정해 적절한 검색 결과나 알림 같은 특정 기능을 구현할 때 사용
day.js
날짜, 시간 라이브러리
이전에 프로젝트를 진행할 때 날짜 값을 받아오면 문자열을 자르고 바꾸고 별 로직을 짰는데... 그 때는 라이브러리를 활용하는 방법을 몰랐다. day.js는 날짜, 시간 출력 편하게 할 수 있는 라이브러리
사용 방법은 공식 홈페이지 Docs 참고
https://day.js.org/
유용한 라이브러리
- react-use: Hooks 라이브러리
- store.js: localStorage 관련 라이브러리
- react-slick: carousel 라이브러리
TS 맛보기
- 입력/반환 type 지정
- interface / type
- extends (interface 확장)
- JSON to TS extension
그동안 미뤄왔던 TS를 배워보자...
호롱이 아빠입니다 🐱