Outsider's Dev Story

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

기술 뉴스 #139 : 19-12-02

웹개발 관련

  • 만화로 보는 DNS over HTTPS : 모질라의 A cartoon intro to DNS over HTTPS의 한국어 번역본이다. HTTPS를 이용하더라도 DNS를 조회할 때는 어떤 사이트에 접속하려는지 볼 수 있게 되는데 Trusted Recursive Resolver(TRR)와 DNS over HTTPS(DoH)로 이를 어떻게 보호하고 어떤 부분은 감출 수 없는지를 설명하는 글이다.(한국어)
  • SPA에서의 접근성에 대해 배운 것들 : SPA을 만들면서 접근성에 대해 배운 것을 정리한 글이다. 보통 <button>, <input> 대신 <div>, <span>을 많이 사용하는데 이렇게 되면 포커스나 스크롤 위치를 수동으로 다루어 주어야 하므로 접근성 관련해서 버그가 더 많이 나올 수밖에 없다. 그리고 접근성을 강화해서 aria 태그를 이용하면 테스트도 더 쉽게 작성할 수 있다고 얘기하고 있다.(한국어)
  • Build a PWA Using Only Vanilla JavaScript : 바닐라 자바스크립트 즉, 다른 프레임워크를 사용하지 않고 JavaScript로 PWA를 구현하는 과정을 설명하고 있다. Manifest, Service Worker 등 PWA에 필요한 기능을 설명하고 이 구현과정을 설명하면서 예제 소스도 함께 제공하고 있다.(영어)
  • Redux Style Guide : Redux 공식 사이트에 올라온 Redux 코드를 작성할 때의 추천 패턴과 베스트 프랙티스를 모아놓은 스타일 가이드다.(영어)
  • Time Traveling State Debugger — Reactime — Now Supporting Concurrent Mode, Routers, and more : Redux DevTools에 영향을 받아 만든 크롬 개발도구인 Reactime 3.0에 Time Traveling 디버깅 기능이 추가되어 React 앱에서 사용자 액션에 따른 상태 변화를 다시 재현하면서 디버깅할 수 있다.(영어)
  • JavaScript ‪Module Cheatsheet : ECMAScript Modules에서 importexport를 어떻게 사용하는지 이름 있는 경우 default를 쓰는 경우 등 다양한 사례별로 정리한 글이다.(한국어)

그 밖의 개발 관련

  • Announcing core Node.js support for ECMAScript modules : Node.js 13.2.0 버전부터 import, export 문법으로 사용하는 ECMAScript 모듈을 지원한다. 이전 버전까지는 --experimental-module 플래그를 사용해야 했다. 모듈은 .mjs 확장자를 사용하거나 해당 파일의 가장 가까운 위치에 있는 package.json에서 typemodule로 지정되어 있어야 한다. 기본의 CommonJS는 cjs 확장자를 사용하거나 type이 없거나 commonjs로 지정되어 있어야 한다.(영어)
  • Better Android Testing at Airbnb — Part 1: Philosophy and Mocking, Part 2: Screenshot Testing : Airbnb에서 Android 테스트 자동화를 한 과정을 설명한 7편의 시리즈 글 중 첫 두 편의 글이다. Espresso를 쓰다가 Jetpack의 ViewModel을 도입해서 MvRX 라이브러리를 오픈소스로 공개하고 사용해 온 뒤 더 테스트를 잘할 수 있도록 모킹 시스템을 도입해서 MvRX 라이브러리에 통합시키고 이후 스크린샷 비교를 위해 Happo 서비스를 도입했다고 한다.(엉여)
  • Meet Doctor, a new React Native command : React Native 개발 환경의 오류를 검사할 수 있는 doctor 명령어가 추가되었다.(영어)

인프라 관련

볼만한 링크

  • 스프링러너, 벌써 일 년 : 스프링을 배울 수 있는 워크숍을 1년 동안 운영하고 회고하는 글이다. 스프링러너 워크숍에서는 스프링의 사용법과 응용법을 가르치는 것을 목표로 하고 있고 이 과정을 통해서 스프링에 대해서 배울 수 있지만 16시간 동안 많은 내용을 가르치기 때문에 참가자들이 컨디션 조절을 잘해야 한다는 어려움이 있다.(한국어)

IT 업계 뉴스

프로젝트

  • Browser Default Styles : HTML 요소의 브라우저별 기본 스타일을 비교할 수 있는 사이트.
  • Lighthouse CI : Lighthouse를 CI에서 돌릴 수 있게 하는 CLI.
  • whocanuse : 색상 대비로 인한 접근성을 검사해 주는 사이트로 배경색과 텍스트의 색을 입력하고 접근성에 대한 결과를 볼 수 있다.
  • WebGLStudio.js : 웹 기잔의 3D 그래픽 에디터.
  • Gridsome : Vue.js를 이용한 정적 웹사이트 생성 도구.
  • Fitty : 부모 컨테이너 사이즈에 텍스트를 맞추는 JavaScript 라이브러리.
  • Clusterlint : Kubernetes 클러스터가 베스트 프렉티스를 따르고 있는지 검사해주는 도구로 Digitalocean에서 만들었다.

