Outsider's Dev Story

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

기술 뉴스 #150 : 20-05-15

웹개발 관련

  • Improved Next.js and Gatsby page load performance with granular chunking : Chrome 팀에서 Next.js, Gatsby 등 생태계와 협업해서 성능을 개선하는 작업을 계속하고 있는데 JavaScript 청크 개선을 한 작업을 소개한 글이다. 페이지에 공통으로 사용하는 공통 코드를 별도로 번들링하고 있다면 기존에 사용하던 Webpack v3의 CommonsChunkPlugin 보다 v4의 SplitChunksPlugin을 사용해서 사용빈도나 크기에 따라 더 세세하게 나누는게 성능에 더 좋다는 점을 보여주고 있다. 브라우저별로 동시에 열 수 있는 TCP 연결의 수가 정해져 있는데 이 부분을 늘려가면서 테스트해서 세분화했을 때 성능 개선을 할 수 있다는 점을 보여주고 있다.(영어)
  • Web Content Accessibility Guidelines (WCAG) 2.1 한국어 번역본 : W3C 웹 콘텐츠 접근성 가이드라인(WCAG)의 한국어 번역본이다.(한국어)

그 밖의 개발 관련

  • Rebuilding our tech stack for the new Facebook.com : 2004년에 PHP로 구축하고 기능을 추가하면서 점점 느려졌던 Facebook.com의 웹사이트를 다시 설계해야 할 필요성을 느끼고 "as little as possible, as early as possible"라는 원칙 아래 React와 Relay로 재구축한 과정을 설명하는 글이다. CSS를 정리해서 80% 정도 줄였고 SVG를 JavaScript에서 바로 사용해서 성능을 개선했으며 페이지를 기본 레이아웃과 첫 인터렉션이 가능한 화면 등 3단계로 JavaScript 코드 스프리팅을 해서 초기 속도를 개선했다.(영어)
  • New from Satellite 2020: GitHub Discussions, Codespaces, securing code in private repositories, and more : 온라인으로 열린 GitHub Satellite 콘퍼런스에서 VS Code의 인프라를 이용해서 웹상에서 바로 코드를 수정하고 실행까지 해볼 수 있는 Codepsaces, 게시판처럼 토론할 수 있는 Discussion, CodeQL을 이용한 취약점 검사 등이 발표되었다.(영어)
  • npm v7 Series - Introduction : npm의 다음 버전인 7에서 개선될 부분을 정리한 글이다. Arborist 모듈에서 트리 관리 및 분석을 담당하게 되고 자동으로 peerDependencies를 설치한다.package-lock.json 형식이 개편되고 yarn.lock 파일 처리도 추가되며 성능이 개선될 예정이라고 한다.(영어)
  • 코틀린에서 하이버네이트를 사용할 수 있을까? : Kotlin에서 ORM 프레임워크인 Hibernate를 사용할 수 있는지 검증한 내용이다. Kotlin의 data class로 사용해 보려고 했지만 프록시를 생성할 수가 없어서 포기하고 allopen, noarg 플러그인, kassava 라이브러리로 하이버네이트를 사용할 수 있음을 보여주고 있다.(한국어)

인프라 관련

볼만한 링크

  • Octoverse spotlight: An analysis of developer productivity, work cadence, and collaboration in the early days of COVID-19 : Covid19 상황이 개발자에게 어떤 영향을 주는지 확인하기 위해서 GitHub의 데이터로 2020년 1~3월과 2019년의 1~3월을 비교 분석한 보고서다. 보고서에 따르면 작업량은 거의 변화가 없거나 오히려 약간 증가했으면 이슈당 참여 사용자가 늘어나는 등 업무 환경이 분산 환경으로 바뀌고 있는 것으로 보인다고 한다. 그리고 집안일 등을 하면서 같은 업무 시간을 유지하려다 보니 전체 업무 시간은 하루에 1시간 정도 증가하는 것으로 나타나고 이 때문에 번아웃의 위험성이 있어 보인다. 그리고 업무를 멈추고 창의적인 일이나 학습으로 전환하는 일에 익숙해 진 듯 오픈소스에 대한 기여는 많이 증가했다.(영어)
  • 팀 문화의 탄생 : 우아한형제들의 팀 내에서 2주 단위 스프린트를 진행하며 회고할 때마다 Keep/Problem/Try를 정리해서 팀 문화를 개선해 나가는 과정이 나와 있다. 무심코 넘어갈 수 있는 일이라도 구체적인 액션 아이템으로 만들어서 개선해 나갔는데 코드 네이밍을 다시 한다거나 스레드 제목의 규칙을 정한다거나 Keep/Problem에서 어떤 액션 아이템으로 개선해 나갔는지 구체적으로 설명하고 있어서 다른 팀의 얘기인데도 많은 도움이 된다. 이렇게 하면 정말 점점 좋은 문화가 자리잡혀 갈 거로 생각한다. "팀 문화로 예를 든 여러 가지는 제가 보기엔 좋은 서비스를 만들기 위한 수단입니다. 우리가 이용할 도구이지 그 자체가 목적이 아닙니다."가 가장 인상적이었다.(한국어)
  • 스포카가 OKR로 목표를 달성하기까지. : 목표 설정 프레임워크인 OKR을 이용해서 "사용자가 도도 메시지에서 프로모션을 많이 생성하게 합니다"라는 목표를 만들고 정보를 수집하고 분석한 후 측정 가능한 핵심 결과를 정의해서 진행한 과정이 나와 있다. 각 단계에서 팀이 어떤 조사를 하고 매주 진행 상황을 화이트보드에 공유하고 개별 상태를 표시하는 등 OKR을 어떻게 진행했는지 자세히 나와 있다.(한국어)
  • 32 Design Differences between iOS and Android Apps : iOS의 HIG(Human Interface Guidelines)와 Android의 Material Design의 차이를 비교해 주는 글이다. 기본적인 다른 점과 네이게이션/컴포넌트의 차이점 등으로 나누어서 각 플랫폼에서 사용하는 용어와 동작이 어떻게 다른지를 스크린샷과 동영상으로 바로 보여주고 있어서 쉽게 차이점을 이해할 수 있다. iOS만 주로 사용해서 Android의 미묘하게 다른 UI/UX를 이해하기 어려웠는데 이 글에서 쉽게 차이점을 이해할 수 있다.(영어)


