22. 2월 스크랩

1. CSS 역사로 알아보는 CSS가 어려워진 이유 (링크)

2. Node.js에 Fetch API 추가 (링크)

- Promise 기반의 HTTP Request API (XMLHTTPRequest 보다 강력하고 유연함)
- undici 에 들어있는 fetch 코드가 Node.js 코어에 추가
- 대부분 브라우저에서는 window.fetch , worker.fetch 로 이미 지원중 (IE제외)

3. 가장 똑똑한 소프트웨어 엔지니어에게 배운 10가지 교훈 (링크)

1. 빠른 것이 좋은 것보다 낫다
2. 기술 부채(Technical Debt)에 대해 다시 생각하기
3. 바보 같은 질문은 없다
4. 스킬에 날개를 다는 커뮤니케이션 능력
5. 당신이 할 수 있다고 해서 꼭 당신이 해야 하는 것은 아니다
6. 남김없이 공유하라
7. 일에 책임을 져라
8. 최고의 코드는 아무것도 작성하지 않는 것이다
9. 내가 테스트하지 않으면 결국 문제가 된다
10. 실패를 받아들여라

4. 코드 리뷰의 목적은 성장이어야 한다 (링크)

1. 조직 내 코드 리뷰는 리뷰하고자 하는 관점을 코드가 아닌, 코드를 작성한 엔지니어에게, 제품을 만드는 메이커에게 옮겨보면 어떨까.
2. 사실 코드 리뷰 문화보다 중요한 것은 테스트 문화이다.

코드 리뷰의 목적
- 버스 팩터
- 버그없는 제품

부작용
- 병목이 되는 코드 리뷰
- 의미없는 코드 리뷰
- 싸움이 되는 코드 리뷰
- 책임 소재를 묻는 코드 리뷰

리뷰를 하기로 했나요?
- 코드에 대한 인식
- 리뷰는 성장을 목적으로
- 질문도 리뷰
- 테스트
- Pre-commit Review 와 기대효과
- No Rules
- 영어

마무리
- 코드 리뷰를 도입하기 전에
- So What?

5. 브라우저 주소창에 URL을 치면 일어나는 일들 (링크)

“브라우저 주소창에 URL을 치면 일어나는 일을 아는대로 말 하기”라는 웹 개발자 면접 단골 질문에 대해 다시 생각해보게 됨.

어떻게 클라이언트의 HTTP 요청 메시지가 서버에 전송되고, 이걸 받은 서버의 HTTP 응답 메시지가 클라이언트에 전송되는지, 그리고 브라우저가 컨텐츠를 표시하는데까지의 모든 과정을 번호순으로 정리

6. 더 작고 빠른 유튜브 임베딩 컴포넌트 (링크)

- Paul Irish가 만든 lite-youtube-embed를 Shadow Dom 웹 컴포넌트 버전으로 바꾼 것
- 매우 빠르고, 의존성 없는 Vanilla 컴포넌트
- 16:9 반응형
- 키보드로 접근 가능 및 ARIA 지정
- locale, start, autoload 지원
- WebP / JPEG 플레이스 홀더
- 플레이 리스트 지원

7. 미리 컴파일 가능한 CSS-in-JS (링크)

Microsoft가 만든 오픈소스
런타임(near-zero) & 빌드타임 구현을 같이 제공
SSR 지원
CSSType을 이용한 Type-Safe한 스타일 가능
Atomic CSS 사용으로 스타일 재사용 가능 및 CSS 이슈 회피

8. Tally Forms - 무료 TypeForm 대체제 (링크)

무제한 폼, 무제한 제출, 이메일 알림, 파일 업로드, 결제 연동, 커버/로고 등 거의 모든 기능이 무료
사용하기 쉬운 Form 편집기 제공
Notion/Airtable/Zapier/Google Sheets 연동 지원
WebHook 가능

9. Waifu Labs V2 - AI가 그리며 커스텀 가능한 일본 애니메이션 스타일 그림 생성기 (링크)

