Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

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

웹개발 관련

  • CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field : Node.js에서 CommonJS와 ES Modules를 모두 지원하기 때문에 어려운 점이 있는데 통일하면 제일 편하겠지만 조직이 커지면 어려운 점도 있으므로 토스에서 이 둘을 모두 지원할 방법을 정리한 글이다. CJS와 ESM의 특징을 설명하고 package.jsontype 필드로 둘을 어떻게 해석할지 제어하는 방법을 설명한다. 이때 exports 필드를 이용하면 파일의 경로와 임포트 경로를 매핑 시킬수 있는데 여기서 requireimport 키로 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 스키마 레지스트리 및 오퍼레이션 모니터링 시스템.

버전 업데이트

2022/10/16 21:07 2022/10/16 21:07