Outsider's Dev Story

Outsider

웹개발 관련
The Forensics Of React Server Components (RSCs) : 초기에 React는 클라이언트 사이드 렌더링(CSR)로 시작했지만 SEO에 적합하지 않고 초기 로딩이 필요한 문제가 있었기에 서버 사이드 렌더링(SSR)을 도입해서 초기 HTML을 서버에서 만들어서 내려주어 바로 콘텐츠를 표시한 뒤 이후 하이드레이션 할 수 있게 되어 SEO 문제도 해결하고 FCP 지표도 개선할 수 있었습니다. 하지만 두 방식에도 한계는 있었기에 정적 사이트 생성(SSG)으로 모든 페이지를 만들어서 CDN으로 호스팅하는 방법도 만들고 증분 정적 재생성(ISR)을 만들어서 모든 콘텐츠를 다 빌드하지 않을 수 있게 되었다. RSC는 개별 React 컴포넌트에 적합한 렌더링 전략을 선택할 수 있게 해서 단점을 해결하는 것 목표이다. 이런 역사 속에서 만들어진 RSC의 동작 방식과 RSC가 가지는 의미를 설명한다.(영어)
Things that I like better in Vue than in React : React에 이미 익숙해서 불만이 없었지만, 막상 Vue를 써보니 Vue의 장점이 눈에 띄어서 정리한 글이다. 설치가 대화형이라 더 직관적이고 상용구도 적으면서 단일 파일에서 관리가 훨씬 쉽고 지시어 시스템이나 계산된 속성도 React보다 사용하기 쉽고 개발자 경험이 좋아서 배울 점이 많다고 강조하고 있다.(영어)
Introducing the CSS anchor positioning API : Chrome에 특정 요소를 기준으로 포지셔닝 할 수 있는 CSS anchor positioning API가 추가되었다. 특정 HTML 요소에 CSS로 anchor-name: --NAME처럼 설정하면 앵커를 설정할 수 있고 다른 요소에서 position-anchor:로 앵커의 이름을 지정하면 anchor()함수로 특정 요소를 기준으로 요소의 위치를 지정할 수 있다. 이 API를 사용하면 툴팁 등 특정 요소를 기반으로 요소의 위치를 아주 쉽게 잡을 수 있다.(영어)
Merging Remix and React Router : 지난 4년동안 Remix를 개발하면서 React Router와 밀업하게 연결되어 있었기에 개선하는 과정에서 Remix가 React Router를 더 의존하도록 만들다 보니 Remix가 React Router의 레이어에 불과하다는 것을 깨닫게 되었다. 그래서 두 프로젝트를 합쳐서 Remix v3를 React Router v7으로 출사하기로 결정했다.(영어)
Introducing Honeycomb for Frontend Observability: Get the Data You Need for Actionable Customer Experience Improvements : 옵저버빌리티 서비스를 제공하는 Honeycob에서 프론트엔드를 위한 옵저버빌리티의 얼리 엑세스 프로그램을 발표했다. Honeycomb OpenTelemetry Web를 사용하면 프론트엔드의 Web Vitals 데이터를 수집할 수 있고 데이터만 수집하기 때문에 비싼 RUM보다 많은 관점을 제공할 수 있다.(한국어)
The evolution of Figma’s mobile engine: Compiling away our custom programming language : Figma는 웹과 모바일을 모두 지원하는 Figma의 요구사항을 충족시키기 위해 Skew 언어를 만들어서 사용했는데 Figma가 커짐에 따라 생태계 부족으로 인한 한계를 깨닫고 Skew를 TypeScript로 마이그레이션 했다고 한다. 이는 모바일 브라우저에서 WebAssembly를 지원하기 시작했고 Skew의 핵심 엔진을 이미 C++ 엔진으로 대체했기에 성능 손실이 크지 않았기에 가능한 일이었다. 마이그레이션은 Skew 코드에서 TypeScript 빌드를 한 뒤 직접 TypeScript 코드를 작성하도록 하면서 개발의 중단없이 마이그레이션을 완료할 수 있었다.(영어)
Introducing ESLint Compatibility Utilities : ESLint 9.0.0에서 새로운 config 형식인 Flat config가 도입되고 API 변경도 있었다. 이에 따라서 플러그인도 v9.0.0에 맞게 업데이트되어야 하는데 아직 다 업데이트되지 않았으므로 플러그인을 사용할 때 호환성 오류가 발생한다면 @eslint/compat를 설치해서 호환성이 깨진 플러그인을 감싸면 정상적으로 사용할 수 있다.(영어)
그 밖의 개발 관련
Securing Git: Addressing 5 new vulnerabilities : 새로 릴리스 된 v2.45.1에는 Git 저장소를 클론 하는 중에 임의의 코드가 실행되거나 링크를 조작할 수 있는 취약점 5가지가 수정되었다. Windows, macOS, Linux, BSD 까지 대상이므로 버전업을 추천한다.(영어)
이거 어디까지 올라가는 거예요? - 성능 테스트 환경 구축기 : 성과관리 서비스를 만드는 레몬베이스에서 서비스가 커짐에 따라 서비스의 성능을 확인하기 위해 성능 테스트 환경을 구축한 과정이다. 여러 테스트 중 Stress Test가 가장 필요하다고 결정하고 Locust와 k6 중에서 k6를 선택한 뒤 GitHub Actions를 사용해서 테스트 환경을 만들고 Grafana 대시보드로 결과를 확인할 수 있게 연동했다. 성능 테스트 후 병목이 되는 부분을 확인하고 이 부분까지 개선해서 성능을 높였다.(한국어)
Start Building with Project IDX Today : Google이 AI 기반 온라인 통합 개발 환경으로 만들고 있던 IDX를 퍼블릭 베타로 공개해서 바로 사용할 수 있게 되었다. 이 IDE는 VS Code 기반으로 만들어져있고 Gemini 모델이 통합되어 있어서 AI를 이용한 코드 완성이나 채팅, 코드 설명하기를 사용할 수 있고 Firebase나 Google Maps 등 Google 제품을 쉽게 사용할 수 있게 통합되어 있다.(영어)
GitHub Copilot Chat in GitHub Mobile is now generally available : GitHub Copilot Chat이 GitHub Mobile 앱에서도 사용할 수 있게 되었다.(영어)
Dependabot on GitHub Actions and self-hosted runners is now generally available : GitHub에서 의존성 업데이트를 자동으로 지원하는 Depandabot이 이제 GitHub Actions 워크플로우로도 실행할 수 있게 되었다. 물론 이 시간은 GitHub Actions 시간에 포함되지 않아 기존과 똑같이 무료이다. Depandabot을 GitHub Actions로 실행할 수 있게 되면서 self-hosted 러너에서 실행하거나 프라이빗 네트워크에 접근할 수 있게 하는 등의 유연성이 좋아졌다.(영어)
dependabot-core is now open source with an MIT license : Dependabot을 GitHub Actions에서 동작하게 지원한 데 이어서 20개 이상 언어와 패키지 매니저의 의존성 업데이트를 지원하는 dependabot-core를 오픈소스(MIT)로 공개했다.(영어)
인프라 관련
How an empty S3 bucket can make your AWS bill explode : 작업하면서 AWS S3에 버킷을 만들었는데 며칠 뒤에 확인해 보니 1억 건의 S3 PUT 요청이 실행되고 $1,300의 비용이 나오고 있는 것을 확인했다. 이를 추적해 보니 특정 오픈소스 프로젝트에서 백업하도록 지정한 기본 S3 버킷 이름이 해당 버킷 이름과 우연히도 똑같았고 이를 수정하지 않고 사용한 모든 사람의 요청이 해당 버킷으로 온 것인데 AWS가 승인되지 않은 4xx 요청에 대해서도 요금을 부과하고 있기 때문에 발생한 일이었다. 이에 대해 AWS의 Chief Evangelist인 Jeff Barr는 이러한 일은 없어야 한다면서 HTTP 3xx/4xx를 포함한 무단 요청에는 과금하지 않도록 변경했다.
How to Work With the Kubectl Debug Command : Kubernetes 1.18부터 도입된 kubectl debug 명령어로 노드나 Pod을 디버깅하는 방법을 설명한다. 클러스터에서 문제가 있는 경우 로컬에서 환경을 재현하기가 쉽지 않은데 debug 명령어를 사용하면 기존 프로덕션 환경과 별개로 Pod이나 컨테이너를 생성해서 확인할 수 있기 때문에 문제를 추적할 때 유용하다.(영어)
Introducing Artifact Attestations–now in public beta : GitHub에서 빌드한 아티팩트를 증명해서 공급자에서 위변조가 일어났는지 검사할 수 있는 기능을 베타로 공개했다. 이 기능은 Sigstore로 동작하고 GitHub CLI로 서명하고 이를 검증하게 할 수 있으며 아티팩트를 SBOM과 연결할 수 있다.(영어)
New Dockerfile capabilities in v1.7.0 : Dockerfile 상단에 #syntax=docker/dockerfile:1.7이나 #syntax=docker/dockerfile:1.7.0-labs를 지정하면 사용할 수 있는 1.7.0의 새로운 기능을 설명한다. variable 확장 기능이 개선되어 ${variable#pattern}, ${variable%pattern}, ${variable/pattern/replacement} 변수를 받을 때 패턴으로 걸러내거나 치환할 수 있다. 또한 COPY로 파일을 복사할 때 부모 디렉터리의 구조를 유지할지를 선택하거나 .dockerignore 파일을 쓰지 않고 COPY에서 특정 패턴을 제외하고 복사하는 기능이 추가되었다.(영어)
볼만한 링크
The End of Social Media: An Interview With Jack Dorsey : Twitter의 창업자이면서 탈중앙화 소셜미디어 Bluesky를 만든 Jack Dorsey가 최근 Bluesky에서 자신의 계정을 삭제하고 이사회에서도 탈퇴했다. 이와 관련해서 Jack Dorsey와 한 인터뷰이다.(영어)
Jack Dorsey는 Twitter가 브랜드 광고에 의존하는 상장 기업의 압박에서 벗어나기 위해 탈중앙화 프로토콜이 필요하다고 생각했다. 이 탈중앙화를 트위터도 사용하면서 소셜 미디어는 인터페이스만 담당하는 형태가 좋다고 생각했다.
그래서 프로토콜을 구현할 수 있는 팀을 찾았고 그게 Bluesky였지만 Bluesky도 마찬가지로 사람들을 제어할 수 있도록 설계되었고 중재 요청을 받아 사람들을 쫓아내기 시작했다. 이는 Twitter가 회사로서 저지른 실수를 반복하는 것이고 탈중앙화 프로토콜이 아니었다.
이때 익명의 브라질 단체가 만든 Nostr를 발견했고 개방적인 프로토콜이라서 후원을 하기 시작했고 시간이 지나면서 이제 자신이 도와야 할 일이라고 생각하고 최선을 다해 펀딩하고 프로토콜에 이사회를 필요치 않다고 생각해서 Bluesky 이사회에서도 물러났다.
Jack Dorsey는 오랜만에트윗도 다시 올렸는데 Twitter를 비공개 기업으로 바꾼 Elon Musk의 선택은 올바른 선택이었다.
Jack Dorsey가 그의 발언이나 행동과 관련 없이 검열의 대표적인 이미지가 된 거에 대해서는 Twitter가 상장을 위해서 브랜드 광고를 선택했기 때문이었고 유일한 탈출구는 콘텐츠를 삭제할 수 없는 프로토콜을 사용해야 하고 수익은 커머스나 결제 같은 다른 수익 수단을 만들어야 한다고 얘기한다.
도널드 트럼프 계정 정지에 대해서는 트위터와 비즈니스에서는 옳은 일이지만 전 셰게와 인터넷에서는 절대적으로 잘못된 일이다.
Elon Musk가 정부의 통제 등에 싸우고 있긴 하지만 나중엔 타협할 수도 있고 Elon에게 문제가 생기면 어떻게 될지 알수 없는 일이다. 권리를 보장하는 기술 위에 구축된 것이 아니기 때문에 보장할 수 없는 일이다.
Design Docs at Google : Google에서는 소프트웨어 설계를 정의하는 디자인 문서를 비공식적으로 사용한다. 비공식 문서이므로 엄격한 가이드라인이 있지 않고 프로젝트에 가장 적합한 형식을 따르게 하고 있지만 여러 문서를 통해 유용한 구조가 자리 잡았다. 컨텍스트, 목표/비목표, 실제 디자인, 다이어그램, 제약 조건, 대안, 우려 사항 등을 설명하고 문서는 바쁠 사람이 읽을 수 있을 정도로 짧아야 한다. 디자인 문서를 작성하는 것도 비용이니 해결책이 모호한지 여부에 따라 작성할지 말지를 결정할 수 있고 의사 결정의 설명 없이, 구현에 대한 설명만 있다면 문서를 작성하느니 프로그램을 작성하는 것이 나은 생각이다. 이 디자인 문서는 빠른 반복을 통해서 발전시킨 뒤 여러 리뷰를 거치고 구현하고 이후 유지 관리하며 시간이 지나 다시 학습에 사용하는 생명주기를 가진다.(영어)
엔지니어링 레벨링은 누더기가 되었나? : 실리콘밸리에서는 이제 꽤 일반적으로 된 것으로 알고 있는 엔지니어링 레벨링이 처음 알려지기 시작했을 때 꽤 많은 관심을 가졌지만, 국내 많은 스타트업이 이를 도입하고 오히려 불편함과 스트레스를 호소하는 것을 보고 고민을 적은 글이다. 바라는 모습을 제시하지 못하거나 적절한 상황이 아니거나 매니저와 IC를 자유롭게 오가지 못하는 문제를 짚었다. 레벨링에 대한 고민은 많은데 나침반이 필요하다는 데는 동의한다.(한국어)
[탄생 비화] JVM 밑바닥까지 파헤치기 : 개앞맺시 이복연 님이 JVM 밑바닥까지 파헤치기 번역서를 출간하기까지의 험난한 과정을 설명했다. 중국 시장에서 오랫동안 스테디셀러인 책이라 관심이 많았지만, 너무 오래된 책이라 망설이다가 개정판이 나와서 번역하기로 했지만, 당시 하던 일들이 많아서 미뤄지다가 결국 JDK 21까지의 내용까지 적용해서 출간하게 되었다고 하는데 기간이 길면 지치기 마련이고 번역은 꽤 힘든 일인데 결국 출간까지 하신 게 대단하게 느껴진다.(한국어)
IT 업계 뉴스
Hello GPT-4o : OpenAI가 기존보다 훨씬 자연스럽게 대화하고 텍스트, 오디오, 이미지, 비디오를 이해할 수 있는 GPT-4o(omni)를 발표했다. GPT-4o는 사람과 비슷한 응답 속도를 보이는데 데모에서도 아주 자연스럽게 대화하는 것을 볼 수 있다.(영어)
[I/O 2024] 구글 I/O 2024: 새로운 시대를 위한 I/O : 지난 156일 미국 샌프란시스코에서 Google의 개발자 콘퍼런스 Google I/O가 열렸다. 이번 콘퍼런스에서는 구글 검색에서의 AI 답변의 개선, Google 포토에서 AI로 사진 찾기 기능, Gemini 1.5 Pro의 토큰을 100만에서 200만으로 확대와 Gemini 1.5 Flash 등을 발표했다. 폰의 카메라로 AI와 대화할 수 있는 Project Astra와 이미지/동영상 생성 모델인 Imagen 3, Veo도 발표했다.(한국어)
라인야후, 네이버 지우기 나섰다…"이사회 전원 일본인으로" : 일본 정부가 Line의 네이버 지분 매각을 요구하고 있는 가운데 신중호 CPO가 라인야후의 이사회에서 물러나서(CPO는 유지) 이사회가 모두 일본인으로 구성되었다. Naver는 이에 대해 지분 매각을 포함해서 협의 중이라고 밝혔다.(한국어)
미 의회, '틱톡 강제 매각법' 법안 승인…틱톡의 실제 퇴출 시점은? : 미 의회가 바이트댄스가 정해진 기간 내에 TicTok의 미국 사업권을 매각하지 않으면 미국 내 서비스를 금지한다는 법안을 가결했다.(한국어)
API Partnership with Stack Overflow : Stack Overflow와 OpenAPI가 API 파트너쉽을 맺었다. 이 파트너쉽을 통해 OpenAI는 Stack Overflow의 검증된 지식을 ChatGPT에 표시할 수 있게 되고 개발자를 위한 모델 성능을 개선할 수 있게 되었다.(영어)
OverflowAI is now Generally Available! A new era of community-driven AI : Stack Overflow를 회사 내에서 사용할 수 있는 Stack Overflow for Teams에서 사용할 수 있는 OverflowAI가 공개되었다. OverflowAI는 검색 결과를 요약해 준다거나 Slack과 연동해서 자동 답변 등을 할 수 있다.(영어)
프로젝트
uBPF : eBPF 프로그램을 실행할 수 있게 해주는 유저스페이스 eBPF VM
Can I Webview : Can I use처럼 WKWebView, Android Webview, WebView2에서 사용할 수 있는  기능을 쉽게 검색할 수 있게 만든 사이트
Can I email : Can I use처럼 Apple Mail, Gmail, Outlook 등 주요 메일 서비스에서 사용할 수 있는  HTML, CSS 기능을 쉽게 검색할 수 있게 만든 사이트
Flareum : 베타 진행 중인 디자인 시스템 빌더.
PrivacyTests.org : 브라우저별로 프라이버시 관련 기능의 지원 여부를 비교한 사이트.
TimesFM : 시계열 예측을 하기 위해 Google Research에서 개발한 Time Series Foundation Model
dotfiles : 설정에 사용하는 dotfiles를 GitHub에 올려두고 관리하는 데 도움이 되는 정보를 모은 사이트. 튜토리얼과 부트스트랩 저장소와 도움이 될 도구 등이 정리되어 있다.
버전 업데이트
Nx v19.0.0 : 모노레포 빌드 시스템, 릴리스 공지
Node.js v20.13.0 (LTS) : 자바스크립트 런타임, 릴리스 공지
Node.js v22.2.0 (Current) : 자바스크립트 런타임, 릴리스 공지
Zed v0.133.7 : 코드 에디터, 릴리스 공지
Rust 1.78.0 : 프로그래밍 언어, 릴리스 공지
Ionic v8.1 : 하이브리드 모바일 앱 프레임워크, 릴리스 공지
pgAdmin 4 v8.6 : PostgreSQL 클라이언트 도구, 릴리스 공지
Vitest v1.6.0 : Vite 유닛 테스트 프레임워크, 릴리스 공지
ESLint v9.2.0 : JavaScript 코드 분석 도구, 릴리스 공지
panda v0.39.0 : CSS-in-JS, 릴리스 공지
Hono v4.3.0 : 엣지용 웹 프레임워크, 릴리스 공지
astro v4.8 : JavaScript 웹 프레임워크, 릴리스 공지
Prometheus v2.52.0 : 모니터링 시스템, 릴리스 공지
Kubernetes Gateway API v1.1 : Kubernetes L4/L7 라우팅 API, 릴리스 공지
Wasmer v4.3 : WebAssembly 런타임, 릴리스 공지
Boundary v0.16 : 인프라 접근 관리, 릴리스 공지
sbt v1.10.0 : Scala 빌드 도구, 릴리스 공지
Nuxt UI v2.16.0 : UI 라이브러리, 릴리스 공지
Fastify v4.27.0 : Node.js 웹 프레임워크, 릴리스 공지
Expo SDK 51 : React로 네이티브 앱을 만드는 플랫폼 SDK, 릴리스 공지
Flux v2.3.0 GA : Kubernetes 배포 도구, 릴리스 공지
Playwright v1.44.0 : Chromium, Firefox, WebKit 브라우저 자동화 Node.js 라이브러리, 릴리스 공지
Istio v1.22.0 : 서비스 매쉬, 릴리스 공지
Safari 17.5 : 웹브라우저, 릴리스 공지
Kargo v0.6.0 : Kubernetes용 배포 도구, 릴리스 공지
Dart v3.4.0 : 프로그래밍 언어, 릴리스 공지
Flutter Web App에서 WebAssembly(Wsam) 지원
Flutter v3.22 : iOS, Android 네이티브 앱을 만드는 프레임워크, 릴리스 공지
댓글 쓰기

기술 뉴스 #246 : 24-05-16

댓글