본문 내용 요약
AI가 그리는 일본 애니메이션 스타일 프로필 사진 생성기입니다. 링크글은 제작자가 AI를 훈련한 과정을 적어놨어요.
이 생성기의 특이점 중 하나는, 같은 캐릭터를 유지하면서도 다른 포즈로 그려달라고 요청할 수 있으며. 혹은 같은 포즈로 그려달라고 요청하면서도 다른 스타일로 그릴 수 있는 점입니다.
제작자는 이 솔루션을 통해 https://www.arrowmancer.com/ 이라는 게임의 포트레이트를 생성하는데 사용했다고 해요. 이로써 얻은 장점은 '무한하게 사용자 정의할 수 있는 포트레이트' 라고 합니다.
제작자는 사람과 기계 생성간 협업을 통해, 창의성의 새로운 시대가 열리길 기대한다고 해요.
서비스 소개
이 사이트 상단의 Generate라는 버튼을 누르면 여러분의 프로필 사진도 만들 수 있어요.
우선 처음 '최초 시작할' 그림을 골라야 해요. 이걸 기반으로 컬러와 디테일, 포즈가 달라져요.
우측 하단에 있는 새로고침 버튼을 누르면 새로운 선택지들이 나오고. 이 버튼은 모든 단계마다 있어요.
그리고 지금 상태가 마음에 든다면 Continue를, 이전 상태로 돌아가고 싶다면 Back을 누르시면 돼요.
그 다음으로는 컬러인데요. 채색 스타일을 정할 수 있습니다.
그 다음으로는 디테일인데요. 그림체 스타일을 정할 수 있습니다.

10. 사용자가 페이지를 떠날 때 안정적으로 HTTP 요청을 보내는 방법 (링크)

가끔 사용자가 다른 페이지로 이동하거나, 폼 전송할 때 로그를 남기고 싶은 경우가 있음
클릭 이벤트에 fetch를 넣는 것은 꼭 전송된다는 보장이 없음
그래서 Fetch하고 나서 window.location 에 넣어서 이동해보지만 이것도 마찬가지로 보장 안됨
XHR은 비동기 & 넌블록킹 이기 때문
fetch를 Promise로 await 처리하면 되긴 하지만 단점이 있음
처리하는 속도가 느려져서 사용자 경험이 안좋아짐
예상처럼 안정적이지 않음. 브라우저 탭을 닫거나 하는 것은 처리 불가능
브라우저에게 HTTP 요청을 보존시키는 옵션이 여러가지 있음
Fetch 에 keepalive 플래그를 사용하면 페이지가 중단되더라도 해당 요청은 유지
Navigator.sendBeacon() 같은 더 간단한 함수
브라우저들은 a 태그에 ping 속성도 지원 (링크에만 사용가능하다는 게 단점, FF는 기본으로 미지원)
그럼 뭘 써야 할까 ?
가능하면 fetch() + keepalive
80%의 브라우저가 지원
커스텀 헤더 전송 가능
GET 요청으로도 가능
예전 브라우저들 지원
sendBeacon() 이 좋은 경우는
96%의 브라우저가 지원
많은 커스터마이징이 필요 없을 때
깔끔하고 우아한 API를 선호할 때
브라우저의 다른 우선순위 요청들과 다투고 싶지 않을 때

11. ECMAScript 스펙을 읽는 법 (링크)

• ES2022 같은 스펙 문서 읽는 방법을, 마치 스펙 문서처럼 표현/정리해서 설명한 글
• 왜 읽어야 할까? : 모든 JavaScript 구현의 동작에 대한 가장 권위 있는 소스이기 때문
  • 브라우저, Node.js, IoT 기기 어디에서든
• ECMAScript 스펙에 포함된 것과 포함되지 않은 것
• 스펙 탐색하기 : (이 글의 저자는 아래처럼 5개 파트로 구분하는걸 선호)
  • Conventions and basics
  • Grammar productions of the language
  • Static semantics of the language
  • Runtime semantics of the language
  • APIs
• 하지만 실제 스펙문서는 위처럼 정리되어 있지 않음. 각 챕터에 Grammar/Static/Runtime이 섞여 있음
• 그래서 가장 중요한 Runtime Semantics 읽는 방법을 상세히 설명
  • 읽기는 쉽지만, 몇몇 단축 표현들이 이해하기 어려우므로 그에 대한 설명
  • Abstract Operations, [[This]], ? 와 !등..