웹개발 관련

Improving INP with React 18 and Suspense : Interaction to Next Paint(INP)는 사용자 인터랙션에 반응성을 측정하기 위한 실험적인 지표로 First Input Delay(FID)보다 반응성을 더 잘 측정하기 위해서 만들어졌다. React 18에는 반응성을 높이기 위한 선택적 하이드레이션이나 startTransition같은 기능이 있다. React 17까지는 페이지의 전체 JavaScript를 로드해야 반응할 수 있었지만 18부터는 Suspense를 이용해서 논 블로킹 하이드레이션이 가능해져서 반응성을 더 빠르게 만들어서 FID와 INP를 좋게 할 수 있다. 이 글에서는 케이스 스터디로 nextjs.org에서 Suspense로 선택적 하이드레이션을 사용해서 Total Blocking Time(TBT)을 430ms에서 80ms로 줄인 걸 보여주고 있다.(영어)
ESLint's new config system, Part 1: Background, Part 2: Introduction to flat config, Part 3: Developer preview : ESLint에 새로 추가된 config 시스템이 왜 만들어졌고 어떤 특징이 있는지 설명하는 글이다.(영어)
- 배경
  - 2013년 ESLint를 런칭했을 때 config 시스템은 간단했다. 그냥 .eslintrc에서 켜거나 끄면 됐다.
  - 점진적인 변경으로 복잡도가 최대치에 이르게 되었다.
  - 대표적으로 extends가 있는데 다른 설정을 공유해서 활용할 수 있게 하는 방법이었다.
  - .eslintrc외에도 eslintrc.json, eslintrc.yml을 추가하고 eslintrc.js도 추가했지만, JavaScript 구성 파일은 다른 파일 형식과 호환이 안 되는 문제가 있었다.
  - npm이 v3에서 peerDependencies를 기본 설치 안 하기로 하면서 require()에 의존하던 extends가 문제가 되었고 extents 작성자에게 가이드하고 CLI 옵션도 추가했지만 잘 해결되지 않았고(그래서 require()도 재구현했다) npm v7에서 다시 peerDependencies를 설치하기로 했지만 ESLint 생태계는 이미 엉망이 되었다.
  - 최상위 디렉터리를 찾기 위해 root: true를 추가하고 glob 기반으로 설정하기 위해 overrides를 추가했다. overrides에 extends가 추가하면서 복잡도는 더욱 증가했다.
  - 이 복잡한 config 시스템을 제대로 이해하고 있는 사람은 아무도 없었고 유지보수하기도 어려웠기에 새로운 config 시스템이 필요하다고 생각하게 되었고 지금 지식에서 config 시스템을 만들면 어떻게 될까를 고민해서 "flat config" 시스템을 만들게 되었다.
- flat config
  - flat config에는 몇 가지 목표가 있다.
    1. 현재 JS에서 사용하는 논리적인 기본값을 가진다.
    2. 똑같은 걸 여러 가지로 설정하는 게 아니라 단 한 가지 방법으로 설정하게 한다.
    3. 이미 사용하던 Rules 설정은 변경안하고 사용한다.
    4. require()를 재구현한 게 가장 큰 후회인데 JavaScript 런타임의 네이티브 로딩을 그대로 사용한다.
    5. eslintrc의 최상위 키를 더 잘 관리한다.
    6. 기존 플러그인은 동작해야 한다.
    7. 하위 호환성을 유지해야 한다.
  - 새 구성 파일은 eslint.config.js이다.
  - 이는 JS 파일이라서 extends, plugins, globals 등 대부분을 모듈을 임포트에서 사용하는 방식이 되었다.
