Outsider's Dev Story

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

기술 뉴스 #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에서 import와 export를 어떻게 사용하는지 이름 있는 경우 default를 쓰는 경우 등 다양한 사례별로 정리한 글이다.(한국어)

그 밖의 개발 관련

  • Announcing core Node.js support for ECMAScript modules : Node.js 13.2.0 버전부터 import, export 문법으로 사용하는 ECMAScript 모듈을 지원한다. 이전 버전까지는 --experimental-module 플래그를 사용해야 했다. 모듈은 .mjs 확장자를 사용하거나 해당 파일의 가장 가까운 위치에 있는 package.json에서 type이 module로 지정되어 있어야 한다. 기본의 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에서 만들었다.

버전 업데이트

Valid HTML5 Valid CSS WCAG 2.1 AA tested