Outsider's Dev Story

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

기술 뉴스 #199 : 22-06-01

웹개발 관련

  • "아듀! 인터넷 익스플로러" 마이크로소프트, 6월 15일 IE 지원 종료 : Microsoft의 IE 웹브라우저가 올해 6월 15일로 지원이 종료된다.(한국어)
  • React Suspense 알아보기 : React 18에 Suspense가 어떤 문제를 해결하고 어떻게 사용하는지 설명하는 글이다. 기존에는 개별 컴포넌트가 로딩 상태를 가지고 표현해야 했고 컴포넌트가 마운트되었을 때 데이터를 가져오기 시작하는 문제가 있었는데 Suspense를 이용하면 이를 Suspense에서 한 번에 처리할 수 있게 해주고 데이터도 마운트 이전부터 가져오기 시작할 수 있어서 사용자 경험을 더 끌어올릴 수 있게 되었다. 18에서 새로 추가된 startTransition()을 사용하면 급하지 않은 상태 업데이트를 뒤로 미룰 수 있는데 이를 Suspense와 조합해서 사용하면 비동기로 페이지를 전환할 때 훨씬 부드럽게 구현할 수 있게 된다. 더군다나 Suspense를 통해 React가 비동기 렌더링을 이해할 수 있게 되었으므로 Suspense Streaming SSR을 이용하면 SSR에서 Suspense 외부의 내용을 먼저 보내고 Suspense의 내용은 이후 클라이언트에게 보내도록 구현할 수 있다. 상황별 예제코드와 설명이 같이 있어서 이해하기 좋다.(한국어)
  • How Lerna just got 10x faster! : Lerna를 Nrwl에서 관리하게 되면서 useNx라는 플래그를 통해 Nx와 통합해서 Lerna의 속도를 개선하는 기능이 5.1 버전에 들어갈 예정이다. 이 기능을 통해 테스크 실행을 Nx에 위임해서 프로젝트마다 다르겠지만 2~10배 정도 빨라졌고 Turbo에 비해서도 5.3배 빠르다고 한다. 추가로 Nx와 통합해서 사용하면 Nx의 프로젝트 그래프로 이용할 수 있고 NX Cloud를 이용해서 분산 캐싱이나 분산 태스크 실행도 사용할 수 있게 된다.(영어)
  • Remix로 쉽게 하는 리액트 서버 사이드 렌더링 : Remix로 서버를 구성하고 디렉터리 기반으로 라우팅을 설정해서 웹사이트를 만드는데 필요한 페이지 작성, 데이터 불러오기, 리다이렉션 등의 사용 방법을 설명한다.(한국어)
  • Avoiding Puppeteer Antipatterns : Node.js에서 브라우저 자동화를 할 수 있는 Puppeteer를 수년간 사용하면서 조심해야 할 안티 패턴을 정리한 글이다.

    • waitForTimeout의 과도하게 사용하지 마라 : Puppeteer는 이벤트 드리븐 아키텍처라서 waitForTimeout로 일정 시간 대기하기 보다는 waitForSelectorwaitForFunction가 더 효율적이다.
    • Puppeteer의 API가 네이티브 브라우저 API처럼 동작할거라고 생각하지 마라 : 네이티브 이벤트처럼 동작하지만 실제로 내부엔 많은 동작이 숨겨져 있다.
    • domcontentloaded로 충분한데 domcontentloaded를 사용하지 않는다.
    • 이미지와 리소스가 필요하지 않음에도 차단하지 않는다.
    • page.evaluate의 사용을 피한다.
    • 개발자 도구가 만들어준 셀렉터를 잘못 사용한다 : 개발자 도구가 생성한 셀렉터는 너무 엄격해서 더 간단한 실렉터가 충분한 경우가 있다.
    • .waitForSelector.waitForXPath의 반환 값을 사용하지 않는다: 해당 요소를 반환하므로 추가로 셀렉트할 필요가 없다.
    • 별도의 파서를 사용한다. : 이미 Puppeteer에 파서가 있으므로 특별한 이유 없이 HTML 파서를 사용하면 느려진다.
    • 다른 도구가 더 적절할 때도 Puppeteer를 사용한다.