- 새 flat config 시스템은 아직 CLI에 통합되지는 않았고 개발자가 테스트할 수 있게 API로 사용할 수 있다.
빠른 첫화면을 위한 한글 폰트 최적화 여행 - part 1: 기존 서비스 구경, part 2: 꼼수로 완성하다 : 한글은 용량 때문에 웹에서 다루기가 어려운데 이를 최적화하기 위한 과정을 설명한 글인데 아주 재미있다.(난 보통 웹 폰트를 잘 안 쓰긴 한다.) 대부분의 한국어로 번역된 폰트 최적화 글도 영어를 번역한 것일 뿐이라 font-display:optional만 쓰면 최적화되는 줄 알고 있다가 이는 폰트라 100ms 이내 폰트가 로딩되어야만 유효하다는 것을 알게 되고 유명한 사이트를 찾아보면서 웹 폰트를 어떻게 쓰는지 추적했지만 안 쓰면 안 섰지 제대로 쓰는 곳은 없었다. 깜빡거리지 않고 처음부터 웹폰트로 보여주는 방법을 고민하다가 사용하는 글자만으로 구성한 서브셋 폰트를 만들어봤지만 해결이 안되어 첫 로딩 때 나오는 상단 부분만의 폰트로 서브 셋을 만들어서 드디어 문제를 해결했다고 한다. 하지만 이후 아랫부분의 문제는 제대로 해결이 안 되어서 JavaScript로 스크롤을 감지해서 폰트를 바꾸도록 해서 해결하고 첫 뷰포트에 보이는 부분의 글자만 탐지해서 서브 셋을 만들도록 자동화했다고 한다.(한국어)
Introducing the new npm Dependency Selector Syntax : npm v8.15.0에서 의존성 선택자로 npm query 명령어가 추가되었다. 이는 CSS 셀렉터와 유사한 형식을 가지고 있고 npm query "*", npm query "#react:not(.peer)"같은 형식으로 의존성을 조회해 볼 수 있다.(영어)
'웹 프라이버시 샌드박스' 테스트 확대 : 구글에서 타사 쿠키 및 사이트 간 추적에서 개인정보를 보호하기 위해 "프라이버시 샌드박스"를 시작했지만, 더 테스트할 시간이 필요하다는 피드백을 많이 받아서 테스트 기간을 늘리기로 했다. 사용자가 참여 여부를 결정해서 이 API를 테스트할 수 있고 2023년 3분기에는 프라이버시 샌드박스 API로 일반 이용자도 사용할 수 있을 거라고 기대하고 2024년 하반기에는 타사 쿠키를 단계적으로 폐지할 예정이라고 한다.(한국어)

그 밖의 개발 관련

인프라 관련

볼만한 링크

