Outsider's Dev Story

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

기술 뉴스 #148 : 20-04-15

웹개발 관련

  • In-Browser Performance Linting With Feature Policies : Feature-Policy 헤더를 이용해서 웹사이트의 성능을 검사하는 방법을 소개하는 글이다. Feature-Policyoversized-images, unoptimized-lossy-images, unoptimized-lossless-images, unsized-media를 이용해서 의도하지 않은 이미지를 찾아내서 브라우저가 차단할 수 있도록 할 수 있다. 현재 모든 브라우저가 지원하는 것은 아니지만 프로덕션에 내보내진 않고 크롬 익스텐션으로 만들어서 개발하면서 정책을 위반하는 미디어가 있는지를 검사한다.(영어)
  • 새로운 마크다운 파서가 필요한 이유 : 인기를 많이 끌고 있는 Toast UI 에디터에서 마크다운 지원을 강화하기 위해서 새로운 마크다운 파서를 만들게 되는 과정을 적은 글이다. 마크다운을 실시간 미리 보기와 함께 사용하고 있지만 여러 마크다운 라이브러리가 용도에 따라 나뉘어 있기 때문에 구문 강조가 다르게 되는 경우가 있고 마크다운을 수정할 때마다 미리 보기를 새로 갱신하기 때문에 성능에 대한 문제가 있다. 이런 부분을 이미 해결하려고 했던 시도가 IDE에 있는데 크게 트리시터(tree-sitter)와 언어 서버 프로토콜(LSP)로 나눌 수 있고 이에 대한 장단점을 설명한 뒤 Toast UI의 목적에 맞게 commonmark.js를 수정해서 ToaskMark를 만들었다고 한다.(한국어)
  • Profiling React.js Performance : Reactdml Profiler API를 이용해서 컴포넌트의 성능을 측정하고 클릭 등 인터렉션의 성능을 측정할 수 있는 Interaction Tracing API를 사용하는 방법을 설명하고 Puppeteer로 이를 자동화하는 방법을 소개한다.(영어)
  • Understanding (all) JavaScript module formats and tools : JavaScript의 모듈화 방식을 정리한 글이다. 순수 JavaScript로 모듈화하는 방식부터 CommonJS, AMD, UMD의 형식 및 사용법을 설명하고 지금의 ES module과 TypeScript에서의 모듈, Webpack과 Babel의 방식을 요약해서 비교하고 있다.(영어)
  • ECMAScript 2020: the final feature set : ECMAScript 2020에 포함될 명세가 나왔고 TC39가 이를 승인했다.
  • (번역) 세상은 왜 CSS개발자를 필요로 하는가? : CSS의 발전 과정을 설명하고 Bootstrap부터 CSS-in-JS까지 발전해오면서 CSS를 제대로 안 배우고 사용하는 방향으로 가고 있다고 하고 특히 CSS-in-JS에서 CSS 클래스를 기계적인 문자로 바꾸는 것을 비난하고 있다. 이렇게 했을 때 CSS가 꼬이면 문제가 되고 CSS 개발자라고 부르는 전문 인력이 따로 필요하다고 주장한다. 이 사람의 주장만큼은 아니어도 CSS가 중요하다는 부분에는 동의하기에 CSS 개발자를 따로 분리하기보다는 CSS도 중요한 이유를 더 자세히 설명했으면 좋았을 것 같지만 한번 고민해 볼 만한 이슈라고 생각한다.(한국어)

