22주차 - 테크 트렌드 줍줍

일요일은 개발자 블로그를 개발하는 날입니다. 이런저런 테크 트렌드를 보고 줍줍한 것들입니다.

테크 트렌드 줍줍

이번주 일요일에 이 내용들 정리하면 될 것 같습니다.

21 Awesome Web Features you’re not using yet

html dialog

<dialog id="a">
  <form method="dialog">
    <button>close</button>
    <button onclick="a.close()">close</button>
  </form>
</dialog>

<button onclick="a.showModel()">show modal</button>

dialog::backdrop {
  background-color: #fff;
}

<button popovertarget="popinoff">open</button>

<div id="popinoff" popover>
  <p>hello</p>
</div>

Web GPU

WebGL의 후계자입니다. 웹에서 3D 처리를 더 효율적으로 할 수 있습니다. 또 tensorflow.js에도 적용할 수 있을 것입니다.

컨테이너 쿼리

cq 단위들이 많이 추가되었습니다.

.article {
  container-type: inline-size;
}

@container (min-width: 700px) {
  .card {
    flex-direction: colum;
    font-size: max(1.2rem, 1rem + 2cqi);
  }
}

불필요한 방정식에 의존할 필요가 없어졌습니다.

color mix

.box {
  width: 420px;
  aspect-ratio: 16 / 9;
  background-color: color-mix(in srgb, red, blue);
}

CSS 네스팅

.card {
  .heading {
    font-weight: bold;
    h1 {
      color: springgreen;
    }
  }
}

color font

Noto Color Emoji - 구글 폰트

위에 제공하는 간지나는 폰트를 활용할 수 있습니다.

웹바이탈 익스텐션

Web Vitals - chrome 웹 스토어

위에서 받으면 됩니다.

Web Vitals Chrome Extension - repo

`Array.at`

console.log([1, 2, 3, 4, 5].at(-1)); // 5

깊은 복사

여기가 먼저 다루었습니다.

transform stream

TransformStream - MDN

import maps

json import

transform props

.box {
  translate: 50% 0;
  rotate: 420deg;
  scale: 7;
}

삼각함수

.size {
  translate: calc(cos(30deg) * 100px);
  translate: calc(sin(30deg) * 100px);
}

css initial letter

.article {
  initial-letter: 3 2;
}

view port unit

모바일에 적용할 의도로 만들어졌습니다.

.article {
  height: 100lvb;
  width: 100svw;
}

`:focus-visible`

.btn:focus-visible {
  outline: 5px solid springgreen;
}

.btn:focus:not(:focus-visible) {
  outline: none;
}

`inert`

<button inert>????</button>

View Transitions API

const handleClickItem = (item) => {
  document.startViewTransition(() => {
    setCurrentViewItem(item);
  });
};

animation-timeline

animation-timeline - MDN

I Waited 15 Years For These New Array Methods - Web Dev Simplified

4가지 자바스크립트 배열 메서드가 추가되었습니다.

with

const num = [1, 2, 3, 4];
console.log(num.with(2, 5)); // [1, 2, 5, 4]
console.log(num); // [1, 2, 3, 4]

toSorted

그냥 sort는 원본에 뮤테이션이 가해집니다.

const num = [2, 5, 4, 7];
console.log(num.sort()); // [2, 4, 5, 7]
console.log(num); // [2, 4, 5, 7]

복사를 하고 정렬하는 방법이 있습니다.

const num = [2, 5, 4, 7];
console.log(num.toSorted()); // [2, 4, 5, 7]
console.log(num); // [2, 5, 4, 7]

toReveresed

원래 reverse도 뮤테이션이 가해집니다.

const num = [2, 5, 4, 7];
console.log(num.reverse()); // [7, 4, 5, 2]
console.log(num); // [2, 5, 4, 7]

const num = [2, 5, 4, 7];
console.log(num.toReveresed()); // [7, 4, 5, 2]
console.log(num); // [2, 5, 4, 7]

toSpliced

const num = [2, 5, 4, 7];
console.log(num.splice(0, 1, 5)); // [2]
console.log(num); // [5, 5, 4, 7]

const num = [2, 5, 4, 7];
console.log(num.toSpliced(0, 1, 5)); // [5, 5, 4, 7]
console.log(num); // [2, 5, 4, 7]

불변성을 보장하는 메서드들이 추가 되었습니다.

웹사이트 로딩이 더 빨라지는 매직? 🍯 꿀팁 공유 10분컷!

Lazy Loading

<img src="cat.jpg" loading="lazy" />

필요한 시점에 로딩합니다. 하지만 사이즈 최적화가 안 되어 있으면 여전히 느릴 수 있습니다.

srcset

<img
  srcset="small-cat.jpg, 500w mid-cat.jpg 1000w, big-cat.jpg 2000w "
  src="small-cat.jpg"
/>

디바이스, 화면 기준으로 src를 적합한

sizes

<img
  srcset="small-cat.jpg, 500w mid-cat.jpg 1000w, big-cat.jpg 2000w "
  src="small-cat.jpg"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1400px"
/>

화면 기준에 따라 디스플레이 사이즈를 제어할 수 있습니다.

img 태그는 생각보다 강력합니다.

picture

<picture>
  <source
    srcset="/media/cc0-images/surfer-240-200.jpg"
    media="(orientation: portrait)"
  />
  <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

이미지에 대한 모든 제어를 하고 싶을 때는 사용하는 태그입니다.

.jxl .webp .avif

.jxl, .webp, .avif이 3가지 확장자를 잘 활용하도록 합니다.

.webp는 비교적 많은 브라우저들이 지원합니다.

zod-fetch

🔥 Fetch Better! Type & Runtime Safety with Zod-Fetch

얼마전 유튜브에서 발견했습니다. 타입 세이프하고 tRPC처럼 부담이 없을 정도로 가벼운 라이브러리입니다.

mattpocock / zod-fetch

역시 타입스크립트 마법사의 라이브러리입니다. ~~mattpocock의 타입스크립트 사용법을 보면 다큰 어른도 울릴 수 있습니다.~~

import { z } from 'zod';
import { createZodFetcher } from 'zod-fetch';
import axios from 'axios';

const fetchWithZod = createZodFetcher(axios.get);

fetchWithZod(
  z.object({
    data: z.object({
      name: z.string(),
    }),
  }),
  '/user',
  {
    params: {
      id: 12345,
    },
  }
).then((res) => {
  console.log(res);
  //          ^? { data: { name: string } }
});

타입세이프 자동완성 뽕맛에 취한체로 fetch를 사용한다는 점이 상당히 매력적으로 보입니다.

deno로 백엔드 만들고 있는데 뭔가 관심이 많이 갑니다.