Why leaving Facebook/Meta was the best thing we could do for the Trino Community : 페이스북에서 만든 Presto의 초기 멤버들이 페이스북을 나와서 Trino로 리브랜딩하고 Trino 재단을 만들었는데 그게 왜 좋은 결정이었는지를 설명한 글이다. Presto를 처음 오픈소스로 릴리스한 2012년은 Facebook이 IPO 하지 전이었고 오픈소스로 프로젝트를 오픈하는 데 문제가 없었다. 사람들은 커뮤니티를 만들지 회사를 만드는 게 아니고 회사는 목표 자체가 커뮤니티와는 다르다. 오픈소스는 "누구도 특별하지 않다"는 엄격한 정책이 있지만 Facebook 내에서 Prestor가 중요한 프로젝트가 되면서 승인/성과를 위해서 프로젝트의 커밋 권한을 받으려고 했다. 처음에 한 실수는 Presto라는 이름의 애정이 있어서 이름을 바꾸지 않으려고 했고 페이스북도 Presto가 커뮤니티 소속이라는 합의가 있다고 믿었지만 실제로는 커뮤니티가 나가자 페이스북의 소유가 되었다. 그래서 페이스북을 나와야 했고 Trino로 리브랜딩해서 홍보도 새로 해야 했지만 그래도 커뮤니티의 힘을 믿었고 빠르게 스타가 늘고 있다.(영어)
From A Dropout to A Core Contributor to Deno, Here’s The Story of My 10-year Programming Career : 대학을 중퇴하고 10년 뒤에 Deno의 핵심 기여자가 된 justjavac의 이야기이다. 대학 등록금을 내지 못해서 중퇴하고 10,000시간의 법칙을 믿고 프로그래밍 공부를 하다가 Ryan Dahl의 Node.js 발표를 그를 존경하게 되어 Node.js에 관해 공부했다고 한다. 이후 Ryan이 Deno를 공개했을 때 관심을 가지고 관련 생태계에 도움이 될 프로젝트를 진행하고 VS Code 확장도 만든 끝에 Deno의 핵심 기여자로 합류하게 되었다. 지금은 GitHub의 300여 개의 오픈소스 프로젝트를 공개해서 스타 수로 상위 10명 중의 한 명인 개발자가 되었다고 한다. 마지막 말인 "Education represents the past, ability represents the present, and learning ability represents the future."에 공감한다.(영어)
I replaced all our blog thumbnails using DALL·E 2 for $45: here’s what I learned : 이미지가 있는 블로그 글은 2.3배 더 엔게이지먼트가 높은데 이 블로그 이미지를 만들 사람이 없으므로 DALL·E 2를 이용해서 블로그의 이미지를 만들어 내면서 배운 과정을 설명한다. DALL·E 2 프롬프트에 설명을 적으면 이미지를 얻을 수 있는데 이때 창의성이 꽤 필요하고 원하는 이미지를 얻으려면 연습이 좀 필요하고 스타일 수정 요구사항을 주면 도움이 된다. 아이디어를 얻기 위해 Reddit의 도움을 받을 수 있고 이상한 문자를 종종 출력하므로 이는 따로 지우는 게 좋다고 한다. 특히 숫자에 대한 것은 잘 처리 못하고 예술에서 사람의 역할이 곧 사라지진 않겠지만 이미지 사이트는 오래 가지 않을 거라고 얘기한다. 100개 블로그 이미지를 얻는데 45달러가 들었다고 한다.(영어)
How I Used DALL·E 2 to Generate The Logo for OctoSQL : OctoSQL이라는 프로젝트의 로고를 만들기 위해서 DALL·E 2를 사용하는 과정을 설명한다. Octo라는 이름이 붙은 만큼 문어가 들어간 원하는 아이디어가 있었고 원하는 이미지를 얻기 위해서 계속해서 키워드를 바꿔가면서 얻어낸 로고의 기록이 나와 있다.(영어)
DALL·E 2 prompt book : DALL·E 2의 프롬프트를 어떻게 이용할 수 있고 어떤 결과가 나오는지 정리된 82페이지의 PDF 문서다. DALL·E 2를 활용하기 전체 참고해 보기 좋은 문서다.(영어)
iOS Privacy: Instagram and Facebook can track anything you do on any website in their in-app browser : Instagram과 Facebook에서 인앱브라우저로 웹사이트를 열었을 때 pcm.js같은 파일을 자동으로 주입하기 때문에 사용자와 웹사이트 제공자와 상관없이 Meta가 사용자의 모든 것을 모니터링할 수 있다고 한다.(영어)
CEO Shadow Program : GitLab에서 운영하는 CEO 그림자 프로그램을 설명한 문서이다. 최근에 만든 제도인 줄 알았더니 문서를 보니 수년 동안 운영한 프로그램이었다. CEO 그림자 프로그램은 GitLab의 구성원이 2주마다 번갈아 가면서 CEO와 함께 CEO 업무를 하는 프로그램인데 기존에는 본사가 있는 샌프란시스코에 와서 했지만 코로나 시대에는 원격으로 진행했다고 한다. 이 프로그램을 통해서 GitLab의 멤버들이 회사의 관점을 이해하게 되어 더 잘 협업할 수 있게 되고 회사는 즉각적인 피드백을 얻고 외부에도 좋은 인상을 줄 수 있다고 한다. 그동안의 인터뷰 영상과 진행 방식, 비용 처리 등 아주 자세히 나와 있는데 GitLab을 만드는 만큼 프로그램 신청을 Merge Request로 올리고 이 프로그램은 성과나 승진을 위한 게 아님을 명확히 밝힌 점이 흥미롭다.(영어)
Designing in the Open(Source) : Microsoft에서 Office365 등 내부에서 사용하려고 만든 이모지 1,538개를 오픈소스로 공개했다. 이 이모지는 GitHub과 Figma에서 이용할 수 있다.(영어)