그 밖의 개발 관련

  • From 48k lines of code to 10—the story of GitHub’s JavaScript SDK : Gregor Martynus가 Node.js 초기에 GitHub SDK를 만들고 이후 GitHub에 고용되어 8천 라인짜리 라우트 파일과 TypeScript/Flow 타입 정의로 된 파일을 플러그인 형태로 바꾸고 테스트를 추가해서 현재의 안정적인 공식 SDK가 되는 과정이 나와 있다.(영어)
  • Moving from reCAPTCHA to hCaptcha : CloudFlare에서 Google의 reCAPTCHA를 계속 사용하고 있었고 그동안 프라이버시 문제로 얘기는 있었지만, 우선순위로 인해 작업은 진행되지 않다가 이번에 Google이 reCAPTCHA에 과금을 하기로 하면서 여러 솔루션을 비교한 뒤에 hCaptcha로 갈아타기로 했다고 한다.(영어)
  • 서머타임과 배치작업 : 서머타임이 있는 지역에서 크론 등의 작업을 돌릴 때 작업이 안 돌거나 혹은 두 번 돌거나 다른 시간에 도는 상황을 파악하기 위해서 crontab과 Spring scheduled task를 만들어서 비교해 본 결과이다. crontab은 문서에 서머타임에 대한 고려가 어느 정도 되어 있는 것으로 나와 있고 실제로도 실험 결과에서도 기대에 가깝게 결과가 나왔다. 출장 갔다가 비슷한 고민 한 적이 있는데 서머타임이 없는 우리나라에서는 겪기 힘든 경험이고 1년에 1번밖에 실험을 못 한다는 점에서도 재밌는 글이다.(한국어)
  • Go의 철학 : The Zen of Go를 번역한 글이다. Go의 패키지는 하나의 목적만 달성하고 에러는 명시적으로 처리하며 동시성은 호출자에게 맡긴다는 등 Go의 철학을 정리했다.(한국어)
  • Deno 1.0 : TypeScript 런타임인 Deno의 1.0 버전 릴리스가 5월 13일로 잡혔다.(영어)

인프라 관련

볼만한 링크

  • DevOps 팀은 원격근무를 추구하면 안되는 것일까? : HBSmith가 창업했을 때부터 15명이 넘는 지금까지 원격으로 업무를 진행하면서 어떻게 DevOps 문화를 유지하고 있고 업무를 진행하는지를 정리한 슬라이드와 이를 정리한 글이다. 2주 단위 스프린트를 진행하면서 각 이슈의 스토리 포인트를 부여해서 진행하고 매일 Did list를 작성해서 서로 간의 업무를 공유하고 있다. 스토리 포인트 부분에서 "점점 더 많은 이슈를 처리할 수 있게 되는 게 아니라, 동료와 자기 자신 모두가 납득할수 있는 기준을 스스로 세우고 지킬수 있게 되는 것이다" 부분이 인상적이었다.(영어)
  • 실리콘밸리 스타트업에서 성장하기 : 샌프란시스코에서 심플해빗이라는 스타트업에 Growth Lead로 합류해서 2년간 배운 것들을 정리한 글이다. 심플해빗을 성장시키기 위해서 어느 부분 최적화했는지에 관한 고민의 과정이 나와 있고 그에 따라 500%의 매출 성장을 이루면서 스스로 "문제를 정의하고, 해결하는 사람"으로 정의하고 원칙을 세워서 진행했다고 하는데 얼마나 많이 고민하면서 문제를 해결했는지를 알 수 있다.(한국어)

IT 업계 뉴스

  • GitHub is now free for teams : GitHub이 작년에도 많은 기능을 무료로 풀었지만, 아직 조직을 만들어서 비공개로 개발하려면 유료 결제를 해야 했는데 이번에 이 기능까지도 무료로 풀었다. 조직에서도 비공개 저장소와 협업자를 추가할 수 있고 코드 소유자 등의 유료 기능은 $9에서 $4로 인하되었다.(영어)
  • COVID-19 Kills Renowned Princeton Mathematician, 'Game Of Life' Inventor John Conway In 3 Days : 라이프게임을 만드신 John Conway 박사님이 지난 11일 코로나로 별세하셨다. 삼가 고인의 명복을 빕니다.(한국어)
  • Leaving pytest for now : pytest 한 메인테이너의 toxic behavior 때문에 pytest 메인테이너에서 물러난다고 밝혔다. 현재까지 3명의 메인테이너가 떠난 것으로 알려졌다.(영어)

프로젝트

  • Lens : Kubernetes IDE.
  • diff-so-fancy : diff CLI 프로그램.
  • markmap-lib : Markdown으로 마인드맵을 그리는 라이브러리.
  • HTML5 Accessibility : 각 브라우저가 기능별 접근성을 얼마나 지원하고 있는지를 보여주는 사이트.

버전 업데이트

2020/04/16 04:31 2020/04/16 04:31

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