상태 변경으로 종종 너무 많은 렌더링이 일어나는 문제를 그동안 useMemo, useCallback, memo 등 수동 메모이제이션을 사용해서 해결해 왔다. 합리적인 타협점이지만 이 문제를 해결하기 위해 React를 위한 최적화 컴파일러를 구축하는 것이 React Compiler다. 그동안 리서치 프로젝트였지만 이미 instagram.com에서 사용 중이고 Meta에 더 적용한 후 첫 릴리스를 오픈소스로 공개하기 위해 준비 중이다.
Server Actions는 클라이언트에서 서버로 데이터를 보내는 방법으로 개발 중 이 API를 클라이언트에서만도 사용할 수 있도록 API를 확장해서 이러한 기능을 Actions라고 부르게 되었다.
이전에는 Meta 내부에서 개발하고 안정 버전만 공개되었는데 React Canary의 도입으로 개발 중인 새로운 기능도 커뮤니티에서 미리 확인할 수 있게 되었다. Directives, Document Metadata, Asset Loading, Actions 같은 기능도 모두 react.dev 문서에 추가되었다.
오랜 작업으로 릴리스할 준비가 되었고 Document Metadata, Asset Loading은 일부 앱에는 큰 변화가 되므로 다음 버전은 React 19가 될 예정이다.
화면에서 보이지 않는 부분에 적용되기 때문에 Offscreen라는 이름으로 개발 중이던 기능을 개발하면서 화면에 보이면서도 비활성 상태일 수 있다는 것을 알게 되어 이름을 Activity로 변경했다.
인프런 콘텐츠에 동적으로 생성되는 Open Graph(OG) 이미지 적용하기 : 인프런에서 콘텐츠를 외부에 공유할 때 OG 이미지를 콘텐츠에 맞게 동적으로 생성해 주기 위해 작업한 결과를 정리한 글이다. Vercel이 만든 og를 사용하고 CDN을 연결해서 기능을 구현했지만, 서버 쪽 성능은 좋지 않았기에 og 라이브러리 대신 그 내부에서 사용하는 satori를 직접 사용하면서 병목이 되는 부분을 개선하고 satori에 성능 개선 제안도 하면서 최초 이미지 생성 성능을 35배나 개선했다.(한국어)
Introducing SafeTest: A Novel Approach to Front End Testing : Netflix에서 내부에 적용해서 사용하는 프론트엔드 테스트 프레임워크 SafeTest를 공개했다. 기존의 UI 테스트 프레임워크 중 react-testing 라이브러리 같은 단위테스트 도구는 렌더링 대상이나 임포트 등을 제어할 수 있지만 실제 페이지와 상호작용할 수 없게 되고 Cypress나 Playwright같은 통합테스트 도구는 페이지는 제어할 수 있지만 내부를 제어할 수가 없게 된다. 이러한 문제를 해결하기 위해 SafeTest를 만들게 되었고 지연 로딩을 활용해서 페이지에 테스트를 실행하는 코드를 동적으로 로딩하는 것이 주용 아이디어다. 이렇게 설정한 뒤에 Playwright를 사용해서 실행하므로 페이지를 테스트할 수 있으면서도 특정 함수나 컴포넌트를 오버라이딩해서 더 쉽게 테스트할 수 있다.(영어)
JSR: What We Know So Far About Deno’s New JavaScript Package Registry : JSR은 Deno 팀에서 만든 패키지 레지스트리로 Deno 팀에서는 npm을 고려했지만 Deno 환경과는 맞지 않는 부분이 있어서 ESModules가 도입된 상황에서 npm 레지스트리말고 새로운 개발자 경험을 줄 새로운 중앙 패키지 레지스트리를 구축할 필요가 있었다고 한다. 개발자들은 TypeScript를 제대로 지원을 하는 점에서 매력적이라는 의견도 있지만 반드시 모듈을 발행하려면 Deno를 써야하는 문제도 있고 생태계가 분열되는 것에 대한 걱정도 있다.(영어)
React Native 앱 접근성 지원 시작하기 : 뉴스레터 서비스인 뉴닉의 React Native 앱에서 접근성을 개선한 내용을 정리한 글이다. 다크모드를 지원하고 기능을 말로 설명해 주는 보이스오버나 톡백 기능을 구현하고 가로 모드 지원과 폰트 크기를 다양하게 지원할 수 있도록 개선했다. 스타트업에서 제품의 성장과 접근성 지원 간의 우선순위에 대해 고민이 많았지만, 접근성이 중요하다고 공감하는 사람이 많아서 할 수 있었다고 한다. 이렇게 접근성 개선을 노력하는 서비스를 응원한다.(한국어)
Popular git config options : Git에서 설정하면 좋을 설정을 정리한 글이다. pull 할 때 어떻게 동작할지나 컨플릭트시 보여주는 방식, autosquash 설정이나 push할 브랜치 설정등 많은 사람들이 기본적으로 설정해서 사용하는 옵션들이 어떤 기능을 제공하는지를 정리해 두었다.(영어)
Better Git Conflicts with zdiff3 : Git에서 컨플릭트가 발생했을 때 두 브랜치의 차이점이 파일에 표시되는데 설정에서 diff3를 사용하면 원래 어떻게 되었는지 3개의 차이를 모두 보여주어서 수정하기가 훨씬 쉬워진다. Git 2.35에서 추가된 zdiff3를 사용하면 공통 조상에서 충돌된 부분을 더 정확하게 잡아준다.(영어)
인프라 관련
세계 최초로 cert-manager 버그를 발견하고 해결하기 : Let's Encrypt 인증서를 사용하던 중 연결에 문제가 생긴걸 발견하고 원인을 추적해서 해결한 과정이다. Let's Encrypt에는 지금은 만료된 DST Root CA X3 루트 인증서와 새로운 ISRG Root X1 루트 인증서가 있는데 설정에서 ISRG Root X1를 사용하게 했음에도 DST Root CA X3가 내려오는 상황이었다. Let's Encrypt가 Trust CA가 되기 전에 DST Root CA X3를 사용한 과거가 있고 이를 deprecte 한 뒤 cert-manager에서 버그가 발생하는 조건이 충족되어 문제가 발생했다.(한국어)
개발-운영 생산성 모니터링하기 (with Devlake, Grafana) : 인프런에서 DORA의 생산성 매트릭인 배포 빈도, 변경 사항이 적용되는 시간, 변경 실패율, 서비스 복원 시간을 측정해서 가시화하기 위해 작업한 내용이다. 여러 도구를 검토 후 오픈소스인 Devlake를 이용해서 GitHub, Jenkins, Jira를 연동해서 데이터를 수집한 뒤에 MySQL에 저장하고 이 데이터를 Grafana에 데이터소스로 연결해서 대시보드를 통해서 빌드, PR, 커밋, 이슈 등의 통계를 한 번에 볼 수 있게 했다. 한눈에 현황을 파악할 수 있어서 상당히 좋아 보인다.(한국어)
Product-Focused Reliability for SRE : 사이트 안정성 엔지니어(SRE)는 보통 서비스의 안정성을 책임지지만 이는 제품의 최종 사용자 경험에는 어느 정도 한계가 있다. 이를 개선하기 위해 Google의 SRE가 인프라와 서비스에 집중하는 대신 제품과 최종 사용자의 요구사항 지원에 집중해서 어떻게 해결했는지를 설명한 글이다. 이를 위해 엔지니어뿐 아니라 관리자와 디자이너 등 이해관계자의 참여를 유도하고 제품의 목적을 정의해서 우선순위를 정하고, 제품의 SLO를 측정하기 위해 클라이언트 SLO나 e2e SLO를 도입해서 제품의 SLO를 만들어서 이 신뢰성을 관리한다. 이 접근 방법은 SRE팀이 사용자와 비즈니스에서 가장 중요한 곳에 자원을 집중하게 만들어준다.(영어)
스타트업 엔지니어의 AWS 비용 최적화 경험기 : 인프런이 AWS 비용을 최적화 하기 위해서 해온 활동을 정리한 글이다. 각 팀이 비용에 관심을 가지도록 분위기를 만들고 높은 비용부터 분석해서 개선해 나갔는데 스팟 인스턴스, CDN 등을 활용하고 같은 AZ내의 통신을 하도록 개선하고 일부 SaaS는 내부 설치형 도구로 바꾸면서 월간 3천만원 이상을 아낄 수 있었다고 한다.(한국어)
Freenginx: A Fork of Nginx : 웹서버인 Nginx의 핵심 개발자 중 한 명인 Maxim Dounin이 Nginx를 포크해서 freenginx를 만든다고 발표했다. Maxim Dounin는 원래 Nginx를 소유한 F5에서 일하다가 2022년 F5가 모스크바 사무실을 없앤 뒤로는 F5에서 일하진 않지만, 자원봉사자로 계속 일하기로 합의했다. 하지만 F5의 nginx에 너무 많이 관여하고 있고 F5내에서 이뤄지는 작업도 알 수 없기 때문에 nginx 개발에 더 이상 참여하지 않고 포크해서 freenginx에서 작업한다고 한다.(영어)
Introducing Dagger Functions : Dagger Functions 기능이 도입되어 원하는 언어로 기능을 구현하고 이를 다른 언어에서도 불러와서 사용할 수 있는 기능이 추가되었다. Dagger는 CI/CD를 위한 블록을 만들 수 있는 프로젝트라고 할 수 있는데 CUE에서 프로그래밍 언어로 바뀌면서 재사용면에서는 프로그래밍 언어의 제약이 생겼다고 생각했는데 Dagger Function을 이용해서 언어가 달라도 사용할 수 있게 되었다. 현재는 Go, Python, TypeScript의 가이드를 제공하는데 다른 언어의 가이드도 추가될 예정이다.(영어)
볼만한 링크
We Have to Start Over: From Atom to Zed : Zed 에디터는 GitHub에서 Atom을 만들던 Nathan Sobo, Antonio Scandurra, Max Brunsfeld이 나와서 창업한 회사인데 이 세 명의 창업자와 인터뷰한 내용이 정리된 글이다. Zed의 비전은 Atom에서 가졌던 비전과 거의 비슷한데 Atom때는 당시 기술적 성숙도가 미치지 못했고 IDE처럼 강력하면서 확장성 있으면서도 가벼운 에디터를 만드는 것이 목표라고 한다. Atom을 만들기 위해 Electron을 만들고 VS Code가 훌륭하게 해냈지만, 이들은 더 많은 것을 원했고 Rust와 GUI 가속을 선택했고 UI 프레임워크인 GPUI 2를 만들어서 Zed를 만들기 위한 기술 스택을 모두 소유할 수 있게 되었다.(영어)
IT 업계 뉴스
Google pauses Gemini’s ability to generate AI images of people after diversity errors : Google이 Gemini의 이미지 생성 기능을 공개했는데 여기서 인물 이미지가 제대로 생성되지 않아서 해당 기능을 일시 중지했다. 구글의 공지에 따르면 이미지 생성 시 특정 인종에만 한정되지 않도록 하고 싶었지만 반대로 문화적, 역사적 배경이나 특정 인종을 요청하는 경우는 정확하게 생성되어야 하지만 제대로 동작하지 않았다고 한다. 그래서 1800년대 미국 상원의원 등의 이미지 요청에서 흑인과 원주민 여성의 이미지가 생성되어 실제 역사적 사실과 성차별의 역사를 오히려 지우는 문제가 발생했다.(영어)
Comments