Outsider's Dev Story

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

기술 뉴스 #155 : 20-08-01

웹개발 관련

  • Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit : Webpack 5 버전에 들어갈 Module Federation으로 마이크로 프론트엔드를 구성하는 방법을 설명하고 있다. Module Federation이 아직은 베타 상태이지만 이미 배포된 앱에서 컴포넌트를 가져와서 재사용할 수 있도록 구성하는 방법을 보여주고 예제 코드를 제공하고 있다.(영어)
  • Can I use 베타 : 브라우저별 지원 기능을 보여주는 Can I use의 베타 사이트가 공개되었다. 접근성이 좋도록 색 대비를 높였고 다크모드를 지원하며 기능별 URL에 #을 이용하던 이전 버전보다 더 깔끔한 URL을 지원한다. 자주 사용하는 기능을 저장해 두거나 사용률별로 브라우저를 지원하는 기능들이 포함되었다.(영어)
  • Recoil 레시피: 소개, 비동기 액션 : 페이스북이 지난 5월 공개한 상태 관리 라이브러리 Recoil을 설명하는 글이다. Recoil의 RecoilRoot,atom, selector의 개념과 사용 방법을 설명하고 비동기로 액션을 실행할 때 사용하는 Suspense, Loadable의 사용 방법을 보여준다.(한국어)
  • <번역>시니어 프론트엔드 개발자처럼 크롬 개발자도구 사용하기 : Use Chrome DevTools Like a Senior Frontend Developer의 번역 글이다. 개발자도구로 전체 페이지 혹은 선택한 노드를 이미지로 캡처하는 방법이나 콘솔의 $_, $0 같은 편의 변수의 사용, XHR을 다시 요청하는 방법 등이 정리되어 있다. 크롬 개발자도구도 기능이 계속 추가되니 종종 이런 글을 참고해서 몰랐던 기능을 익혀두면 좋다.(한국어)
  • 웹페이지 다크 모드 지원하기 : prefers-color-scheme 미디어 쿼리를 이용해서 다크 모드에 다른 CSS를 적용하는 방법과 이를 로컬스토리지에 저장해 놓고 불러오는 방법을 설명하고 OS의 설정된 모드를 확인하기 위해 window.matchMedia()를 이용하는 방법을 보여준다.(한국어)
  • Zero-config Storybook : Storybook 6 버전부터(현재 RC) 기존 프로젝트에 init 실행만으로 바로 스토리북 설정을 할 수 있게 된다. React, Vue, Angular등 다양한 프로젝트를 지원하고 TypeScript도 지원하고 이미 Storybook을 사용 중인 프로젝트도 이 설정으로 업그레이드할 수 있다.(영어)
  • Microsoft and Google team up to make PWAs better in the Play Store : Microsoft와 Google이 올 초부터 안드로이드에서 PWA를 잘 제공할 수 있도록 협업했다고 한다. MS가 만든 PWA builder가 Google이 만든 PWA용 CLI Bubblewrap를 이용하도록 개선해서 안드로이드에서 숏컷을 제공하고 스플래시 스크린이나 런처 이름을 변경하는 등의 기능을 추가했다고 한다.(영어)

그 밖의 개발 관련

  • OpenAI’s new language generator GPT-3 is shockingly good—and completely mindless : OpenAI에서 지난 5월 페이퍼를 공개한 GPT-3(Generative Pre-Training 3)를 얼마 전부터 비공개 베타로 공개했다. GPT-3가 기사를 쓰고 자연어로 화면을 설명하면 React 코드를 놀랄만한 수준으로 작성해 준다. 전체 코드는 아니지만, 일부 모델을 GitHub에 공개하고 관련 논문도 공개했다.(영어)
  • Awesome GPT-3 : GPT-3의 데모와 글을 정리해서 모아둔 저장소다.(영어)
  • deno 첫 외주 후기 : deno 프로젝트에서 글쓴이가 참여하던 Rust 프로젝트의 일부를 deno 프로젝트에 쓰고 싶어서 수정을 해야 하는데 외주로 해줄 수 있냐고 문의가 와서 진행한 프로젝트 후기이다. 오픈소스에서 이런 방식으로 진행되는 외주는 처음 봤는데 첫 작업이 잘 진행되어 또 외주를 받아서 두 번째 작업을 진행하고 있다고 한다.(한국어)
  • My Favorite CLI Tools : 자주 사용하는 CLI 도구를 정리한 글이다. 비슷한 류의 글이 많이 있긴 하지만 Starship, Z, ripgrep 등 몰랐던 CLI 도구도 나와 있어서 흥미롭게 봤다.(영어)
  • Introducing GitHub’s OpenAPI Description: GitHub에서 GitHub REST API를 더 잘 활용할 수 있도록 OpenAPI 명세에 맞춰 API를 설명하는 GitHub's REST API OpenAPI Description을 공개했다.(영어)

