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로 줄인 걸 보여주고 있다.(영어)
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에는 몇 가지 목표가 있다.
현재 JS에서 사용하는 논리적인 기본값을 가진다.
똑같은 걸 여러 가지로 설정하는 게 아니라 단 한 가지 방법으로 설정하게 한다.
이미 사용하던 Rules 설정은 변경안하고 사용한다.
require()를 재구현한 게 가장 큰 후회인데 JavaScript 런타임의 네이티브 로딩을 그대로 사용한다.
eslintrc의 최상위 키를 더 잘 관리한다.
기존 플러그인은 동작해야 한다.
하위 호환성을 유지해야 한다.
새 구성 파일은 eslint.config.js이다.
이는 JS 파일이라서 extends, plugins, globals 등 대부분을 모듈을 임포트에서 사용하는 방식이 되었다.
새 flat config 시스템은 아직 CLI에 통합되지는 않았고 개발자가 테스트할 수 있게 API로 사용할 수 있다.
빠른 첫화면을 위한 한글 폰트 최적화 여행 - part 1: 기존 서비스 구경, part 2: 꼼수로 완성하다 : 한글은 용량 때문에 웹에서 다루기가 어려운데 이를 최적화하기 위한 과정을 설명한 글인데 아주 재미있다.(난 보통 웹 폰트를 잘 안 쓰긴 한다.) 대부분의 한국어로 번역된 폰트 최적화 글도 영어를 번역한 것일 뿐이라 font-display:optional만 쓰면 최적화되는 줄 알고 있다가 이는 폰트라 100ms 이내 폰트가 로딩되어야만 유효하다는 것을 알게 되고 유명한 사이트를 찾아보면서 웹 폰트를 어떻게 쓰는지 추적했지만 안 쓰면 안 섰지 제대로 쓰는 곳은 없었다. 깜빡거리지 않고 처음부터 웹폰트로 보여주는 방법을 고민하다가 사용하는 글자만으로 구성한 서브셋 폰트를 만들어봤지만 해결이 안되어 첫 로딩 때 나오는 상단 부분만의 폰트로 서브 셋을 만들어서 드디어 문제를 해결했다고 한다. 하지만 이후 아랫부분의 문제는 제대로 해결이 안 되어서 JavaScript로 스크롤을 감지해서 폰트를 바꾸도록 해서 해결하고 첫 뷰포트에 보이는 부분의 글자만 탐지해서 서브 셋을 만들도록 자동화했다고 한다.(한국어)
'웹 프라이버시 샌드박스' 테스트 확대 : 구글에서 타사 쿠키 및 사이트 간 추적에서 개인정보를 보호하기 위해 "프라이버시 샌드박스"를 시작했지만, 더 테스트할 시간이 필요하다는 피드백을 많이 받아서 테스트 기간을 늘리기로 했다. 사용자가 참여 여부를 결정해서 이 API를 테스트할 수 있고 2023년 3분기에는 프라이버시 샌드박스 API로 일반 이용자도 사용할 수 있을 거라고 기대하고 2024년 하반기에는 타사 쿠키를 단계적으로 폐지할 예정이라고 한다.(한국어)
그 밖의 개발 관련
"Ignore the f'ing haters!" : 10년 전인 2012년에 JSON의 문제를 해결하기 위해서 JSON5를 오픈소스로 만들어서 해커뉴스에 공개했다. 그 결과는 수많은 조롱과 비난이 있었고 HashiCorp의 Mitchell Hashimoto는 HTML7이라는 패러디 저장소까지 만들면서 농담으로 써먹었다. 다행히 이 일에 화가 났다기 보다는 놀랬고 이러한 의견들을 무시하고 계속해서 개발한 결과 JSON5는 이제 주당 6천만 다운로드를 기록해서 npm에서 상위 0.1%에 들고 있고 Apple도 JSON5을 도입했다. 이를 통해 혐오자들은 무시하라는 것을 배웠다고 한다. 싫어하는 사람들보다 일부라도 좋아하는 사람들을 위해서 제품을 만들어야 하고 기여한 사람을 홍보할 뿐만 아니라 Pull Request를 올린 사람에게 커밋 엑세스 권한을 주었는데 이는 통제권을 잃을까 봐 걱정했지만 실제로는 잘 동작했다. 그리고 우리는 모두 미래를 예측할 수 없으니 친절해야 한다고 한다. 꽤 재밌고 좋은 글이다.(영어)
TSDB as a Service, TSCoke 개발기 : 카카오에서 TSCoke라는 시계열 데이터베이스를 만들게 된 과정을 설명한다. Redicoke라는 분산 키-밸류 스토어를 쓰고 있었는데 Redicoke는 그 특성상 저장공간이 많이 남았기 때문에 이 공간을 지표 데이터를 저장하는 데 활용하기로 선택했다. 이에 따라 웹 콘솔을 제공하고 오픈소스를 연동하고 무중단 수평 확장을 제공하는 등의 기능을 기획해서 구현했지만, 메모리 문제와 타임 스탬프가 역전되는 현상이 발견되어 Adaptive Radix Tree와 Dictionary coding을 도입하고 SSL을 구현해서 이 문제를 해결했다고 한다.(한국어)
Announcing: MiniRust : 오랫동안 Rust 프로그램이 안전하지 않은 코드로 동작할 때를 많이 고민했는데 이는 머릿속에만 있고 확장될 수 없다는 생각에 MiniRust라는 프로젝트를 공개했다. Rust로 MiniRust를 만들었다고 볼 수 있지만 저자인 Ralf Jung은 이를 수도 pseudo Rust라고 부른다. Rust를 아는 사람이라면 MiniRust를 보고도 어떤 동작을 할 것인지 알 수 있을 거라고 한다.(영어)
MySQL JSON vs. TEXT : MySQL에서 데이터타입인 JSON과 TEXT의 성능을 비교한 글이다. 데이터베이스에서 JSON을 지원한 뒤로 유용한 기능이지만 언제 JSON을 쓰고 언제 TEXT를 써야 할 지 이 글을 통해 알 수 있다. 큰 데이터를 기준으로 비교한 결과 COUNT 쿼리는 JSON을 파싱하지 않아서 거의 비슷한 성능을 보였고 JSON 내부의 필드로 COUNT 쿼리를 하는 경우는 파싱하느라고 시간이 좀 더 걸리는 것을 볼 수 있다. 대신 데이터를 조회하는 경우는 JSON 처리에 TEXT보다 오래 걸리기 때문에 JSON이 TEXT보다 훨씬 오래 걸리는 것을 볼 수 있다. 대신 JSON은 내부의 특정 필드만 접근하거나 업데이트하는 경우나 특정 JSON 필드를 인덱스로 생성할 때는 그 효과를 볼 수 있다.(한국어)
GitHub Pages now uses Actions by default : Jekyll로 시작되었던 GitHub의 정적 페이지 서비스인 GitHub Pages가 GitHub Actions를 사용하도록 변경되었고 6개월 정도 공개 저장소에서 테스트한 뒤 이제 비공개 저장소에서도 사용할 수 있게 되었다. 이제 정적 사이트 생성기가 많아서 GitHub Pages에도 관련 요구 사항이 많아졌는데 이제 Actions를 사용하게 되면서 브랜치로 한정되는 제약이 없어지고 github-pages 배포 환경 컨텍스트에 따라 만들 수 있게 되었다.(영어)
Kubernetes StatefulSets are Broken : Kubernetes StatefulSets이 디스크 볼륨이 필요한 앱을 위해서 만들어졌고 네트워크 연결과 볼륨 유지, 롤링 업데이트를 잘 지원하고 있지만 볼륨 리사이즈를 지원하고 있어서 많은 문제가 생기고 있다고 설명하는 글이다. 이는 CSI 구현체가 대부분 볼륨 리사이징을 지원하고 있음에도 StatefulSet 컨트롤러가 리사이징을 지원하지 않고 있어서 수동으로 작업해야 하는 우회 방법을 취해야 한다. 하지만 오퍼레이터가 이 문제에 대해 StatefulSet 워크로드를 관리하기 때문에 StatefulSet을 제거하면 재생성하는 바람에 우회 방법을 쓰기 어렵게 만들고 각 Vitess 오퍼레이터 등에서 각자 구현하고 있다고 한다. 글 자체는 자사 제품을 홍보하는 느낌이 좀 나긴 한다.(영어)
CDK for Terraform Is Now Generally Available : CDK for Terraform의 첫 GA 버전인 0.12가 릴리스 되었다. CDK for Terraform로 Terraform 구성 파일을 TypeScript, Python, C#, Java, Go 등으로 작성할 수 있다.(영어)
볼만한 링크
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달러가 들었다고 한다.(영어)
CEO Shadow Program : GitLab에서 운영하는 CEO 그림자 프로그램을 설명한 문서이다. 최근에 만든 제도인 줄 알았더니 문서를 보니 수년 동안 운영한 프로그램이었다. CEO 그림자 프로그램은 GitLab의 구성원이 2주마다 번갈아 가면서 CEO와 함께 CEO 업무를 하는 프로그램인데 기존에는 본사가 있는 샌프란시스코에 와서 했지만 코로나 시대에는 원격으로 진행했다고 한다. 이 프로그램을 통해서 GitLab의 멤버들이 회사의 관점을 이해하게 되어 더 잘 협업할 수 있게 되고 회사는 즉각적인 피드백을 얻고 외부에도 좋은 인상을 줄 수 있다고 한다. 그동안의 인터뷰 영상과 진행 방식, 비용 처리 등 아주 자세히 나와 있는데 GitLab을 만드는 만큼 프로그램 신청을 Merge Request로 올리고 이 프로그램은 성과나 승진을 위한 게 아님을 명확히 밝힌 점이 흥미롭다.(영어)
js1024 winners - 2022 edition : 1,024바이트 이하로 JAvaScript/GLSL 프로그램을 만드는 경진대회에서 type을 거꾸로 쓴 epty라는 이름의 단어를 거울에 비친 반대로 보고 입력하는 타이핑 게임으로 강성훈 님이 1등을 차지했다. 데모에서 type을 입력하면 게임을 시작할 수 있다.(영어)
Comments