Outsider's Dev Story

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

기술 뉴스 #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

기술 뉴스 #145 : 20-03-02

웹개발 관련

  • The Facts: Mozilla’s DNS over HTTPs (DoH) : Firefox가 DNS 쿼리를 안전하게 보호할 수 있는 DNS-over-HTTPS(DoH)를 미국에서 기본으로 활성화하기로 했다. Cloudflare, NextDNS 등과 Trusted Recursive Resolver program을 함께 하며 개인 정보를 보호하기 위해 정보 보관 기간을 짧게 하는 등 엄격한 제약을 정해놓고 있다.(영어)
  • Stealing JWTs in localStorage via XSS : 로컬스토리지에 저장된 JWT를 XSS를 이용해서 통째로 덤프 떠서 공격자 서버로 보내도록 하는 방법을 설명하는 글로 로컬스토리지에는 민감한 데이터를 저장하지 않을 것을 권장하고 있다.(영어)
  • Request is deprecated : Node.js 초반부터 오랫동안 사용되던 HTTP 클라이언트 라이브러리인 Request가 2월 11일로 완전히 Deprecated 되었다.(영어)

그 밖의 개발 관련

  • LINE 메시징 서버가 새해 트래픽을 대비하는 과정 : 새해 인사로 메시지가 많이 발생하는 메신저의 특성에 따라 Line에서 새해를 준비하는 과정을 설명한 글이다. 신년을 대응하기 위해서 매년 준비한 내용과 결과 트래픽을 기록해 두고 프로세스를 만들어서 매년 준비하고 있고 작년에는 메시징 서버의 성능 개선을 하고 Redis 클러스터에서 클러스터를 분리하고 악성 사용자를 차단하는 등의 로직을 넣었다고 한다.(한국어)
  • Armeria로 Reactive Streams와 놀자! - 1, 2 : 1편에서는 동기/비동기, 스트림, 백 프레셔의 개념을 설명하고 Java의 Reactive Streams API의 사용법을 설명하고 2편에서는 이 Reactive Streams를 Armeria에서 어떻게 이용하는 지를 보여주고 있다.(한국어)
  • What’s New in Java 14? : 3월 17일에 릴리스될 Java 14에 새로 추가되는 Switch 표현식, 디버깅이 쉽도록 개선된 NullPointerException, 아직 실험적인 패키지 도구, 가비지 컬렉션 개선 등이 설명되어 있다.(영어)
  • Introducing Dispatch : Netflix에서 위기관리를 할 수 있는 플랫폼 Dispatch를 오픈소스로 공개했다. Dispatch는 장애가 생겼을 때 API로 연동하거나 사용자가 직접 등록할 수 있도록 해서 장애를 어떻게 처리하고 미래에 어떻게 관리할 수 있는지에 대한 정보를 한곳에 모을 수 있다.(영어)
  • 테스트 커버리지 100% : 클린 코더 책을 보고 회사 프로젝트에서 강제로 테스트 커버리지를 100% 까지 끌어올리고 1년간 유지한 경험을 정리한 글이다. 세부 테크닉 보다 100%까지 끌어올리기가 얼마나 어려웠는지 그리고 100%로 유지하고 나니 리팩토링 등 코드 수정을 할 때 상당한 자신감을 가질 수 있었다고 하고 있다.(한국어)

인프라 관련

  • Architecting Kubernetes clusters — how many should you have? : Kubernetes 클러스터를 구성할 때 앱이 3개만 있어도 dev, staging, production 환경별로 총 9개의 조합이 나오는데 이때 하나의 클러스터에 모두 담을지 환경별로 클러스터를 만들지, 앱별로 클러스터를 만들지 등 다양한 고민을 하게 되는데 각 선택에 따른 장단점을 정리한 글이다.(영어)

볼만한 링크

  • [인터뷰] 슬랙 CTO에게 직접 듣는 빛과 그늘 (1), (2) : 일본의 NewPicks가 Slack의 CTO 칼 핸더슨과 인터뷰한 내용을 번역 정리한 글이다. Slack의 발전 과정도 볼 수 있지만, Slack을 이용하는 일본의 독특한 문화와 개발자가 의도한 여러 가지 편리한 기능들을 볼 수 있다.(한국어)
  • Sketch에서 Figma로, 삐빅! 환승입니다. : Ridi의 디자이너가 Sketch로 디자인을 하다가 최근 주목받고 있는 Figma로 갈아탄 경험을 정리한 글이다. Sketch를 쓸 때는 협업이 쉽지 않고 제플린을 따로 관리해야 하는 등의 불편함이 있었는데 Figma는 한 도구에 모든 기능이 다 들어있고 협업하기도 편하다는 점을 장점을 들고 있다. 한글 버그나 프로토타입 등 불편한 점과 함께 유용한 플러그인도 정리되어 있다.(한국어)

IT 업계 뉴스

프로젝트

  • grep.app : GitHub의 코드를 빠르게 검색할 수 있는 웹사이트.
  • Google Lighthouse for Firefox : Google Lighthouse의 Firefox 익스텐션.
  • Permission manager : Kubernetes RBAC과 사용자 관리를 할 수 있는 웹 UI.
  • Brunsli : Google에서 공개한 JPEG 리패키징 라이브러리로 손실없이 JPEG 파일의 용량을 22% 줄일 수 있다고 한다.
  • Rome : Babel과 Yarn을 만든 Sebastian McKenzie가 시작했고 Facebook의 팀이 개발 중인 JavaScript 툴체인.
  • esbuild : Go로 만든 JavaScript 번들러/미니파이어.

버전 업데이트

2020/03/02 20:20 2020/03/02 20:20