Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

기술 뉴스 #147 : 20-04-01

웹개발 관련

  • Build a Node.js Tool to Record and Compare Google Lighthouse Reports : chromelauncher와 lighthouse Node.js 모듈을 사용해서 웹사이트의 성능, 접근성, SEO를 평가해주는 Lighthouse의 리포트를 저장하고 이를 비교할 수 있게 자동화하는 방법을 설명하는 글이다.(영어)
  • Learn D3 : D3를 만든 Mike Bostock가 Observable 노트북에서 만든 D3 가이드 문서로 총 9편의 시리즈로 구성되어 있다. Hacker News에 Mike가 남긴 댓글을 보면 대부분의 가이드가 DOM 조작을 위한 selection으로 시작하는데 현대에서는 DOM을 잘 조작하지 않음므로 D3의 모듈성을 강조하고 싶었다고 한다.(영어)
  • Run Cypress Tests on Netlify Using a Single Line : 웹사이트 배포 서비스인 Netlify에서 플러그인 기능을 베타로 내놓아서 Cypress 플러그인을 연결해서 사이트를 빌드하면 Cypress 테스트를 돌리고 레코딩하는 방법을 설명한다. 해당 플러그인을 오픈소스로 공개해놓았기 때문에 플러그인을 제작할 때 참고하기도 좋다.(영어)
  • React Production Performance Monitoring : React의 Profiler API를 이용해서 프로덕션 사이트에서 React의 성능을 측정해서 매트릭을 Grafana 등 백엔드로 전송하는 방법을 소개하고 있다.(영어)

그 밖의 개발 관련

  • Rewriting the heart of our sync engine : Dropbox가 초기부터 만들어서 유지했던 동기화 알고리즘을 Python에서 Rust로 재작성했다. 초기에 작성되어서 디버깅이 어렵고 테스트하기도 어려웠기에 완전히 재작성하기로 결정했고 재작성을 위해 점진적 개선을 충분히 했는지, 기존 시스템의 이해도와 작업 시간 등 재작성이 가능한지, 어떻게 개선하고 있는지 제대로 알고 있는지 등을 체크리스트로 만들어서 4년간 작업해서 동기화 엔진을 재작성했다.(영어)
  • Setting Up Git Identities : 한 머신에서 여러 git 계정을 사용할 때 user.useConfigOnly 설정을 이용해서 global에 사용자 정보가 없으면 호스트네임을 사용하는 대신 오류를 던지게 설정하고 user.identity3.name 같은 식으로 여러 사용자 정보를 등록하고 identity라는 명령어로 쉽게 계정을 바꿔가면서 사용하는 방법이 나와 있다.(영어)
  • GitHub for mobile is now available : GitHub의 iOS/Android 앱이 정식으로 릴리스되었다.(영어)
  • A visual debugger for Jupyter : 사용자들이 오랫동안 요구하던 디버거가 추가되어서 Jupyter 코드에서 breakpoint를 걸어서 변수, 콜 스택 등을 볼 수 있다.(영어)

인프라 관련

  • 도커(Docker) 입문편 : Docker 설치부터 이미지를 만들어서 사용하는 방법까지 Docker가 어떻게 동작하는지 설명해서 쉽게 이해할 수 있게 알려주는 글이다. Docker Hub를 이용해서 마지막에 서버에 배포해서 사용하는 방법까지 나와 있다.(한국어)

볼만한 링크

  • JIRA를 하자! - 쿠키런 : 오븐브레이크의 JIRA 도입기 : 데브시스터즈의 QA 팀에서 여러 이슈 관리 프로그램을 사용하다가 Jira로 결정하고 회사에 도입한 과정을 정리한 글이다. 워크플로우, 보드 등 사전 준비를 통해서 사용하기 편한 설정을 준비하고 타팀의 피드백을 받으면서 변경한 내용이 나와 있다.(한국어)

IT 업계 뉴스

프로젝트

  • Diagrams : Python 코드로 클라우스 아키텍처를 그릴 수 있는 프로젝트.
  • Backstage : Spotify가 만든 오픈소스 개발자 포탈.
  • gqless : 직접 쿼리를 작성하지 않고 GraphQL 클라이언트를 작성할 수 있는 라이브러리.
  • Nano ID : URL에서 사용할 수 있는 ID 생성 JavaScript 모듈.

버전 업데이트

2020/04/01 03:50 2020/04/01 03:50

기술 뉴스 #146 : 20-03-15

