Outsider's Dev Story

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

기술 뉴스 #151 : 20-06-01

웹개발 관련

  • 개발자, 트렌드를 버리다 — 1년 후 소감 : 웹 기반의 웹 디자인 도구를 1년 동안 발전 시킨 과정을 설명한 글이다. React, Vue 등 새로운 기술로 프론트 기술이 많이 바뀌고 있지만, CSS와 SVG를 이용한 웹 디자인 도구를 웹에서 만들기 위해서 트렌드와는 달라도 계속 발전하면서 고민한 과정이 고스란히 담겨있다. 결과물을 보면 데스크톱 도구에 못지않고 프론트엔드 개발자로 일한다고 하더라도 쉽게 얻을 수 없는 경험이라서 더 대단하게 느껴진다.(한국어)
  • The process: Making Vue 3 : Vue를 만든 Evan You가 Vue 3을 만들게 된 배경을 설명한 글이다. 2020년 전반기에 릴리스 하는 것이 목표였지만 아직은 작업 중이다. Proxy 같은 ECMAScript의 새 기능을 쓰고 싶었고 템플릿 컴파일러가 소스맵을 지원하기 어려운 등 구조적 문제로 유지 보수가 어려웠기 때문에 새로 재작성하기로 했다고 한다. 2018년 후반 프로토타이핑을 시작하면서 TypeScript로 작성하기로 했고 새 기능 도입을 위한 RFC 과정을 도입했다. AST 변환 파이프라인을 만들어서 Virtual DOM 업데이트 성능이 개선되어 이전 보다 CPU 시간이 1/10로 줄어들었고 트리쉐이킹을 더 잘 지원하게 되어 번들러가 최적화하기 쉬워져서 최소 용량이 10KB(gzip 기준, 2는 23KB)이 되었다. 추가로 확장성을 위해 React Hook의 영감을 받아 Composition API를 추가했다.(영어)
  • RecoilJS is meant to rock your React world : Facebook에서 React의 상태 관리 라이브러리로 새로 발표한 Recoil이 React를 더 강력하게 만들 거라는 글이다. Recoil의 상태 유닛인 atom을 정의하고 selectoratom에서 다른 상태를 만드는 방법을 설명하고 이를 React 컴포넌트에서 어떻게 가져다 쓸 수 있는지를 보여주고 있다.(영어)
  • Types-First: A Scalable New Architecture for Flow : Flow의 classic 모드에서는 파일을 수정했을 때 의존성 파일을 모두 확인하면서 병렬로 검사할 수 없어서 성능 문제가 있었지만, types-first를 적용하면 병렬로 의존성을 검사할 수 있기 때문에 Facebook의 코드에 적용했을 때 90%의 경우 6배 이상의 속도 향상이 있다고 밝히고 있다. types-first를 적용하려면 .flowconfig 파일에 type_first=true를 설정해 주어야 한다.(영어)
  • Web Vitals : Google에서 만든 사용자 경험이 좋은 웹의 가이드라인을 제시하는 사이트이다. LGP(Largest Contentful Pain), FID(Fisrt Input Delay), CLA(Cumulative Layout Shift)를 기준으로 어느 정도 시간이어야 사용자 경험이 좋은지를 제시하고 있고 이는 PageSpeed Insights, 구글 서치 콘솔, Chrome 사용자경험 보고서에서 모두 지원하고 있다.(영어)
  • Mastering Async/Await : New Ebook: Mastering Async/Await 이북을 한국어로 번역한 페이지다.(한국어)
  • Test website security with Snyk’s newest WebPageTest integration : Snyk의 보안 검사가 WebPageTest에 추가되어 웹사이트의 보안 검사 결과를 함께 볼 수 있게 되었다.(영어)