인프라 관련

  • How we migrated Dropbox from Nginx to Envoy : Dropbox에서 오랫동안 Nginx에 기반을 둔 인프라스트럭쳐에서 Envoy로 마이그레이션 하면서 Nginx와 Envoy를 비교해서 왜 Envoy를 선택했는지 설명한 글이다. 비동기를 더 잘 처리하는 Envoy가 성능에서 장점이 있고 관측성 면에서 Envoy가 더 자세히 보여주고 설정을 한 곳에서 관리할 수 있으며 확장성도 더 좋았다고 얘기하고 있다. 꼭 상황이 똑같지 않더라도 Bazel, gRPC, C++/Golang의 기술 스택을 가진 Dropbox에서 Nginx와 Envoy의 특징을 자세히 설명하고 있어서 둘의 차이점을 잘 이해할 수 있다.(영어)
  • Loki tutorial: How to send logs from EKS with Promtail to get full visibility in Grafana : AWS에 EKS 클러스터를 eksctl로 설정한 뒤 Promtail로 로그를 Grafana로 연결해서 볼 수 있게 설정하는 튜토리얼이다.(영어)

볼만한 링크

  • I build my ideas #8 - 07/19/20 : Sketch에서 자연어를 입력하면 그림을 그려주는 플러그인 Assistantwit.ai를 이용해서 만들었는데 이번 GPT-3를 보고 플레이그라운드의 API 데이터를 이용해서 자연어로 디자인할 수 있는 "Designer"라는 Figma 플러그인을 만들었다. 자연어로 앱을 설명하면 OpenAI API와 GPT-3를 이용해서 JSON 응답을 만들고 이를 이용해서 Unsplash에서 이미지를 가져와서 앱을 디자인하는 데모를 보여준다.(영어)
  • How GPT3 Works - Visualizations and Animations : GPT-3에 문장을 전달하고 GPT-3가 이를 통해 새로운 문장을 만드는 과정을 시각화해서 설명하는 글이다.(영어)
  • 10 Awesome Chrome Flags You Should Enable Right Now : Chrome에서 읽기 모드나 포커스 모드, 탭 그룹, 2페이지 PDF 뷰 등 플래그를 조정해서 킬 수 있는 기능을 정리한 글인데 유용한 기능이 많아 보인다.(영어)
  • 글로벌 접근성 동향 리포트 : 격주로 세계에서 접근성에 대한 노력을 정리해주는 블로그다. 최근 글에서는 iOS와 WatchOS에서 추가된 접근성 기능과 COVID-19 이후 디지털 접근성에 대한 조사 결과, 접근성을 고려한 Form, 시각장애인을 위한 코딩 도구가 소개되었다. 구독해서 보면 접근성 동향을 파악하는데 도움 된다.(한국어)
  • 실업급여 이후, 조기재취업수당 받기 : 실업급여를 받다가 실업급여 기간의 반 이상 남았을 때 입사를 하면 1년 뒤에 조기재취업수당을 받을 수 있는데 얼마를 받을 수 있는지 계산하는 방법과 어떻게 신청하는지에 대한 절차를 정리한 글이다. 이런 일은 누구나 겪을 수 있지만 자주 겪는 건 또 아니라서 필요한 상황이 되었을 때 참고하면 좋을 것 같다.(한국어)
  • 10 Standout GitHub Profile READMEs : GitHub 프로필 페이지를 꾸밀 수 있게 되면서 재밌게 꾸민 프로필 페이지를 소개하는 글이다. 자신을 소개하거나 통계 데이터를 보여주거나 게임을 보여주는 등 다양한 아이디어들이 재미있다.(영어)

IT 업계 뉴스