웹개발 관련

  • Webpack 5 Module Federation: A game-changer in JavaScript architecture: Webpack 5에 추가될(현재 v5.0.0-beta.14) Module Federation 기능을 설명하는 글이다. 두 프로젝트 간에 헤더나 캐로셀 등 공통 영역이 있다면 npm 모듈로 빌드해서 배포하거나 공통으로 사용할 수 있는 다른 곳에 두고 받아오도록 해야 했으나 Module Federation 기능을 사용해서 Webpack 빌드를 할 때 외부에서 가져갈 수 있도록 설정하면 해당 React 컴포넌트를 다른 프로젝트에서 바로 가져가서 사용할 수 있고 의존성을 따로 지정할 필요도 없다. 이 기능은 Webpack 5의 핵심 기능 중 하나가 될 예정이고 Node.js 환경에서도 사용할 수 있다.(영어)
  • Aborting a signal: How to cancel an asynchronous task in JavaScript : JavaScript에서 비동기 작업을 취소하기 위해 WHATWG에서 만든 AbortController DOM API의 사용법을 설명하다. Node.js에서는 사용할 수 없지만 AbortControllersignalabort 변수를 이용해서 취소할 수 있는데 fetch가 이를 지원하므로 사용하는 방법을 설명하고 Promise 함수에서 활용하는 방법을 소개한다.(영어)
  • Is your website vulnerable? Let’s fix it! : 취약점 데이터로 웹사이트의 취약점을 분석해 주는 is-website-vulnerable로 웹사이트에서 사용 중인 서드파티 라이브러리의 취약점을 분석하는 방법을 알려준다.(영어)
  • Moving Forward from Chrome Apps : 2013년에 런칭했던 Chrome Apps가 3월부터 앱 등록/업데이트가 중단되고 12월에 모든 플랫폼에서 지원이 중단된다. 이 중단은 Chrome Extensions와는 관련이 없고 Extensions는 계속 지원한다.(영어)
  • eBay Motors: Screenshot Testing with Flutter : eBay에서 Motors 서비스를 Flutter를 이용해서 하나의 코드 베이스로 모바일 앱뿐만 아니라 웹과 데스크톱까지 만들었다. 이를 테스트하기 위해서 Flutter에서 제공하는 스크린샷 기반의 테스트를 이용하다가 중복 테스트 코드가 많아져서 사양한 테스트를 한 번에 하기 위해 golden_toolkit을 만들어서 공개했다.(영어)

그 밖의 개발 관련

  • CLUI: Building a Graphical Command Line : 온라인 개발환경 서비스를 만드는 repl.it에서 CLUI 개념을 설명한다. GUI가 접근성은 좋지만 복잡해질수록 기능을 찾기가 어렵고 CLI는 배우기가 어렵기 때문에 CLUI라는 프로젝트를 통해 마우스로도 접근할 수 있고 기능 찾기도 쉬우면서 인터렉티브한 CLI를 만들었고 repl.it에서 테스트할 수 있는 코드와 데모를 같이 제공한다.(영어)
  • Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app : 2011년에 만들어져서 크고 복잡해진 페이스북의 iOS 메신저 앱을 개편하려고 LightSpeed라는 프로젝트를 진행해서 100명 이상의 엔지니어가 투입되어 앱의 시작 소요 시간은 반으로 용량은 1/4로 줄였다. OS의 기능을 최대한 사용, UI 재사용, SQLite을 최대한 활용하려고 구축한 MSYS 플랫폼으로 접근 단일화, 서버 브로커를 이용해서 SQLite 데이터를 서버에 전송이라는 4개의 원칙을 만들어서 작업했다고 한다.(영어)
  • A successful Git branching model : git-flow로 알려진 Git의 브랜칭 모델을 소개했던 저자가 10년이 지나(원글은 2010년에 쓰여짐) 글 서두에 추가 의견을 남겼다. 그동안 git-flow가 표준에 일종처럼 쓰였는데 웹앱처럼 지속적인 배포를 하는 경우는 훨씬 간단한 플로우가 어울리고 명확한 버전 릴리스가 있고 여러 버전을 동시에 관리해야 할 때에 git-flow가 적합하다고 정리했다. 나도 git-flow과 과하게 복잡하다고 생각하는 편이라서 동의한다.(영어)
  • 정산지기를 향한 첫걸음 (feat. 파일럿 프로젝트) : 우아한형제들에 신입 개발자로 입사해서 정산시스템 어드민 페이지를 파일럿 프로젝트로 만들고 피드백 받으면서 개선해나가고 느낀 점을 정리한 글이다. @Transactional 추가, private/public 메서드 정의, Pageable 개선 등 주 차별로 피드백 받으면서 수정한 설계와 코드를 보여주고 있다. 두 달간의 파일럿 프로젝트라고 하는데 이 글을 통해서 얼마나 많이 고민하고 배웠는지를 알 수 있고 비슷한 고민할 때도 많은 도움이 될 내용이다.(한국어)
  • Announcing RubyGems.org Stats : RubyGems가 릴리스한 지 10년이 되었는데 많은 사람이 궁금해 하던 통계를 볼 수 있는 RubyGems.org stats가 열렸다. 이를 통해 Ruby, Bundler, RubyGem의 버전, 사용자의 환경 등을 통계로 볼 수 있다.(영어)

