9월 2주차 기록

생일은 행복해 🥳

배워가기

Promise.allSettled

• Promise.all은 프라미스가 하나라도 거절되면 전체를 거절한다.
• Promise.allSettled는 모든 프라미스가 처리될 때까지 기다린다. 반환되는 배열은 다음과 같은 요소를 갖는다.
  • 응답이 성공할 경우 – {status:"fulfilled", value:result}
  • 에러가 발생한 경우 – {status:"rejected", reason:error}
• 여러 요청 중 하나가 실패해도 다른 요청 결과를 여전히 사용할 수 있다
• Promise.allSettled를 사용하면 각 프라미스의 상태과 값 또는 에러를 받을 수 있다

Ref https://ko.javascript.info/promise-api

css @supports

• 최신 스펙의 CSS를 사용할 때 브라우저가 CSS를 지원하는지 여부에 따라서 맞출 수 있다.

• 이러한 문법을 기능 쿼리(feature query)라고 부른다.

  Copy

  @supports selector(h2 > p) {
    // ...
  }
  
  @supports not (transform-origin: 10em 10em 10em) {
    // ...
  }

Ref https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

람다 레이어

• AWS 람다 함수의 코드와 리소스를 관리하는 방법 중 하나
• 람다 레이어는 라이브러리, 사용자 정의 런타임 또는 기타 함수 종속성을 포함할 수 있으며, 이들은 여러 람다 함수 간에 공유될 수 있다. 이를 통해 코드를 더 쉽게 관리하고 공유할 수 있으며, 패키지 크기를 줄일 수 있다.

PNA(Private Network Access)

• 사설망 접근(private network access) 이란, 비인증된 공인(public) 웹사이트에서, 사이트를 방문한 사용자의 와 같은 사설 네트워크망(localhost(127.0.0.1) or 192.168.0.* 아이피) 엔드포인트에 엑세스하려 할때, 브라우저가 요청을 제한하는 새로운 보안 향상 WSC 사양을 말한다.
• PNA 동작 메커니즘은 CORS(Cross-Origin Resource Sharing) 정책을 확장한 개념으로 적용된다. 그래서 사이트에서 사설 네트워크 서버의 허가를 우선 예비 요청(Preflight) 하고 브라우저가 요청을 승인한 경우에만, 공공 웹사이트에서 사설 네트워크 서버의 리소스에 엑세스가 가능하고 그렇지 않으면 CORS 에러가 뜨게 된다.

Ref https://inpa.tistory.com/entry/🌐-크롬-브라우저-PNA-권한과-CORS-해결하기

이것저것

• 499 error - 클라이언트가 nginx에 무언가 요청을 했는데 nginx에서 요청을 처리하고 있는 도중에 클라이언트가 접속을 끊어 버리면 nginx는 499 상태 값으로 오류 로그를 남긴다
• tweak 확장도구 - 주소에 따라 HTTP 응답을 커스터마이징할 수 있게 해주는 도구 (Ref)
• cbt - 클로즈 베타 테스트(운영 파일럿 테스트)
• 정규식의 -(dash) - range를 표현하는 경우도 있으므로 (ex. [0-9]), 실제로 문자열 -를 가리키고 싶은 경우에는 escape 처리를 해줘야 한다. (\-)

기타공유

Bun 1.0

로고가 상당히 귀여운 자바스크립트 런타임 Bun이 드디어 1.0을 발표했다.

Node.js보다 4배나 빠르다고 한다. 타입스크립트를 기본으로 지원하기 때문에 트랜스파일링 시간이 많이 단축되나 보다.

Google의 V8 엔진을 사용하는 Node.js나 다른 런타임들과는 달리, Apple의 WebKit 엔진을 기반으로 하고 있다.

Bun에서 제공하는 Bun.file() 등의 API들도 많이 있는데, 아무래도 뉴비 런타임이고 이름이 낯설다보니 장난치는 것 같다.

Bun을 런타임으로 쓰지 않아도, 패키지 매니저로 사용할 수도 있다고 한다. 즉

bun install
bun add <package> [--dev|--production|--peer]
bun remove <package>
bun update <package>

npm, yarn, pnpm보다도 훨씬 빠르다. 대체 기술이 어디까지 빨라지는 거야!

심지어 번들러, 테스트 러너로도 사용할 수 있으니 매력적이긴 해 보인다.

여러 메뉴 하면서 다 잘하기 쉽지 않은데, 대단한데?

Vercel에도 바로 추가되었다.

Ref https://bun.sh/blog/bun-v1.0

velocity builder

피그마 화면을 바로 리액트, 뷰, 스벨트로 만들어준다?

Ref https://velocity.builder.io/

Node.js 16 지원 종료

16이 LTS였던 게 엊그제 같은데 지원 종료라니!

Ref https://nodejs.org/en/blog/announcements/nodejs16-eol

v0 by vercel

이름이 v0이라니. 버전 적어논 것 같이 생겨서 헷갈리잖아!

여러 가지 컴포넌트 UI를 제공한다. 토이프로젝트할 때 유용할 수도?

Ref

• https://twitter.com/shadcn/status/1702390674216329469
• https://v0.dev/

WebP 취약점 발생

우리 PC의 힙 영역 오버플로우 위험성을 누군가 알고 있다면, 악성 데이터를 전송하여 우리 PC의 프로그램을 예상치 못한 방식으로 동작하게 할 것이다. 이때 webp 이미지를 전송하여 열람 시 PC의 보안 정보를 탈취하는 문제.

webp 파일 열람만으로도 탈취 위험이 있으니, webp를 지원하는 프로그램의 업데이트를 권장한다. (대표적으로, 브라우저/카카오톡/에디터/IDE 등)

Ref https://stackdiary.com/critical-vulnerability-in-webp-codec-cve-2023-4863/

마무리

즐거운 생일 주간이었다 🎂

사랑 많이 받고 있는 만큼 나도 아낌없이 표현하고 베풀어야겠다는 생각

더불어 미국 가기 전에 마지막 주기도 한데, 쏟아지는 일들을 미친듯이 하느라 정신이 없기도 한 💦