Outsider's Dev Story

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

기술 뉴스 #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에서 자연어를 입력하면 그림을 그려주는 플러그인 Assistant를 wit.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
Response : No Trackback , No Comment

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

Leave a Reply

Comments

: 1 : ... 242 : 243 : 244 : 245 : 246 : 247 : 248 : 249 : 250 : ... 1715 :
RetroTech 팟캐스트 44BITS 팟캐스트