사놓지(2), ES21 논리연산자, Lazy loading, base_url 등

gicomong·2021년 4월 6일
4
post-thumbnail

⚠ _이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다_🙇🏼


1. ES21, 논리연산자

(1) &&=

: 첫 번째 변수가 true이면, 두 번째 변수를 할당한다.

//before
let one = true;
let two = 13;

if (one) {
  one = two;
}
console.log(one); //13
//after
let one = true;
let two = 13;

one &&= two;
console.log(one); //13

(2) ||=

: 첫 번째 변수가 false이면, 두 번째 변수를 할당한다.

//before
let one = null;
let two = 13;

if (one) {
  one = two;
}
console.log(one); //13
//after
let one = null;
let two = 13;

one &&= two;
console.log(one); //13

(3) ??=

: 첫 번째 변수가 null 또는 undefined이면, 두 번째 변수를 할당한다.

//before
let one = undefined;
let two = 13;

if (one) {
  one = two;
}
console.log(one); //13
//after
let one = undefined;
let two = 13;

one &&= two;
console.log(one); //13



2. lazy loading image

: 이미지의 경우 용량이 클수록 사이트에 부담을 줄 수 있다.
: 그래서 lazy loading(지연로딩)을 사용해 사이트 성능과 응답속도를 높일 수 있다.
: 아래는 지연로딩을 사용하는 방법 중 하나이다.

<img src="" loading="lazy" />

: img 태그에 loading="lazy"을 하면 지연로딩을 할 수 있다.

!codepen[kumjungmin/embed/VwPzvMK?height=265&theme-id=dark&default-tab=html,result]



3. 입력 제안받기

: 입력칸이 있고, 사용자에게 특정 값을 제안하고 싶다면?
: <datalist/>를 사용해보자!
: 아래 코드예시에서 input칸을 클릭해봅시다 :)

단, datalist의 id === input의 list 동일해야함

!codepen[kumjungmin/embed/rNjzOpE?height=265&theme-id=dark&default-tab=html,result]



4. picture 태그

: 우리는 이미지를 넣기 위해 주로 img태그를 사용하곤 한다.
: 그리고 창 크기 별로 이미지 크기를 달리하기 위해 css를 사용한다.
: 하지만 picture를 사용하면 html 만으로도 크기 조절이 가능하다!
: 아래는 _TCP school의 picutre 태그 예시 사진_이다.

: picture태그는 아래와 같이 사용하면 된다.

!codepen[kumjungmin/embed/RwKZWYZ?height=265&theme-id=dark&default-tab=html,result]

하지만 이 태그는 IE에서는 작동하지 않는다. (죽어라! IE!)



5. 기본 URL 설정

: 만약 우리가 여러 사이트로 이동하는 버튼을 만든다고 하자.
: 그렇다면 아래와 같이 만들 것이다.

<a href="https://www.naver.com/blog/1">1</a>
<a href="https://www.naver.com/blog/2">2</a>
<a href="https://www.naver.com/blog/3">3</a>
<img src="https://www.naver.com/blog/4/hello.png"/>

하지만 특정 URL (www.naver.com/)이 중복되는데, 중복코드를 한 번만 쓸 수 없을까?

있다! 바로 baseURL을 설정하는 것! 사용방법은 아래와 같다.

<head>
  <base href="https://www.naver.com/blog/" target="_blank">
</head>

<body>
  <a href="1">1</a>
  <a href="2">2</a>
  <a href="3">3</a>
  <img src="4/hello.png" alt="hello world">
</body>





출처
아래 사이트에 가면 더 자세히 알 수 있어요!

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

0개의 댓글