Outsider's Dev Story

Outsider

웹개발 관련
CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field : Node.js에서 CommonJS와 ES Modules를 모두 지원하기 때문에 어려운 점이 있는데 통일하면 제일 편하겠지만 조직이 커지면 어려운 점도 있으므로 토스에서 이 둘을 모두 지원할 방법을 정리한 글이다. CJS와 ESM의 특징을 설명하고  package.json의 type 필드로 둘을 어떻게 해석할지 제어하는 방법을 설명한다. 이때 exports 필드를 이용하면 파일의 경로와 임포트 경로를 매핑 시킬수 있는데 여기서 require와 import 키로 CJS/ESM에서 다른 파일을 로드할 수 있게 설정할 수 있는데 이 exports 필드를 정의할 때 주의할 점도 정리되어 있다.(한국어)
Introducing OG Image Generation: Fast, dynamic social card images at the Edge : Vercel에서 OG 이미지를 생성하는 라이브러리를 발표했다. Vercel Edge Functions와 WebAssembly를 사용해서 기존에 제공했던 og-image.vercel.app보다 5배 빨라졌다고 한다. 기존 방식은 서버리스 함수에서 Chromium을 실행해서 Puppeteer로 HTML 페이지를 스냅숏 찍는 거라 어려웠고 느렸는데 이젠 헤드리스 브라우저 없이 HTML과 CSS를 SVG로 만들 수 있게 되어 쉽고 빠르게 OG 이미지를 생성할 수 있게 되었다.
Status update of my tsc port : swc를 만든 강동윤 님이 tsc를 Go로 포팅하고 있는 프로젝트에 대한 상황을 정리했다. Rust를 쓰지만, TypeScript가 Go와 많은 프로퍼티를 공유하기 때문에 Go 언어를 선택했고 TypeScript를 라인별로 Go로 재작성하는 것이 가능하다. 하지만 tsc는 작은 버전에도 변경이 많이 발생하고 있고 34만 라인이나 되기 때문에 현실적으로는 이 모두를 재작성하는 것이 쉽지 않다. 그래서 TypeScript 컴파일러를 입력으로 받아서 Go로 작성된 TypeScript 컴파일러를 출력하는 컴파일러를 생각하게 되어 ts2go를 생각하게 되었고 이렇게 만든 Go 코드에 컴파일 오류가 자주 발생했기 때문에 tsfix라는 Go 자동수정 도구를 만들어서 10만 개가 넘는 컴파일 오류를 1,298개로 줄였다고 한다.(영어)
CSS 말줄임표 뒤에 컨텐츠 두기 : 긴 텍스트를 2줄로만 표시하고 말줄임 표시를 하고 위에 "더보기" 버튼을 넣는 것을 CSS로 구현하는 방법이다. 줄임표 표시와 버튼 배치 후 CSS Shape 적용까지 단계별로 설명하는데 이후 문제가 발견되어 이 문제도 해결하는 방법까지 제안하고 있다. 예전에 비슷한 디자인 요청을 받아서 고민하다가 당시 제대로 구현하지 못했던 기억이 있어서 더 반가웠다.(한국어)
Why I don't use Prettier : Prettier를 좋아하지만, 프로젝트에서 Prettier를 사용하지 않는 이유를 설명한 글이다. Prettier는 편리하지만, Opinionated하므로 일부 코드 스타일은 바꿀 수 없다. 대표적으로 printWidth 때문에 80자로 라인을 맞추기 위해서 오히려 가독성이 안 좋아지는 경우도 있는 데다가 보통 Prettier만 쓰지 않고 ESLint를 같이 쓰게 되는데 이때 오히려 구성이 복잡해진다고 느껴졌다. ESLint에도 코드 스타일을 지정할 수 있는 기능이 있으므로 이 구성을 만들어서 사용하는 것이 더 간편했다고 하고 있다.(영어)
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? : 카카오페이지에서 웹사이트를 개편하면서 Tailwind CSS를 사용한 경험을 정리한 글이다. 기존에 공통 컴포넌트가 없어서 비슷한 컴포넌트가 늘어났고 스타일에 이름을 붙이지 않아서 수정할 때 어려움이 있었고 이를 Emotion CSS로 해결해 보려했지만 여전히 문제가 있었다. 그래서 디자인 시스템의 부가적인 코드가 실제 기능 코드를 침범하지 않고 컴포넌트의 가동성을 해치지 않도록 하는 방법을 찾다 보니 Tailwind CSS를 도입하게 되었다고 한다. 이를 직접 사용하는 대신 Twin.Marco를 사용해서 Emotion CSS와 tailwind를 같이 쓸 수 있게 되었고 이를 적용하면서 적용했던 팁이 정리되어 있다.(한국어)
Create a passkey for passwordless logins : 안드로이드 크롬에서 passkey를 생성하는 방법을 설명한다. 브라우저가 WebAuthn을 지원하고 디바이스가 플랫폼 authenticator를 지원해야 사용할 수 있는데 이를 검사하고 navigator.credentials.create()를 호출하고 받은 크리덴셜 ID, 사용자 ID, 공개키, transports를 저장하면 된다.(영어)
그 밖의 개발 관련
The Story of Scalar : 이번 Git v2.38.0에 포함된 scalar 명령어는 대규모 저장소의 성능 문제를 특별히 해결하기 위한 명령어로 git clone 대신 scalar clone을 사용하면 된다. partial clone, sparse checkout, maintenance같은 성능 관련 명령어가 여기 모두 포함되어 있고 이미 클론한 저장소라면 scalar register로 사용할 수 있다. 이 글은 Scalar가 만들어져서 Git에 포함되기까지의 과정을 설명한 글이다. VFS for Git은 Microsoft의 Windows OS 모노레포를 Git으로 전환하기 위해 만들어졌고 읽기를 할 때만 파일을 로드할 수 있게 되었다. Microsoft Office 모노레포도 VFS for Git을 이용하여 Git으로 갈아탈 예정이었지만 여기서는 macOS도 지원해야 했는데 macOS에서는 VFS를 사용하기 어려웠다. Office 모노레포틑 sparse checkout을 사용할 수 있었지만, sparse checkout은 성능 때문에 VFS for Git에서는 사용하지 않았다. sparse checkout의 성능 때문에 cone 모드를 추가했고 이를 통해 VFS와 비슷한 성능에 도달할 수 있었습니다. 이러한 프로토타입의 가치가 증명되었고 VFS for Git과 별개로 만들기로 결정해서 Scalar라는 이름을 선택했다. 기존 VFS for Git 대신 Scalar라는 새로운 저장소를 선택하고 VFS for Git의 코드를 새 아키텍처로 개선하고 백그라운드에서 git 명령어를 계속 수행하고 파일을 최신 상태로 유지하는 서비스도 git background maintenance를 개발해서 대체하게 된다. 이렇게 변경하고 보니 Git 위에 있는 CLI 형태로 바뀌었기 때문에 C# 코드를 유지할 필요가 없어서 C로 포팅하고 아키텍처가 훨씬 단순화되었다. 대규모 저장소의 요구사항이 Microsoft에만 있는 것이 아니므로 Git의 contrib/ 디텍로리를 통해 Git 업스트림에 기여하기 시작했고 2.38.0 릴리스에 맞춰서 Git의 일부로 포함되게 되었다.(영어)
Introducing the Fleet Public Preview : JetBrains가 만든 새로운 IDE Fleet이 프리뷰로 공개되었다. Fleet은 IntelliJ 코드 처리 엔진을 사용하고 있고 분산 IDE로 설계되어 JetBrains의 Space를 이용해서 원격에서 코드 처리를 하고 로컬에서는 Fleet만 가볍게 사용하는 것도 가능하다.(한국어)
The Future of the Web is on the Edge : Deno Company에서 엣지 컴퓨팅의 미래를 설명한 글이다. 너무 과거부터 얘기하는 거 아닌가 싶기도 한데 CDN이 1998년 CDN을 런칭하면서 정적 파일을 사용자에 가까운 캐싱 서버에서 제공할 수 있게 했지만 이젠 동적인 웹도 엣지에 배포해서 각 사용자가 자신에게 가까운 서버에 요청을 보내서 레이턴시를 줄이고 서버리스처럼 사용한 만큼만 사용할 수 있게 된다고 설명하고 있다. DDoS도 자연히 막을 수 있어서 보안상도 좋지만 기존 프레임워크가 엣지에 최적화되진 않아서 Fresh같은 프레임워크가 엣지에 맞게 설계되었다고 하고 있다.(영어)
인프라 관련
Restructuring the Kubernetes Threat Matrix and Evaluating Attack Detection by Falco : Mercari에서 인턴십을 하면서 Kubernetes의 보안 탐지를 강화한 작업을 소개한 글이다. Mercari는 Kuberentes 클러스터의 공격 감지를 위해 Sysdig Secure를 2020년부터 사용하고 있었는데 sysdig는 Falco에 기반한 보안 기능을 제공하는 유료 SaaS이고 Falco는 커널의 시스템 호출을 수집해서 Kubernetes와 컨테이너 공격을 감지하는 프로젝트다. 적용한 지 2년이 지나서 Falco나 sysdig나 새로운 기능이 나왔고 보안에 관한 정보도 많아졌으므로 재평가가 필요했고 Microsoft에서 발행한 Kubernetes의 위협 메트릭을 기반으로 위협 메트릭을 정의해서 새로운 Falco 규칙을 Falco에도 적용하게 기여했다고 한다. 현재 Falco는 애플리케이션 내의 공격은 탐지하지 못하고 단일 시스템 호출로 식별하므로 여러 시스템 호출의 조합으로 공격하는 경우는 탐지할 수 없는 한계가 있다.(영어)
볼만한 링크
How the largest open source companies got their first 1k community members : 오픈소스 회사가 첫 1,000명의 커뮤니티 멤버를 모으려고 어떻게 했는지 알기 위해 HashiCorp의 Mitchell Hashimoto, Databricks의 Reynold Xin, Cockroach의 Peter Mattis, Confluent의 Ale Murray에게 질문해서 정리한 글이다. 처음에 어떤 전략을 사용했는지 북극성 지표는 무엇이었는지, 천명까지 얼마나 걸렸는지를 질문했다.(영어)
전략 1: CockroachDB는 Hackernews에 기술 관련 글을 지속해서 올렸다.
전략 2: HashiCorp, Databricks, Confluent는 밋업을 주로 열었는데 당시에는 온라인 및 비동기 협업이 지금보다 적었다는 점도 감안해야 한다.
전략 3: Databrikc는 초기 Spark 사용자의 질문이나 이슈에 적극적으로 지원했다.
메트릭으로는 Slack 멤버, GitHub 스타 수, 다운로드나 문서의 조회수를 사용했다.
1,000명까지 걸린 시간은 CockroachDB는 9개월, Confluent는 6개월이 걸렸고 Databricks와 HashiCrop는 회사를 만들기 전부터 커뮤니티를 시작했다고 한다.
[스생스#001] TIPS에 선정된기업 중 얼마나 많은 기업이 시리즈B를 받을까요? : TIPS 창업팀으로 스타트업 투자 생태계 성장 분석을 정리한 글이다. TIPS를 지원받은 1,600개 기업을 보육 그룹, 정체 그룹, 잠재 그룹, 성장 그룹으로 나누었는데 성장 그룹의 회사들은 TIPS 초기 회사들이 많고 약 2.8회, 평균 97억의 투자를 유치했다고 한다. 분석할 수 있는 1,061개 회사 중에서 38.8%가 시리즈 A 투자유치에 성공했고 이 중 32.4%가 시리즈 B를, 이 중 21.2%가 시리즈 C 이상을 투자 받았다고 한다.(한국어)
성공적인 UI 패러디를 위한 미국 저작권법 구경하기 : Windows 98과 Twitter를 패러디해서 스킨을 만들었다가 UI 무단 사용에 대한 지적을 보고 미국 저작권법을 찾아서 정리한 글이다.(법적 검토가 된 의견은 아니다.) UI는 특허와 저작권 모두에 포함될 수 있지만 현실에서는 등록되지 않은 경우가 많고 저작권법의 공정 이용 부분을 집중적으로 설명하고 있고 공정 이용 내용을 살펴본 결과 이미 절판된 Windows 98의 패러디 스킨은 유지하고 Twitter 패러디 스킨은 지금도 서비스되는 회사이므로 내리기로 했다고 한다.(한국어)
IT 업계 뉴스
카카오 장애 : SK C&C 판교 데이터센터가 15일 오후 3시 19분에 화재가 발생하면서 카카오톡 및 카카오의 서비스의 대규모 장애가 발생했다. 오후 11시 46분 화재 진화가 완료되었고 밤새 서비스 복구가 계속 진행되었고 카카오톡 12년 역사 중 가장 큰 장애라고 한다. 이 장애에 할말도 많지만 다들 아는 사건이기도 해서 따로 뉴스 링크는 걸지 않았다.
프로젝트
Satori : HTML과 CSS를 SVG로 변환하는 Vercel에서 만든 라이브러리.
Slash libraries : Toss에서 사용하는 TypeScript/JavaScript 패키지의 모음으로 한글 처리 등의 유틸리티나 React 관련 라이브러리가 포함되어 있다.
Kodiak : GitHub의 Pull Reqeust의 자동화를 도와주는 앱.
Bird Eats Bug : 브라우저와 연동해서 문제상황을 개발자 도구와 함께 녹화해서 버그 리포팅을 할 수 있게 해주는 도구. 서지연 님이 작성한 소개 글 참고.
GraphQL Hive : GraphQL 스키마 레지스트리 및 오퍼레이션 모니터링 시스템.
버전 업데이트
Linux Kernel v6.0 : 리눅스 커널, 릴리스 공지
PostgreSQL 15: 관계형 데이터베이스, 릴리스 공지
정렬 알고리즘 개선으로 25%~400% 속도 향상
WAL 파일에 LZ4, Zstandard(zstd) 압축 지원
INSERT, UPDATE, DELETE를 하나의 SQL 문으로 사용할 수 있는 SQL 표준 MERGE 명령어 지원
논리적 리플리케이션 지원 개선
Spring Framework v6.0 RC1 : Java 프레임워크, 릴리스 공지
VirtualBox v7.0.0 : 가상화 프로그램, 변경사항
Nx v15.0.0 : 모노레포 빌드 시스템, 릴리스 공지
Lerna v6.0.0 : JavaScript 모노레포 도구, 릴리스 공지
useNx를 설정하지 않아도 기본적으로 활성화
targetDefaults로 작업 파이프라인간의 의존성 설정 가능
PNPM 지원
Rollup v3.0.0 : JavaScript 번들러, 변경사항
Axios v1.0.0 : 브라우저/Node.js HTTP 클라이언트, 릴리스 공지
Obsidian v1.0 : 문서 관리 도구, 릴리스 공지
Porter v1.0.0 : 패키징 도구, 릴리스 도구
Docker Buildkit 지원
Git v2.38.0 : 분산 형상관리 도구, 변경사항
대규모 레포지토리를 위한 새로운 레포지토리 도구인 Scalar를 내장해서 대규모 레포지토리에 대한 기능을 통합해서 제공. scala clone 등으로 저장소를 클론할 수 있다.
--update-refs 옵션으로 git rebase에서 의존 브랜치를 업데이트 가능
Kafka v3.3.0 : 분산 이벤트 스트리밍 플랫폼, 릴리스 공지
ZooKeeper  대신 사용할 KRaft의 production-ready로 표시됨
Vault v1.12 : 시크릿 정보 관리 도구, 릴리스 공지
경로와 롤 기반의 리쿼스 쿼타 개선
플러그인 버전 개염 추가
PKI 시크릿 엔진 개선
Redis 시크릿 엔진 추가
Amazone ElastiCache 시크릿 엔진 추가
LDAP 시크릿 엔진 추가
Grafana v9.2 : 매트릭 대쉬보드, 릴리스 공지
패널의 데이터를 외부에 공유하고 Grafana에서 다시 볼 수 있는 위자드 추가
Grafana Loki의 쿼리 변수 에디터 간소화
Prometheus v2.39.0 : 모니터링 시스템, 릴리스 공지
순서 없는 샘플 수집에 대한 지원
Nomad v1.4 : 워크로드 오케스트레이터, 릴리스 공지
암호화된 설정값을 저장할 수 있는 Nomad Variables 지원
Traefik Proxy v2.9 : HTTP 리버스 프락시/로드 밸런서, 릴리스 공지
Consul과 Nomad에서 카나리 배포 지원
ACME를 이용한 기본 인증서
TLS 1.0, 1.1 비활성화
Artifact Hub v1.10.0 : Kubernetes 패키지 저장소, 변경사항
Armeria v1.20.0 : Java용 비동기 RPC/REST 라이브러리, 릴리스 공지
Open Policy Agent v0.45.0 : 클라우드 네이티브 환경의 정책 엔진, 릴리스 공지
CDK for Terraform v0.13.0 : Terraform Cloud Development Kit, 릴리스 공지
Node.js v18.11.0 (Current) : 자바스크립트 런타임, 릴리스 공지
실험적 watch 모드 추가
Node.js v16.18.0 (LTS) : 자바스크립트 런타임, 릴리스 공지
Rome v0.10.0: 프론트엔드 툴체인, 변경사항
Hasura GraphQL Engine v2.13.0 : Postgres로 동작하는 GraphQL 서버, 릴리스 공지
astro v1.5.0 : 정적 사이트 빌더, 릴리스 공지
dapr v1.9.0 : 이벤트 드리븐 런타임, 릴리스 공지
Bun v0.2.0 : JavaScript/TypeScript 런타임, 릴리스 공지
qwik v0.11.0 : 웹 프레임워크, 릴리스 공지
Fastify v4.8.0 : Node.js 웹 프레임워크, 릴리스 공지
Gatsby v4.24.0 : 정적 웹사이트 생성기, 릴리스 공지
Gatsby 5 준비 중(Alpha 버전 사용 가능)
Mattermost v7.3 : 기업용 메시징 플랫폼, 릴리스 공지
Visual Studio Code v1.72 : 에디터, 릴리스 공지
SWC로 내부 TypeScript 소스를 트랜스파일을 2분에서 12초로 줄임
ESLint v8.25.0 : JavaScript 코드 분석 도구, 릴리스 공지
Lit v2.4.0 : 웹 컴포넌트 라이브러리, 릴리스 공지
RedwoodJS v3.2.0 : 풀스택 웹프레임워크, 릴리스 공지
Playwright v1.27.0 : Chromium, Firefox, WebKit 브라우저 자동화 Node.js 라이브러리, 릴리스 공지
Testing Library에서 인사이트를 얻은 새로운 Locators API 추가
댓글 쓰기

기술 뉴스 #208 : 22-10-16

댓글