IT 업계 뉴스

  • ‘넷플릭스법’에 네이버·카카오도 부글부글…왜? : ISP(인터넷서비스 제공업체)가 많은 트래픽을 유발하는 넷플릭스에 망 이용료를 내게 하는 법 개정이 논의되고 있다. 이는 넷플릭스뿐 아니라 네이버, 카카오 등 국내 CP사들도 반대하고 있으며 망 중립성을 깨뜨리는 조치라서 개인적으로 반대한다.(한국어)
  • Keybase joins Zoom : 화상회의 서비스인 Zoom이 보안을 강화하기 위해서 e2e 암호화 기술을 가지고 있는 Keybase를 인수했다. Zoom은 Keybase의 기술을 이용해서 Zoom의 e2e 암호를 강화할 예정이라고 한다.(영어)
  • 5월 5일: 에어비앤비의 중대 발표 : Airbnb가 코로나19 이슈로 인해 전체 직원을 25%인 1,900명을 감축한다고 발표했다.(한국어)

프로젝트

  • Recoil : Facebook에서 공개한 React 용 상태 관리 라이브러리.
  • Fast or Slow : 전 세계 12개의 위치에서 웹사이트의 성능을 측정해 주는 사이트.
  • imageflow : ImageMagick보다 17배 빠르다는 이미지 처리 라이브러리.
  • chakra-ui/vue : Vue UI 컴포넌트.
  • MsQuic : Microsoft에서 C로 작성한 IETF QUIC 프로토콜 구현체.
  • Janet Language : 프로그래밍 언어.

버전 업데이트

2020/05/15 04:32 2020/05/15 04:32

기술 뉴스 #149 : 20-05-01

웹개발 관련

  • await의 함정, 숨은 병목을 찾자 : async, await를 사용하면 비동기 코드를 동기처럼 읽기 쉽게 작성할 수 있지만 동시에 실행해도 되는 코드도 await로 인해서 순차적으로 실행되므로 전체 실행 시간이 길어질 수 있음을 지적하고 Promise.all이나 await 코드의 위치 조정으로 개선할 수 있음을 얘기하고 있다.(한국어)
  • window.location Cheatsheet : 브라우저의 주소를 다루는 Location 객체를 설명하는 글이다. Location 객체에 비슷해 보이는 속성도 많은데 각 속성이 어떤 점이 다르고 어떻게 사용하는지를 설명하고 주소를 다루는 assign(), replace() 등의 함수가 히스토리 차원에서 어떤 점이 다른지 이해하기 쉽게 설명하고 있다.(영어)
  • 7 New Features Shipping With ES2020 : ES2020에 추가된 기능의 사용법을 설명한 글이다. 환경별로 다는 전역 객체를 참조하는 globalThis, 모든 Promise가 처리되면 실행되는 Promise.allSettled(), ?? 연산자의 좌변이 null이나 undefined일 때만 우변의 값을 취하는 Nullish Coalescing Operator, 체이닝 할 때 null을 따로 확인하지 않아도 되는 ?., Number보다 큰 수를 처리하는 BigInt, 동적으로 런타임에 선택해서 임포트하는 동적 import()의 사용방법을 알 수 있다.(영어)