인프라 관련

  • How the Jsonnet-based project Tanka improves Kubernetes usage : Grafana에서 만든 Jsonnet으로 Kubernetes를 설정하는 Tanka 프로젝트에 관해 FOSDEM 2020에서 발표한 내용을 정리한 글이다. YAML이 확장성이나 유연성이 적어서 Jsonnet의 Functions, Patchs, Imports, Packages를 이용해서 YAML보다 유연하게 설정할 수 있다고 한다.(영어)
  • 하루에 1000번 배포하는 조직 되기 : 뱅크샐러드에서 기존 git-flow와 Travis CI를 이용한 배포환경에서 더 잦은 배포를 하기 위해서 Git 브랜칭 전략을 master만 남겨둔 채로 간소화하고 GitHub Actions를 CI/CD로 사용하고 Slack App을 개발해서 슬랙에서 자동으로 배포 과정이 공유되고 히스토리를 볼 수 있게 개선한 과정이다.(한국어)
  • DevOps 엔지니어의 Redis Test 분투기 - Part 1 : 마켓컬리에서 Redis를 도입한 뒤 겪은 에러의 문제를 찾기 위해 레디스를 공부하고 테스트용 node.js 애플리케이션을 작성하고 nGrinder로 부하테스트를 하면서 원인을 찾고 팀과 논의를 했다고 한다.(한국어)

볼만한 링크

  • The Myth of the T-Shaped Developer : 개발자의 커리어를 설명하면서 제너럴리스트는 업무 영역이 넓지만, 특정 기술이나 실천 방법을 깊게 보지 못하고 스페셜리스트는 전문성을 인정받지만, 특정 기술에 의존적이면서 시야가 좁아질 수 있다. 많이들 말하는 T자형 개발자를 이상형으로 말하지만, 시간이 Comb-Shaped 개발자, 즉 많은 영역에서 제너럴리스트보다 깊게 알면서 여러 분야에서 스페셜리스트인 개발자가 되어야 한다고 하고 있다.(영어)
  • 디벨로퍼 아드보캇은 뭘 하는 사람인가요? : Microsoft에서 아직 국내에서는 잘 알려지지 않은 DevRel(Developer Relations)과 디벨로퍼 아드보캇의 역할을 설명한 글이다. 콘텐츠를 생산하고 전파할 수 있으며 커뮤니티와 회사의 중간 역할을 해야 하므로 소통을 잘 해야 한다고 하고 있다(한국어)
  • 배리어블 폰트 : 보통 폰트는 하나의 파일에 하나의 스타일을 가지고 있는데 한 폰트 파일에서 다양한 굵기와 폭을 사용자가 원하는 대로 사용할 수 있는 폰트를 배리어블 폰트라고 한다. 역사는 짧고 아직 잘 안 알려졌음에도 대부분의 OS와 도구들에서 이미 지원하고 있다.(한국어)
  • 10분 만에 읽는 디자인 시스템 A to Z : 최근에 많이 거론되는 디자인 시스템의 개념을 설명하는 글이다. 디자인 시스템이 무엇이고 스타일 가이드/패턴 라이브러리가 어떻게 다른지 왜 주목받고 있어 예시로는 어떤 디자인 시스템이 있는지를 보여준다. 이 글을 통해 디자인 시스템을 제대로 이해하기는 어렵겠지만 개념을 이해하는 데 도움이 된다.(한국어)

IT 업계 뉴스

프로젝트

  • KubeVault : HashiCorp Vault를 Kubernetes 클러스터에서 실행하는 도구 모음.
  • Google Open Source : Google의 오픈소스 프로젝트와 그 활동을 모아놓은 웹사이트.
  • scriptlint : package.jsonscripts 부분의 규칙을 검사하는 도구.

버전 업데이트

2020/03/15 20:23 2020/03/15 20:23