버전 업데이트

2019/12/02 04:19 2019/12/02 04:19

기술 뉴스 #138 : 19-11-16

웹개발 관련

  • How Concurrent React changes the game for data-heavy UI : React에 실험적 기능으로 들어가 있는 Suspense와 Concurrent 모드를 사용하면 어떻게 컴포넌트 로직에서 데이터 로딩을 분리할 수 있는지를 설명하는 글이다. 설명하는 예제도 Suspense와 Concurrent 모드를 어떻게 사용하면 좋을지 이해하기 쉽게 구성해서 보여주고 있다. 다만 이 기능을 아직 초기 실험 기능이라서 많이 바뀔 것이므로 실제로 사용할 수는 없지만, 글쓴이는 이 기능이 아주 강력할 것이라고 기대감을 표현하고 있다.(영어)
  • The Maturing of QUIC : 지금은 HTTP/3가 된 QUIC이 어떻게 발전해 왔는지를 설명한 글이다. Google이 만들어서 자사 서비스에 적용했던 gQUIC에 기반해서 IETF 내에서 Bar-BoF라는 이름으로 공개 토론을 시작하고 이후에 공식 워킹그룹으로 발전하게 된다. Google이 했던 실험 결과를 바탕으로 많은 토론이 오간 후 핸드쉐이크, 패킷 넘버 암호화, 패킷 헤더, 커넥션 ID 등이 어떤 논의를 통해 지금의 모양이 되었는지를 설명하고 있다.(영어)
  • Get started with Web Bundles : 웹사이트 전체를 하나의 바이너리 파일로 만들 수 있는 Web Bundles를 소개하고 있다. .wbn 확장자를 가지는 이 파일은 HTML, CSS, 이미지, JavaScript를 모두 하나의 파일에 넣을 수 있고 오프라인에서도 실행할 수 있다. 아직 크롬에서 해결되지 않은 이슈들이 있지만 오프라인 상태에서 친구와 웹번들 게임을 하는 시나리오를 설명하고 go/bundle CLI로 웹번들을 만드는 방법을 설명하고 있다.(영어)
  • Using the Chrome UX Report to look at performance in the field : 보통 CrUX로 알려진 Chrome UX Report를 활용하는 방법을 설명한 글이다. 이 데이터는 동의한 실제 사용자의 데이터를 모은 것으로 최소 입력 지연시간, DOM 콘텐츠 로딩시간 등 성능과 관련된 많은 데이터가 있고 전세계 사용자의 이런 데이터가 궁금하다면 Google Data Studio로 볼 수 있는 CrUX Dashboard나 PageSpeed Insights 혹은 BigQuery로 조회해서 볼 수 있다.(영어)
  • The state of JavaScript frameworks security report 2019 : 오픈소스 보안 업체인 Snyk에서 JavaScript 프레임워크의 보안 보고서를 공개했다. Angular와 React에서 보안취약점이 얼마나 발견되었고 각 프로젝트가 어떻게 다루고 있는지를 정리했고 뒷부분에는 Vue.js, Bootstrap, jQuery의 보안 상태도 정리되어 있다.(영어)
  • Announcing Gatsby Cloud : 웹사이트 프레임워크인 Gatsby에서 클라우드 서비스를 공개했다. Gatsby Cloud에서는 쉽게 사이트를 생성할 수 있는 Quickstart와 실시간 미리 보기, 300여 개의 CMS와 연동 기능을 제공하고 있다.(영어)

그 밖의 개발 관련

  • Let's Create a Simple Load Balancer With Go : Go 언어로 직접 라운드 로빈으로 동작하는 로드 밸런서를 만드는 방법을 설명하는 글이다. 라운드 로빈으로 리버스 프록시를 구현하면서 살아있는 서버에만 요청을 보낼 수 있도록 작성하면서 Atomic 오퍼레이션, Mutex 등 Go 언어에 관해 설명하고 있다.(영어)
  • Go.dev: a new hub for Go developers : Go 개발자를 위한 새로운 사이트 Go.dev가 공개되었다.(영어)
  • GitHub Action을 사용해 새로 올라온 전월세 방 목록 받아보기 : 전월세 방을 알아보기 위해서 "피터팬의 좋은방 구하기"라는 사이트를 매일 들어가 보는 번거로움을 줄이기 위해 사이트를 크롤링할 수 있는 스크립트에 조건을 넣고 GitHub Action으로 원하는 조건의 매물을 메일로 받아보게 만드는 과정과 코드가 나와 있다. 현실적인 문제를 적절한 기술해 해결한 부분이 재미있다.(한국어)
  • You Cannot Submit an Electron 6 (or 7) App to the Apple Store : Electron 6으로 만든 앱이 Apple한테서 비공개 API를 사용하고 있다며 스토어 등록을 거절당했다고 한다.

