0816 - 0822
0821
NPM
Node Package Manager
- Node.js를 통해서 동작하는 여러 프로그램을 관리해주는 시스템
- 검색, 설치, 삭제, 업데이트를 할 수 있다.
- Node.js를 설치하면 같이 설치된다.
npm을 통해서 설치하는 프로그램 종류
- 독립적으로 실행되는 command line 프로그램
- 부품으로써 다른 소프트웨어의 일부로 사용되는 프로그램
기본 명령어
패키지 검색과 설치
- 패키지 검색은 npmjs.com에서 한다.
npm install 패키지이름- 현재 위치하고 있는 디렉토리에서 부품으로 패키지를 사용할 경우
npm install -g 패키지 이름- 어디에서 실행시키건 동작하는 독립적인 프로그램으로 설치할 경우
npm install --save-dev 패키지명- package.json 파일의 devDependencies 항목에 추가되도록 설치한다.
npm i -D패키지명으로 축약 가능
패키지 목록보기와 업데이트 그리고 삭제
npm list- 패키지 리스트 출력npm list -g- 전역적인 리스트를 보여주는 명령어npm update 패키지이름- 패키지 업데이트npm uninstall 패키지이름- 패키지 삭제
package.json
수많은 패키지를 다운받아보면 관리가 어려워진다.
그래서 프로젝트마다 package.json 파일을 만들어서 패키지 목록 및 버전을 관리한다.
package.json 파일
설치된 패키지를 dependencies 항목에서 관리한다.
node-modules 폴더
설치한 패키지가 실제로 저장되어 있는 폴더이다.
설치한 패키지가 의존하는 다른 패키지도 함께 설치되어 저장된다.
package-lock.json 파일
설치한 패키지 + 의존하는 패키지 항목을 모두 관리한다.
package.json 파일을 사용한 설치
npm install
package.json 파일이 저장된 폴더에서 명령어를 실행하면, dependencies 항목에 기록된 패키지들을 모두 자동으로 설치해준다.
package.json > scripts 실행 명령어
package.json 파일의 scripts 항목에 다양한 명령어를 설정해두고 콘솔에서 실행할 수 있다.
- start 명령어에 설정된 코드는
npm start로 실행할 수 있다. - test 명령어에 설정된 코드는
npm test로 실행할 수 있다. - 그 외 명령어에 설정된 코드는
npm run 명령어로 실행해야 한다.
0822
이미지 최적화
이미지 최적화란?
웹사이트나 블로그에 업로드된 이미지를 SEO 및 웹사이트 방문율 증가에 도움이 되도록 여러 가지 수정을 하는 것
이미지 최적화를 해야 하는 이유
- 중요한 정보를 제공하는 역할을 한다.
- SEO에 최적회된 이미지는 사용자 경험에 긍정적인 역할을 한다.
- 이미지 최적화를 통해 사용자의 웹사이트 참여율을 높이고, 이를 통해 사이트의 조회수가 향상되는 효과가 있다.
- 웹페이지의 로딩 속도를 높인다.
- 이미지의 크기를 줄이는 것은 로딩속도로 직결되는 중요한 부분이다.
- 검색 결과에서 상위권에 올라올 수 있도록 도와준다.
- 서버의 저장공간이 적게 필요하게 되어, 비용 절감으로 이어진다.
마크업의 이미지 최적화
<img /> 요소는 성능이 뛰어나며 콘텐츠를 다운로드하고 디코딩하고 렌더링한다.
다양한 기기에 이미지를 포함시키는 것은 데스크톱과 다르지 않고, 몇 가지 사소한 조정만으로도 뛰어난 환경을 만들 수 있다.
이미지에 상대 크기 사용
img,
embed,
object,
video {
max-width: 100%;
}
- 이미지에 대해 상대 크기를 사용하면 실수로 이미지가 컨테이너를 overflow 하는 것을 막을 수 있다.
- CSS에서는 콘텐츠가 컨테이너를 overflow하도록 허용하므로, 이미지와 기타 콘텐츠가 overflow 되는 것을 막으려면
max-width: 100%를 사용할 필요가 있다.
높은 DPI 기기에서 srcset로 이미지 개선
<img src="image.png" srcset="
secret속성은 ‘이미지 소스의 세트’라는 의미로,img요소의 동작을 향상시켜주며, 다른 기기 속성에 대해 여러 가지 이미지 파일을 쉽게 제공활 수 있다.srcset을 사용하면 브라우저가 기기 특성에 따라 최적의 이미지를 선택할 수 있다.- 예를 들어, 2x 디스플레이에서 2x 이미지를 사용하거나, 향후에 제한된 대역폭 네트워크의 경우 2x 디스플레이서 1x 이미지를 사 용한다.
srcset을 지원하지 않는 브라우저에서는src속성에 의해 지정된 기본 이미지 파일을 사용한다. 이러한 이유 때문에, 성능에 상관없이 모든 기기에 표시될 수 있는 1x 이미지를 항상 포함하는 것이 중요하다.srcset이 지원되는 경우 모든 요청을 수행하기 전에, 쉼표로 구분된 이미지/조건 목록이 분석되며, 가장 적절한 이미지만 다운로드되어 표시된다.
picture가 있는 반응형 이미지에서의 아트 디렉션
- 기기 특성에 따라 이미지를 변경하려면(아트 디렉션)
picture요소를 사용한다.picture요소는 기기 크기나 해상도, 방향에 따라 여러 버전의 이미지를 제공하기 위한 선언적 솔루션을 정의한다. - 이미지 소스가 여러가지 밀도로 존재하는 경우 또는 반응형 디자인에 따라 약간 다른 이미지가 표시되는 경우
picture요소에 여러source요소를 포함하는 방법으로 미디어 쿼리 또는 이미지 형식에 따라 다른 이미지 파일을 지정할 수 있다.
<picture>
<source media="(min-width: 768px)" srcset="image.jpg, image-2x.jpg 2x" />
<source
media="(min-width: 360px)"
srcset="image-small.jpg, image-small-2x.jpg 2x"
/>
<img src="image-fb.jpg" srcset="image-fb-2x.jpg 2x" alt="image description" />
</picture>
- 위의 예시에서 브라우저 너비가 768px 이상이면 기기 해상도에 따라 image.jpg 또는 image-2x.jpg가 사용된다.
- 브라우저 너비가 360px에서 768px 사이이면 다시 기기 해상도에 따라 image-small.jpg 또는 image-small-2x.jpg가 사용된다. 360px 미만인 화면 너비의 경우 picture 요소가 지원되지 않는 이전 버전과의 호환성을 위해, 브라우저는 대신 img 요소를 렌더링해야 한다.
상대 크기의 이미지
이미지의 최종 크기를 알 수 없는 경우, 이미지 소스의 밀도 설명자를 지정하기 어려울 수 있다. 브라우저의 크기에 따라 브라우저의 비례 너비가 유동적으로 변하는 경우 특히 더 어렵다. 고정된 크기의 이미지와 밀도를 제공하는 대신, 이미지 요소 크기와 함께 w 디스크립터를 추가하여 각 이미지의 크기를 지정할 수 있다.
<img
src="image-200.jpg"
sizes="50vw"
srcset="
image-100.jpg 100w,
image.jpg 200w,
image-400.jpg 400w,
image-800.jpg 800w,
image-1000.jpg 1000w,
image-1400.jpg 1400w,
image-1800.jpg 1800w
"
alt="image description"
/>
- 브라우저 너비와 기기 픽셀 비율에 따라 뷰포트 너비의 절반인 이미지를 렌더링하므로, 브라우저 창 크기에 관계없이 올바른 이미지를 선택할 수 있다.
반응형 이미지에서 중단점 고려
많은 경우에, 사이트의 레이아웃 중단점에 따라 이미지 크기가 변경될 수 있다. 예를 들어, 작은 화면에서는 뷰포트의 전체 너비에 맞게 이미지가 확대되는 것이 좋지만, 큰 화면에서는 이미지가 작은 부분만을 차지해야 한다.
<img
src="400.png"
sizes="(min-width: 768px) 25vw, (min-width: 360px) 50vw, 100vw"
srcset="
100.png 100w,
200.png 200w,
400.png 400w,
800.png 800w,
1600.png 1600w,
2000.png 2000w
"
alt="image description"
/>
- 브라우저 너비가 768px 이상인 경우 이미지는 뷰포트 너비의 25%가 된다.
- 360px ~ 768px인 경우 이미지는 뷰포트 너비의 50%가 된다.
- 360px 미만인 경우 이미지는 전체 너비가 된다.
WebP 파일을 이용한 이미지 최적화
WebP 파일이란?
- 구글이 웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥해 개발한 이미지 포맷
- 기존 웹사이트에서 널리 사용되고 있는 jpeg, png, gif 등을 대체하기 위해 개발
- 구글이 이러한 포맷을 개발 및 배포한 목적은 전 세계의 검색 및 사이트 접속 속도가 증가할 수록 구글의 광고 수입 또한 증가하기 때문
WebP 파일을 사용해야 하는 이유
- 기존 Jpeg 파일 대비 39.8% 압축률이 개선되었으며, 압축률 또한 조절할 수 있다.
- 손실방식, 비손실방식, 애니메이션, 투명 알파채널 등 모든 기능을 제공하기 때문에 어떤 포맷으로 저장해야 할 지에 대해 고민할 필요가 없다.
- 애니메이션 GIF의 제약에서 벗어나 색상 제한 없이 최대 16,777,216 컬러를 사용할 수 있다.
Can I use WebP 결과
- IE, Safari 등의 브라우저에서 지원하지 않는다.
- 그렇기 때문에 무작정 파일을 WebP 파일로 변경하면 화면에 제대로 렌더링 되지 않는 낭패를 겪을 수 있다.
WebP 파일 활용
- WebP 파일을 모든 브라우저가 지원하지 않기 때문에 CSS의
background-image속성에 WebP 파일을 활용하기 위해서는 자바스크립트의 도움을 받아야 한다. - HTML 상에서 WebP 파일을 사용하기 위해서는
picture태그를 이용하는 것이 좋다.
<picture>
<source srcset="some-image.webp" type="image/webp" />
<img src="other-image.jpg" />
</picture>
picture태그는source태그와 함께 최적화된 이미지 리소스 로딩을 할 수 있도록 한다.- 해당 브라우저가 WebP 파일을 지원하지 않는다면, jpg 파일로 로딩한다.