그 밖의 개발 관련

  • I'm All-In on Server-Side SQLite : Go의 임베디드 키/밸류 데이터베이스인 BoltDB를 만든 Ben Johnson이 배포 서비스인 Fly.io에서 Litestream을 계속 작업하게 되었다. Litestream은 SQLite를 리플리케이션을 이용해서 유지할 수 있게 하는 프로젝트다. BoltDB는 Go로 스키마를 작성해야 해서 마이그레이션이 어려운 등의 단점이 있었고 더 많은 프로그램에서 사용할 수 있도록 해야 할 작업을 고민하다가 SQLite이 이를 위해 존재한다는 결론에 다다르게 되었다. SQLite를 기본으로 사용하지 않는 이유는 스토리지 오류에 대한 복원력이고 규모에 따른 동시성 때문인데 SQLite에는 우리가 필요로 하는 기능의 99.9%가 있고 애플리케이션 바로 옆에 배치할 수 있어서 속도에 대한 이점이 있다.(영어)
  • MySQL Command Line Interface : MySQL client CLI가 다른 데이터베이스에 비해 기능이 부족해서 CLI를 직접 수정해서 편의 기능을 추가하는 방법을 설명한다. 프롬프트에 서버 정보 등을 표시하거나 PostgreSQL처럼 자주 쓰는 명령어의 단축 명령어를 추가해서 \\d를 입력하면 SHOW DATABSAES;가 실행되도록 할 수 있다. 미리 파일에 저장해둔 SQL을 실행하거나 회사 정책에 따른 경고문을 표시할 수 있도록 수정한 client 코드를 같이 제공하고 있다.(한국어)
  • 단 하나의 API 사이트를 위한 여정 - Part 1 : 페이히어에서 모노리스에서 MSA로 전환하면서 저장소가 많이 생기게 되어 Swagger API 문서를 어떻게 관리할지 고민하다가 모든 저장소에 /docs 폴더에 Swagger 문서를 배치하도록 규칙을 정하고 이를 한곳에서 볼 수 있도록 redoc을 이용해서 각 저장소의 /docs 내용을 가져와서 한꺼번에 보여주도록 구현했다.(한국어)
  • Improved REST API documentation : GitHub의 REST API 문서가 개선되었다. OpenAPI 스키마에서 자동으로 문서가 생성되도록 바꾼 후 지속해서 개선하고 있는데 파라미터와 응답을 쉽게 볼 수 있도록 3컬럼 레이아웃으로 바뀌었고 예제도 cURL 뿐 아니라 JS와 GitHub CLI도 같이 제공하게 되었다.(영어)
  • Specify theme context for images in Markdown (Beta) : GitHub 마크다운에서 prefers-color-scheme를 이용해서 <picture> HTML로 라이트/다크 테마에 따라 다른 이미지를 보여줄 수 있게 되었다.(영어)

    • Math support in Markdown : GitHub 마크다운에서 $, $$ 기호를 이용해서 TeX나 LaTeX 스타일의 수식을 작성할 수 있게 되었다.(영어)

인프라 관련

  • Terraform should have remained stateless : Terraform에서 상태를 관리하는 부분이 오히려 문제를 어렵게 하므로 상태가 없어야 한다고 설명하는 글이다. 문서에서 프로바이더와 리소스를 매핑하기 위해 상태가 필요하다고 하지만 속성을 이용해서 상태 없이 매핑할 수 있고 메타데이터도 꼭 필요한 건 아니라고 설명하고 있다. 상태를 관리해야 하므로 유지보수하기가 더 어려워진다고 하고 이미 Ansible, Puppet, OctoDNS 등 상태 없이 동작하므로 충분히 상태 없이도 동작할 수 있다고 한다.(영어)
  • Announcing the Refreshed Cloud Native Security Whitepaper : CNCF의 Security Technical Advisory Group(TAG)에서 2020년 11월에 공개했던 Cloud Native Security Whitepaper의 v2를 공개했다. 이 문서에는 개발, 배포, 런타임 등 클라우드 네이티브 계층별로 보안에서 신경 써야 할 내용과 가이드라인이 정리되어 있고 v2에서는 랜섬웨어, GitOps, EU 규정 아래의 보안 등이 추가되었다.(영어)