프로젝트

  • Web Design Museum : 유명한 사이트의 과거 모습을 모아놓은 페이지이다. Twitter, W3C, Apple, Google 등의 과거 웹사이트 모습을 볼 수 있다.
  • GraphQL Query Generator : 제공된 스키마로 랜덤 GraphQL 쿼리를 만들어 주는 오픈소스 라이브러리.
  • yh - YAML Highlighter : 터미널에서 파이프로 연결해서 YAML의 문법을 하이라이트 해주는 CLI 도구.

버전 업데이트

2020/08/01 20:06 2020/08/01 20:06

GitHub Stars에 등록되다

지난 6월 GitHub에서 GitHub Stars라는 프로그램을 베타로 공개했다.

GitHub Stars 사이트

이 프로그램은 새로운 기능은 아니고 커뮤니티에서 활동이 많은 사람을 GitHub이 선정해서 이러한 사람들이 더 많은 활동을 하고 영향을 줄 수 있도록 GitHub이 지원하는 프로그램이다. 무슨 지원을 하는지 아직 잘 모르지만, 사이트에 설명된 내용을 보면 그렇게 나와 있다.

GitHub Stars 후보 추천 페이지

회사 내부에 추천 프로세스가 있는지는 모르겠지만 사이트에서 사람들이 후보 추천을 할 수 있는 구조로 되어 있고 처음 오픈할 때는 4명 정도가 등록되어 있었다.

GitHub Stars에 등록된 페이지

어쩌다 보니 오늘 GitHub Stars에 등록이 되었다. 다른 사람들은 본인 실사진을 다 올렸는데 나만 프로필 이미지라 약간 놀랐지만 항상 쓰던 거라 맘에 든다. GitHub 후드 옆에 배지가 달린 것도 의도한 건 아니지만, 배치가 좋다.

GitHub Stars 후보추천이 되었다는 메일

지난 3일 GitHub에서 메일을 받았다. 많은 메일 가운데 놓치고 넘어갈 뻔했지만 다행히 발견해서 메일을 열어보았고 그 전에 Stars라는 프로그램을 이미 봤기 때문에 뭔지 알 수 있었다. 몇 명이 추천했는지 누가 추천했는지는 알 수 없었지만, 후보로 추천되었으니 받아들이겠냐는 내용이었고 당연히 거부할 생각이 없었으므로 다음 과정을 진행했다.

GitHub Stars 프로필 등록 페이지

등록할 때는 꽤 많은 내용을 써야 한다. 나에 대해 설명부터 해서 최근 1년간 무슨 활동을 했는지 등을 영어로 열심히 적어야 한다. 사실 이 과정에서 뭘 쓸지 영어로 쓰는 고민을 하면서 시간이 상당히 걸렸기 때문에 중간에 낙오할 뻔했지만, 열심히 작성해서 제출했다. 영어가 약해서 다른 사람들 어떻게 썼는지 틈틈이 참고하면서 썼다. 특정 활동을 항목별로 적어야 해서 뭘 적어야 할지 고민이 많이 되긴 했지만 최근 1년 중에 주로 신경 써서 했던 활동을 정리해서 적었다.

제출하고 리뷰 과정이 있다고 해서 2~3달은 걸릴 줄 알았는데 의외로 빠르게 진행이 되었다.

노미네이트되었다는 것만으로도 만족하고 크게 신경 쓰고 있지 않으려고 했는데 지난 28일에 NDA가 갈 거라고 연락이 왔고 NDA에 사인했다. Stars에게 유니크한 혜택을 준다는데 정확히 어떤 혜택을 주는지 모르고 있기에 뭘 알려주려고 NDA까지 작성하나 싶었지만, 작성 안 할 이유는 없기에 사인해서 보냈다.

그러고는 3일밖에 안 지났는데 오늘 GitHub에서 Slack 초대가 오더니, Stars 프로그램에 등록되었다는 메일이 왔다.

GitHub Stars에 등록되었다는 메일

그리고 GitHub Stars 사이트에 들어가 보니 등록이 되어 있었다. 노미네이트로 끝나지 않고 등록되니까 기분이 좋긴 하다. ㅎㅎ 요즘 나태하게 지내는 편인데(이 말한 지도 오래되었지만...) 뭔가 받았으니 열심히 해야겠다. 영어 할 일도 점점 늘어가고 있다. GitHub은 개발하면서 내가 정말 좋아하는 회사라서 더 기분이 좋은 것 같다.(SWAG이나 좀 줬으면...)

2020/07/31 21:16 2020/07/31 21:16