IT 업계 뉴스

js1024 winners - 2022 edition : 1,024바이트 이하로 JAvaScript/GLSL 프로그램을 만드는 경진대회에서 type을 거꾸로 쓴 epty라는 이름의 단어를 거울에 비친 반대로 보고 입력하는 타이핑 게임으로 강성훈 님이 1등을 차지했다. 데모에서 type을 입력하면 게임을 시작할 수 있다.(영어)
Amazon acquiring Roomba makers for $1.7 billion in latest smart home push : Amazone이 Roomba 로봇청소기를 만드는 iRobot을 17억 달러에 인수했다.(영어)
현대차, 포티투닷 주당 12.9만원에 인수 : 현대자동차가 자율주행 스타트업 42dot을 인수한다고 한다. 42dot은 네이버 전 CTO였던 송창현 님이 창업한 회사이다.(한국어)

프로젝트

Nextra : Next.js와 MDX를 이용한 정적 사이트 생성기.
tRPC : TypeScript에서 서버 쪽 라우터의 코드를 클라이언트에서 임포트해서 클라이언트의 API 타입세이프를 맞출 수 있게 해주는 프로젝트.
Blitz : Next.js용 풀스택 툴킷.
Code Catalog : 유명 오픈소스의 설명을 추가해서 코드를 읽기 도와주는 사이트로 해당 프로젝트의 중요 부분을 설명하는 형식으로 되어 있다.

버전 업데이트

Lens v5 : Kubernetes IDE, 릴리스 공지
Docusaurus v2.0.0 : 문서 웹사이트 생성기, 릴리스 공지
astro v1.0 : 정적 사이트 빌더, 릴리스 공지
Electron v20.0.0 : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, 릴리스 공지
Django v4.1 : Python 웹 프레임워크, 릴리스 공지
- Django 4.1 릴리스와 주요 변경 사항 참고
Flask v2.2.0 : Python 웹 프레임워크, 릴리스 공지
Flux v0.32.0 : Kubernetes 배포 도구, 릴리스 공지
Rust 1.63.0 : 프로그래밍 언어, 릴리스 공지
Bun v0.1.8 : JavaScript/TypeScript 런타임, 릴리스 공지
podman v4.2.0 : 컨테이너 엔진, 릴리스 공지
Armeria v1.18.0 : Java용 비동기 RPC/REST 라이브러리, 릴리스 공지
Open Policy Agent v0.43.0 : 클라우드 네이티브 환경의 정책 엔진, 릴리스 공지
Rome v0.8.0: 프론트엔드 툴체인, 변경사항
Turborepo v1.4.0 : JavaScript/TypeScript 빌드 시스템, 릴리스 공지
Stylelint 14.10.0 : CSS 린터, 릴리스 공지
Selenium v4.4.0 : 브라우저 자동화 프레임워크, 릴리스 공지
Visual Studio Code v1.70 : 에디터, 릴리스 공지
Jaeger v1.37.0 : 분산 트레이싱 시스템, 변경사항
Gatsby v4.20.0 : 정적 웹사이트 생성기, 릴리스 공지
Cypress 10.4.0 : 웹 테스트 도구, 변경사항
Nx v14.5.0 : 모노레포 빌드 시스템, 릴리스 공지
Consul 1.13 : 서비스 디스커버리/설정 도구, 릴리스 공지
KEDA v2.8.0 : Kubernetes 오토스케일러, 릴리스 공지
ESLint v8.22.0 : JavaScript 코드 분석 도구, 릴리스 공지
Rollup v2.78.0 : JavaScript 번들러, 변경 사항

2022/08/16 03:38
Newsletter
cilium, DALL·E 2, ESLint, INP, JSON5, kubernetes, MySQL, Presto, StatefulSets, Trino

기술 뉴스 #204 : 22-08-16

댓글