볼만한 링크

  • Fly.io: the Reclaimer of Heroku's Magic : Heroku에서 일했던 사람인데 Dogwood 스택을 구현하려는 목표가 있었지만, Salesforce에 인수된 후 수년간 발전이 없다고 많이들 느끼는데 fly.io가 Heroku가 하려고 했던 일을 하고 있다고 얘기하고 있다.(영어)
  • 불경기에 스타트업을 한다는 것 (번역) : YC의 폴 그레이엄이 2008년 경기 불황 때 작성한 Why to start a startup in a bad economy의 번역 글이다. 스타트업의 흥망성쇠는 경기가 아니라 창업자의 역량에 달려 있어서 요식업이라면 경기가 좋아질 때를 기다릴 수도 있지만 테크에서는 그렇지 않다. 불경기에는 투자자들이 투자를 꺼리기 때문에 가장 중요한 것은 생존하는 것이고 다행히도 스타트업은 불황이든 아니든 효율적으로 일하면 되는 것이다. 오히려 불황에는 경쟁이 적어져서 생존할 수 있다면 그 기술을 가질 수 있게 되므로 좋은 문제를 풀려는 좋은 팀이 있다면 지금이 그 타이밍이다.(한국어)
  • 최악을 대비하세요 – YC (번역) : YC가 포트폴리오 대표들에게 보낸 메일을 번역한 글이다. 경기가 좋지 않은 상황이라 이럴 때 어떻게 하는 게 좋은지 조언이 담겨있다. 이럴 때는 성장보다는 생존이 목표가 되어야 하고 런웨이가 부족하다면 기업가치가 만족스럽지 않더라도 펀딩을 받아두는 게 좋고 아직 제품-시장 핏을 찾지 못했다면 펀딩은 포기해야 할 수도 있고 1년 이내에 투자유치를 고민하고 있다면 좋은 성장을 보여주고 있더라도 만족할만한 펀딩은 못 받을 수도 있다. 창업한 지 5년 이내라면 기존의 펀딩이 비정상적이었을 가능성이 커서 돌아보길 권장하고 생존하게 된다면 불황 중에 시장 지배력을 높일 수 있게 될 것이다.(한국어)
  • 만화로 보는 넷스케이프 창업 이야기 (joone.net) : joone님이 계속 그리고 계신 자유/오픈소스 소프트웨어 만화다. 이번 시리즈는 이젠 거의 잊힌 넷스케이프 브라우저가 모자익부터 시작해서 어떻게 많들어지게 되었는지가 재미있게 나와 있다.(한국어)
  • MVP는 최적화가 아닌 학습을 위해 존재한다 : MVP를 정해진 시간 내에 만들 수 있는 최소한의 기능이나 한두 개의 핵심 기능이라고 말하지만 오해가 많은 개념이고 핵심은 최적화보다는 학습이라고 설명하고 있다. 이는 MVP를 출시한 후에 사용자에게 피드백을 받아서 빠른 개선을 하는 데 목적이 있고 꼭 필요한 기능과 있으면 좋은 기능을 구별하는 것이 중요하기 때문이다.(한국어)

IT 업계 뉴스

프로젝트

  • aws-navbar-extension : AWS 콘솔에서 리전별로 색을 다르게 표시하고 알아보기 쉽게 국기도 표시해 주는 브라우저 익스텐션
  • ESLint Playground : ESLint의 규칙을 테스트해보고 설정을 다운받을 수 있는 플레이그라운드 페이지가 공개되었다.
  • Visual Studio Code의 HadhiCorp HCL 익스텐션 : HCL v2를 지원하는 VS Code 익스텐션을 HashiCorp에서 공식적으로 공개했다.
  • fontkit : PDFKit에서 사용된 폰트 엔진으로 Node와 브라우저에서 사용할 수 있다.
  • StackRox Kubernetes Security Platform : 컨네이너의 위험 분석하고 보안 권장 사항을 제공하는 플랫폼으로 Red Hat에서 Red Hat Advanced Cluster Security for Kubernetes(RHACS)를 오픈소스로 공개한 것이다.
  • GitHub Star History : GitHub 저장소를 입력하면 스타 수가 증가하는 과정을 그래프로 그려준다.
  • System Font Stack : 시스템에 이미 설치된 기본 폰트를 Sans-serif, Serif, Mono로 구분해서 폰트 패밀리를 정리해 놓은 사이트.
  • kbar : command + k로 확장할 수 있는 명령어 인터페이스를 제공하는 React 컴포넌트
  • Tetragon : eBPF 기반으로 보안 옵저버빌리티 기능을 제공하고 보안 이벤트를 런타임에서 탐지하는 Cilium을 새로운 프로젝트

버전 업데이트

2022/06/01 18:06 2022/06/01 18:06