인프라 관련

  • LINE에서 Kafka를 사용하는 방법 - 1편, 2편 : Line에서 Kafka를 적극적으로 도입해서 지금은 데이터 허브의 역할을 하고 있다고 한다. 이렇게 시스템의 핵심적인 역할로 Kafka를 운영하면서 겪은 장애의 원인을 찾아가는 과정을 설명하고 있고 아직 3편은 올라오지 않았다.(한국어)
  • EC2, Fargate 약정 할인 AWS Savings Plans 발표 : AWS에서 비용을 아낄 수 있는 Reserved Instances 외에 더 간단한 조건으로 비용을 아낄 수 있는 Savings Plans이 발표되었다. 여기에는 Copmute Savings Plans와 EC2 Instance Savings Plans가 있는데 시간당 사용금액과 약정 기간에 따라 할인율이 달라지는 방식이다.(한국어)
  • Jaeger Graduates CNCF, Sees a Future Without Native Jaeger Clients : 분산 트레이싱 Jaeger가 CNCF 졸업 프로젝트가 되었다.(영어)
  • Red Hat Introduces open source Project Quay container registry : Red Hat이 CoreOS의 Quay 컨테이너 레지스트리를 Red Hat Quay라는 이름으로 새롭게 오픈소스로 공개했다.(영어)

볼만한 링크

  • The State of the Octoverse : GitHub에서 사용자들의 활동을 분석해서 작년부터 공유하는 Octoverse가 새로 업데이트되었다. 2019년에 GitHub 기준으로 사용자, 학생, 기업의 사용이 얼마나 증가했고 어느 나라가 많이 성장하고 있는지 등 다양한 통계를 볼 수 있다.(영어)
  • 웹 푸시 알림 서비스, 샌디 : 8개월간 웹 푸시 알림 서비스 창업을 하고 그만두는 과정을 정리한 글이다. 웹 푸시의 가능성을 믿고 시작해서 열심히 개발해서 다양한 플랫폼 지원 및 부가 기능을 개발하였지만, 너무 좋은 제품에 집착해서 고객의 목소리를 신경 쓰지 못하고 제품 완성에만 집중하다가 결국 타이밍과 고객을 놓쳐서 정리하게 되었다고 얘기하고 있다.(한국어)
  • 창업 3주년 회고 : 소프트웨어 교육 업체인 코드스쿼드가 창업 3주년을 정리했다. 그동안 참여한 지원자/수강생, 커밋, PR 수 등을 시각화하고 NEXT에 이어서 코드스쿼드에서 교육 커리큘럼을 만들면서 어떤 교육을 해야 하는지 목표가 무엇인지 등에 대한 고민이 담겨있다.(한국어)

IT 업계 뉴스

  • GitHub for mobile : GitHub에서 모바일 앱을 내년 초에 릴리스할 것이라고 밝혔다. 이 사이트에서 iOS/Android 앱의 베타 신청을 할 수 있다.(영어)
  • Re-Licensing Sentry : Sentry BSD-3 라이센스에서 BSL(Business Source License)로 바꾼다고 발표했다. 이 라이센스는 Sentry 서비스를 상업적으로 제공할 수 없고 코드는 36개월 뒤에는 Apache 2.0으로 바뀐다. Sentry를 오픈소스로 개발된 제품으로 사용자가 자유롭게 사용하도록 하고는 싶지만, Sentry를 가져다가 Sentry와 같은 서비스를 제공하는 것은 막고 싶었기 때문에 이 라이센스를 선택했다고 한다. 여전히 회사에서 센트리를 사용하는 데는 아무런 제약이 없다.(영어)
  • GitHub Archive Program : GitHub이 후세에 남기기 위해 2020년 2월 2일 모든 공개 저장소의 스냅숏을 북극 땅 250m 아래 저장한다는 프로그램을 공개했다.(영어)
  • SoftBank-backed Yahoo to merge with Line app : 야후 재팬의 45% 지분을 가진 소프트뱅크와 Line의 73% 지분을 가진 네이버가 협상을 해서 야후 저팬과 라인을 운영할 새로운 회사를 출범시킬 예정이라고 한다.(영어)
  • JEP 369: Migrate to GitHub : OpenJDK도 Mercurial에서 Git으로 갈아타자는 JEP 357에 이어 GitHub으로 이동하자는 JEP 369가 올라왔다.(영어)
  • MS, 오픈JDK 자바 생태계 공식 합류 : Microsoft가 오라클과 컨트리뷰터 계약(OCA)을 맺고 OpenJDK 생태계 참여자고 합류하게 되었다.(한국어)
  • Facebook Pay : Facebook이 결제 서비스를 공개했다.(영어)
  • Introducing Our New Company Brand : 페이스북이 새로운 회사 로고를 공개했다.(영어)

프로젝트

  • Visual Studio Online : Visual Studio를 서버에 설치해서 온라인으로 이용할 수 있는 Visual Studio Online이 공개되었다. 유료서비스다.
  • SeriesCI : CI를 위한 타임 시리즈 서비스.
  • draw.io : 온라인 다이어그램 사이트인 https://www.draw.io/의 소스코드다.
  • Postwoman : Postman 같은 API 테스트 도구.
  • Cardboard SDK : Google에서 공개한 카드보드의 VR을 만들 수 있는 SDK.

버전 업데이트

2019/11/16 20:35 2019/11/16 20:35