그 밖의 개발 관련

  • Zero-day in Sign in with Apple : 애플 계정으로 다른 서비스에 로그인할 수 있는 Sign in with Apple에서 인증에 사용하는 JWT를 요청할 때 아무 이메일을 이용해서 Apple의 공개키로 서명만 하면 인증정보가 오는 취약점이 발견됐다. 즉 다른 사람의 이메일 주소만 알면 그 서비스에 로그인할 수 있는 취약점이다. 지금은 해결된 문제이고 이 취약점을 애플에 보고하고 바운티 프로그램에서 십만 달러를 상금으로 받았다고 한다.(영어)
  • 3분 모나드 : 함수형 프로그래밍에서 항상 나오는 모나드의 개념을 설명하는 글이다. 결국, 모나드는 합성할 수 있는 연산을 의미하는데 이를 모나드의 정의와 이 정의가 의미하는 것이 무엇인지를 나누어서 이해하기 쉽게 설명하고 있다. 이 글 하나로 모나드를 이해했다고 말하기는 어렵지만 개념적으로 모나드의 개념이 무언인지는 감을 잡기 쉽게 잘 설명되어 있다.(한국어)
  • TECHNOLOGY RADAR VOL.22 : ThoughtWorks에서 기술, 도구, 플랫폼, 언어/프레임워크 별로 분류해서 새로운 기술이 업계에 얼마나 도입 되었는지 Adopt(업계에 도입됨), Trial(어떤 기능이 있는지 이해할 필요가 있다), Assess(프로젝트의 목표를 이해할 필요가 있다), Hold(주의해서 사용해야 한다)로 나누어서 보여주고 있다. Adopt와 Trial에 있는 기술은 간단히라도 파악해 두면 트렌드를 이해하는데 도움일 될 것이다.(영어)
  • Deno 1.0 : Node.js를 만든 Ryan Dahl이 TypeScript 런타임으로 새로 만든 Deno의 1.0 릴리스 공지를 번역한 글이다.(한국어)
  • The Windows Subsystem for Linux BUILD 2020 Summary : WSL 2가 Windows 10의 2020년 5월 업데이트에 적용될 것이라고 한다.(영어)
  • Windows Terminal 1.0 : Microsoft의 Build 2020 컨퍼런스에서 Windows Terminal 1.0을 발표했다.(영어)
  • Golang News: Golang Korea 운영진에서 월 1회 Golang 관련 소식을 요약해서 공유하는 뉴스레터를 운영한다.(영어)
  • 슬랙으로 특정 조건의 이메일을 받아보자! : 회사에서 그룹메일로 오는 내용은 메일보다는 Slack에서 다같이 보는게 관리가 편한 경우가 많은데 이를 바로 슬랙에서 받을 수 있게 설정하는 방법이다. 슬랙에서 Email 앱을 설정하면 전용 메일이 추가되는데 이를 바로 수신 메일로 지정할 수도 있지만 Gmail 등에서 전송설정을 해서 Slack으로 받아보게 할 수 있다.(한국어)

인프라 관련

  • Sectigo AddTrust External CA Root Expiring May 30, 2020 : 2018년 Comodo CA의 새 브랜드명인 Sectigo의 AddTrust CA Root가 2020년 5월 30일에 만료가 되면서 해당 인증서를 쓰고 있는 많은 서비스와 프로그램에 장애가 발생했다.(영어)
  • How to enable IPv6 on Kubernetes (aka dual-stack cluster) : Kubernetes 클러스터내에서 Pod끼리 IPv6, iPv4로 통신하고 외부에 접속 할 수 있도록 설정하는 방법을 설명하는 글이다. 관련 도구들이 아직 IPv6 지원을 다 하지 않고 EKS, GKE같은 매니지드 Kubernetes도 IPv6를 지원하지 않으므로 여기서는 kubeadm을 이용해서 클러스터를 설정하고 Calico로 IPv6도 지원할 수 있도록 설정한다.(영어)

볼만한 링크

  • 과연 팀장 탓 일까? : 팀장을 맡고 나서 팀장은 어떤 역할을 해야하는지에 대한 고민을 담은 글이다. 팀장은 이런 일을 해야한다고 가이드를 제시하기 보다 짧은 기간이지만 팀장 역할을 하면서 어떤 고민을 하고 있고 팀원일 때랑 생각이 어떻게 달라졌는지에 대한 고민이 담겨있다. 비슷한 고민을 하고 있는 터라 공감이 간다.(한국어)
  • Stack Overflow Developer Survey Results 2020 : Stack Overflow가 매년 사용자를 대상으로 진행한 설문 결과를 공개했다. 이 결과를 통해 Stack Overflow의 사용자들이 지역이나 성별, 선호 기술, 연차 등 아주 자세한 설문 결과의 통계를 볼 수 있다.(영어)
  • 기획자는 필요없다. : 흔히 말하는 해외에는 기획자가 없다는 논조로 공유된 동영상(맞나?)으로 촉발될 글로 보이는데 조직의 규모 별로 기획자의 역할이 어떤지를 명확하게 설명하고 있다. 개인적으로는 기획자라는 실제 업무와 상관없이 혼란을 초래한다고 생각하고 있고 이 글에 나온대로 기획보다 다른 일을 훨씬 많이 하는데 기획자라는 말로만 규정하는게 문제라고 보아서 PM이나 PO(아직도 경계가 헷갈리지만...)등까지 세분화가 되어야 된다고 생각하는 편이다. 하지만 국내에서는 기획자라는 직군이 자리잡았기 때문에 이를 이해하기에 좋은 글이다.(한국어)

IT 업계 뉴스

  • Facebook to acquire Giphy for $400 million : Facebook이 GIF 이미지 플랫폼인 Giphy를 4억 달러에 인수하기로 했다고 한다.(영어)
  • Notion for everyone : Notion의 가격 정책이 달라지면서 무료 플랜과 퍼스널 플랜이 합쳐져서 무료로 1,000 블럭 제한 없이 맘껏 쓸 수 있게 되고 5명의 게스트와 공유할 수 있게 되었다.(영여)

프로젝트

  • Try Linux : Linux 배포판을 선택할 수 있게 정리해 놓은 사이트.
  • Hopin : 온라인 라이브 이벤트 플랫폼.

버전 업데이트

2020/06/01 05:03 2020/06/01 05:03

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