그 밖의 개발 관련

  • Learn Regex The Easy Way : 정규표현식을 쉽게 설명한 문서의 한글 번역 문서(한국어)
  • Raft 분산 합의 알고리즘과 Python에서의 활용 : 분산 합의 알고리즘 Paxos 보다 간단한 Raft의 동작 방식을 설명하고 라이브러리로 내장할 수 있도록 구현한 pyraft를 사용해서 분산 코디네이터를 내장한 프로그램을 만드는 방법을 보여준다.(한국어)
  • Raft - Understandable Distributed Consensus : Raft 알고리즘을 애니메이션과 함께 단계별로 설명하는 사이트로 분산 합의 알고리즘과 리더 선출 등의 과정을 이해하기 쉽다.(영어)
  • Development Environments at Slack : Slack의 개발환경을 정리한 글이다. Slack의 환경이 복잡해서 로컬에 구성하기보다는 프로덕션 환경을 복사해서 원격 서버에 구성하고 CLI를 사용해서 로컬의 변경사항을 바로 서버에 적용하는 방식으로 개발하고 있으며 CLI로 요청할 때마다 고유 환경이 만들어져서 제공되고 과거에는 하나의 개발 환경을 모두가 공유했지만, 지금은 개발자마다 다른 개발환경을 제공하고 있다고 한다.(영어)
  • Node.js 라이브러리 Readability로 전문 RSS 만들기 : 브라우저의 읽기 모드를 활용하는 mozilla/readability를 이용해서 블로그나 사이트의 본문만 가져온 다음에 이를 RSS로 제공하는 Node.js 서버를 구성하는 방법을 설명한다.(한국어)

인프라 관련

  • How Netflix brings safer and faster streaming experiences to the living room on crowded networks using TLS 1.3 : Netflix에서 TLS 1.3을 지원해서 스트리밍 성능 개선을 한 이야기다. 글의 상단 부분은 TLS 1.3이 1.2보다 왜 더 안전하고 성능이 좋은지를 설명하는 내용이지만 뒷부분에 가면 Netflix에서 A/B 테스트를 수행한 결과가 나온다. TLS 1.3의 0-RTT 덕에 동영상 시작 지연 시간이 3 ~ 8% 빨라졌고 CPU 부하도 적어져서 네트워크 외에 CPU 연산 때문에 지연되는 플레이 시작도 7% 정도 개선되었다고 한다.(영어)
  • Coding a real-time dashboard for Kubernetes : kubectl--watch 옵션이 사용하는 API의 동작을 이용해서 kubectl proxy로 Kubernetes의 API에서 변경사항을 받아와서 실시간으로 클러스터의 상태를 업데이트하는 Node.js 애플리케이션을 만드는 방법을 설명하고 있다.(영어)_
  • AWS Managed WAF 체험기 : AWS에서 새로 업데이트한 Managed WAF의 사용법을 설명하고 설정할 때의 주의점을 정리한 글이다.(한국어)

볼만한 링크

  • 서버 개발 인턴 robin의 성장기 : 카카오에서 인턴십을 2달 동안 하고 나서 개발 업무를 어떻게 배워나갔는지 후기를 정리한 글이다. 각 기술이 왜 생겼는지 역사를 공부하고 단순히 검색으로 문제만 해결하는 게 아니라 원인을 찾아가는 과정을 배우고 개발하다 보면 필수적인 수많은 시행착오가 의미 있는 시간이라는 것을 깨달으면서 성장했다고 하는데 2달 만에 많은 것을 해보고 배우신 거로 보인다. 마지막에는 인턴 전에는 알지 못했던 스프린트나 스크럼, Jira 등 일하는 방식에 관해 나와 있어서 회사 업무에 관심 있으신 분들도 도움이 될 것 같다.(한국어)
  • 번역) 내가 COVID19 데이터를 시각화하지 않는 이유 : COVID19가 세계적인 이슈가 되었는데 이를 시각화했을 때 만든 사람이 COVID19나 사회에 대한 전문 지식이 많지도 않고 시각화를 보는 사람들이 너무 심각하게 생각하거나 너무 가볍게 생각하는 해석의 문제가 생길 수도 있으므로 이를 사이드 프로젝트 처럼 가볍게 시각화할 문제가 아니라고 지적하는 글이다. 이런 시각화는 전문가들이 모인 팀이 해야 하고 전문가들이 만든 사이트의 UI가 별로라면 도움을 줄 기회이니 해당 기관에 연락하는 게 오히려 낫다고 얘기하고 있다.(한국어)

IT 업계 뉴스

  • ZEIT is now Vercel : Next.js, Now, Hyper 등을 만든 Zeit가 2,100만 달러의 시리즈 A 펀딩을 받고 Vercel로 사명을 바꾸었다. Vercel은 versatile, accelerate, excel을 의미한다.(영어)

프로젝트

  • keys.pub : 암호화 키를 관리하는 오픈소스 프로그램.
  • phelia : React 처럼 Slack 인터랙티브 앱을 만들 수 있는 프레임워크.
  • PWA Store : PWA 앱을 모아놓은 사이트.

버전 업데이트

2020/05/01 04:34 2020/05/01 04:34