Outsider's Dev Story

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

기술 뉴스 #192 : 22-02-16

웹개발 관련

  • Aspect Ratio is Great : 선호하는 비율을 지정하는 aspect-ratio가 대부분의 브라우저에서 지원되어 이제 쓸 수 있고 장점이 많다고 얘기하는 글이다. 이전에는 요소의 비율을 맞추려면 padding hack을 써서 비율을 강제로 맞추어 주었어야 했는데 aspect-ratio를 사용하면 쉽게 원하는 비율에 맞출 수 있고 object-fit과도 잘 어울려서 원하는 이미지를 원하는 비율로 쉽게 보여줄 수 있다.(영어)
  • 벨로그에 다크 모드 적용하기 : 국내에서 많이 사용하는 블로그 플랫폼인 Velog에 다크 모드를 적용한 과정이다. 처음에는 Styled Components의 ThemeProvider를 고려했으나 SSR의 경우 처음 사용자의 테마를 알 수 없는 문제가 있어서 CSS Variable을 알아보기 시작했고 prefers-color-scheme 미디어 쿼리를 이용하면 사용자의 컬러스킴도 알 수 있어서 처음부터 사용자에게 맞는 모드로 보여줄 수 있어서 CSS Variable을 선택했다고 한다. 다크모드를 준비하기 위해서 각 상황에 맞는 색상 팔레트를 준비하고 이를 코드로 변환해서 다크 모드를 지원하게 되었다고 한다.(한국어)
  • Building an adaptive favicon : 최신 브라우저가 파비콘에 SVG도 지원함에 따라 <link rel="icon" href="/favicon.svg" type="image/svg+xml">처럼 SVG 파비콘을 연결하고 prefers-color-scheme 미디어 쿼리를 이용해서 사용자의 테마에 따라 다크/라이트 파비콘을 보여주도록 적용하는 방법을 설명한다. 현재 파비콘에서 미디어쿼리는 파이어폭스와 크로미움 기반 브라우저만 지원한다.(영어)
  • Design Systems Demystified : 디자인 시스템의 특징인 디자인 언어 시스템, 컴포넌트 라이브러리, 디자인 리소스, 문서화 시스템, 코드 인프라스트럭처, 거버넌스 시스템으로 정리하고 각 특징에 대한 설명과 관련 도구를 정리한 사이트이다.(영어)
  • Announcing Flutter for Windows : iOS, Android 등 크로스 플랫폼 앱을 만들 수 있는 Flutter가 Windows를 지원하기 시작했다.(영어)

그 밖의 개발 관련

  • Competitive programming with AlphaCode : 바둑을 두는 AlphaGo를 만들었던 DeepMind에서 프로그램을 작성하는 AlphaCode를 공개했다. 알고리즘 문제 풀이 사이트인 Codeforces와 협력해서 최근 문제 10개를 기준으로 실험한 결과 상위 54%에 랭크되었다고 한다. 상위에 랭크된 것은 아니지만 의미 있는 결과이고 AlphaCode는 알고리즘 문제를 입력으로 받아서 출력으로 프로그램을 작성한다. 사용된 데이터 세트는 GitHub CodeContests 저장소에 공개되어 있고 AlphaCode Attention Visualization에서 처리되는 과정을 볼 수 있다.(영어)
  • 2022년 1월 100% 할인 이벤트 장애 부검 : 인프런에서 연초 이벤트를 진행하면서 겪은 장애 상황을 정리한 글이다. Node.js로 작성된 모노리식 서버를 AWS ECS Fargate로 서버를 운영하고 Aurora PostgreSQL을 사용 중인데 연초 이벤트로 트래픽이 증가하면서 며칠에 걸쳐서 큰 장애를 겪었다고 한다. 원인을 알고 보면 쉽지만, 장애는 급한 상황이고 원인 파악에도 시간이 걸리는 경우가 많고 어떤 서비스든 겪을 수 있기 때문에 이렇게 각 상황에 가설을 세우고 원인을 찾아서 해결해 나가는 과정이 정리된 글을 소중하다.(한국어)
  • A toy DNS resolver : 도메인의 IP를 알아내는 DNS 질의의 동작 방식을 설명하고 Go로 20라인의 간단한 DNS 리졸버를 구현해서 동작 방식을 이해하기 쉽게 설명한 글이다. 초반에 만화로 그린 DNS 질의 과정만 봐도 이해하기가 쉬운데 이미 알고 있는 루트 네임 서버에 질의한 뒤 알려주는 네임 서버를 따라가면서 계속 질의해서 결국 IP를 알아내게 되는데 dig 명령어를 사용할 때처럼 DNS 질의를 할 때 나오는 Question, Answer, Authority, Additional 섹션에 대해서도 이해하기 쉽게 나와 있다. Question은 질의하는 부분이고 Answer는 해당 도메인의 IP 주소가 담겨있고 이 IP를 찾을 수 있는 네임 서버는 Authority에, 이 네임 서버들의 IP 주소는 Additional에 담겨있다.(영어)
  • Pay attention to WebAssembly : WebAssembly에 주목해야 하는 이유를 정리한 글이다. Wasm의 바이너리 형식은 표준화되어 Wasm 런타임만 있으면 실행할 수 있고 C, C++, Rust, Go, Python, Ruby 등의 언어를 Wasm으로 컴파일할 수 있는 데다가 콜드 시작 시간은 빠르고 네이티브의 가까운 성능을 보여주는 데다가 보안에도 좋다고 설명하고 있다. 그래서 앞으로 JavaScript의 속도를 높이고 프로그래밍 언어 간의 상호운용성을 높일 수 있고 애플리케이션이 Wasm으로 플러그인 시스템을 제공할 수 있다고 한다. WebAssembly를 이용한 새로운 애플리케이션 아키텍처가 생길 것이고 Docker와 통합되고 서버리스/엣지 프레임워크의 표준을 이끌 수 있다고 예측한다. 그리고 모든 언어에서 그렇듯 Wasm에도 WAPM이라는 패키지 매니저가 있지만 거의 운영되지 않으므로 이 부분도 기회가 될 것이라고 하고 있다.(영어)
  • golangci-lint를 이용하여 코딩 스타일을 효과적으로 관리하기 : golang을 쓰면서 팀 내의 코드 컨벤션을 합의하고 이를 자동으로 검사하기 위해 golangci-lint를 선택했다. GitHub Actions를 잘 지원하고 있고 로컬 개발에서도 사용하기 쉬웠기 때문에 이 도구를 선택했고 CI 적용하자 이전에 발견하지 못했던 컨벤션 누락도 잡아낼 수 있었다고 한다.(한국어)
  • Include diagrams in your Markdown files with Mermaid : 텍스트 기반으로 다이어그램을 그릴 수 있는 Mermaid를 GitHub에서 지원하게 되어 이슈나 Pull Request 등 GitHub의 마크다운을 작성할 수 있는 곳에서 간단히 다이어그램을 포함할 수 있게 되었다.(영어)
  • CURL DASH-DASH-JSON : curl에 JSON을 보낼 수 있는 --json 옵션이 추가되었다. 이 옵션은 curl 7.82.0부터 사용할 수 있고 2022년 3월 초에 릴리스 될 예정이다.(영어)

인프라 관련

  • VPC Flow logs는 네트워크 문제 분석에 활용할 수 있을까? : AWS에서 네트워크 문제를 분석하기 위해 VPC의 Flow logs를 사용하는 방법을 설명한 글이다. Flow logs는 VPC 전체 네트워크뿐만 아니라 특정 서브넷이나 ENI의 트래픽만도 수집해서 볼 수 있는데 기본 형식에는 tcp-flags가 없어서 커스텀 포맷을 사용하면 이 값도 수집해서 볼 수 있다. 네트워크 문제 분석이 쉽지 않은 상황에서 유용한 기능이다.(한국어)
  • 스타트업에서 AWS IAM 권한 관리 잘 하는법 : AB180에서 AWS의 권한 관리를 위해 Jira로 권한 신청을 하도록 했지만 권한 부여에도 시간이 오래 걸리고 어떤 권한을 요청해야 하는지 모르는 등의 문제로 고통을 받고 있다가 Netflix가 만든 ConsoleMe를 도입했다고 한다. Console의 웹 콘솔에서 롤을 선택해서 바로 권한을 신청하고 정책 JSON에 대한 유효성 검사도 해주고 있어서 실수를 방지할 수 있는 데다가 리뷰하고 승인만 하면 클릭만으로 권한을 부여할 수 있게 되었다. 더군다나 ConsoleMe가 STS를 통한 임시 권한도 발급해 주기 때문에 안전하게 AWS를 이용할 수 있게 되었다고 한다.(한국어)
  • Consul Streaming: What’s behind it? : Consul에 새로 추가된 스트리밍 기능을 설명한다. 기존에는 에이전트가 서버에 요청을 보내고 대기하고 있으면 변경사항이 생겼을 때 모든 결과를 보내다 보니 수천 수만 대의 인스턴스에서 부하가 심해서 새 인스턴스를 추가할 때마다 성능이 신경 쓰일 수밖에 없었다. 스트리밍 기능은 해당 서비스의 변경사항만 gRPC로 보내기 때문에 성능과 밴드위스에서 이득을 크게 얻을 수 있다.(영어)

볼만한 링크

  • 출시 3일 만에 180만명이 참여한 '내 트리를 꾸며줘!' : 작년 크리스마스에 "내 트리를 꾸며줘"라는 사이드 프로젝트로 큰 인기를 끌었던 산타파이브가 사이드 프로젝트를 시작하고 제작한 과정이 정리된 글이다. 인터뷰 형식으로 되어 있어서 팀 멤버들의 생생한 의견과 사용자가 늘려가면서 해결했던 긴박한 상황을 알 수 있다. 글로 정리되어 사이드 프로젝트로 얼마나 흥미로운 경험을 했는지 알 수 있다.(한국어)
  • 스포티파이 최악의 날 : 전설적인 록스타 닐 영이 Spotify에 공개서한을 보내며 "조 로건 익스리언스"의 팟캐스트를 내리거나 자신의 음원을 내리라고 했는데 스포티파이는 닐 영의 음악을 내려버렸다. "조 로건 익스리언스"는 2020년 스포티파이가 1억 달러에 독점 계약을 한 팟캐스트로 코로나 백신에 대한 가짜 뉴스를 퍼트려서 더욱 이슈가 되기도 했고 이러한 가짜 뉴스를 많이 얘기하는 팟캐스트이다. 닐 영에 이어 조니 미첼도 스포티파이에서 음악을 내리면서 많은 뮤지션이 반대 입장을 밝히며 상황이 심각해지자 스포티파이는 콘텐츠 권고안을 발표하는 등 수습에 나섰지만, 주가도 많이 내려가며 큰 타격을 받고 있다. 이어진 글 음악 대신 팟캐스터를 택하다도 있다.(한국어)

IT 업계 뉴스

  • The New York Times Buys Wordle : 작년 10월에 만들어서 이제 수백만 명의 사용자가 생긴 단어 게임 Wordle을 뉴욕타임스에서 인수했다. Wordle은 Josh Wardle이 만든 단어 게임으로 우리나라에서 많이 하던 숫자 야구 게임처럼 5자로 된 단어를 맞추는 게임인데 이 맞춘 기록을 이미지로 만들어서 SNS에 공유하게 한 덕에 바이럴을 타서 크게 인기를 끌 게 되었다. 구독제인 뉴욕타임스에서 이미 crosswords나 Spelling Bee같은 게임을 제공하는데 같이 제공할 것으로 보이고 수백만 달러에 인수된 것으로 보인다. 개인 프로젝트로 시작한 사이트가 바이럴로 이렇게 큰 매체에 빠르게 인수되었다는 점이 흥미로운 뉴스다.(영어)
  • 엔비디아-Arm '48조 딜' 무산...소프트뱅크, Arm 상장 준비할 듯 : Nvidia가 Arm을 400억 달러에 인수하기로 했었으나 결국 미국 연방거래위원회의 반대로 승인을 받지 못해 인수가 무산되었다. Arm의 최대 주주인 소프트뱅크는 Arm을 상자할 계획으로 보인다고 한다.(한국어)
  • 오픈넷, 폰트 저작권 남용 공익소송에서 최종 승소 : 네이버 무료 폰트 게시판에서 다운받은 폰트를 영리 목적으로 사용한 디자이너가 고소된 일에 관해 오픈넷이 저작권 남용 방어 소송에서 최종 승소했다. 법원은 무료로 받은 폰트를 사용한 것은 채무불이행책임은 되지만 저작권 위반은 아니라고 하며 무료폰트라고 하더라도 계약 내용을 사용자에게 분명히 고지해야 한다고 밝혔다. 이는 저작권 합의금 장사를 목적으로 소송을 남발하는 일을 막는데 중요한 재판이다.(한국어)
  • MariaDB Corporation Ab to Become a Publicly Traded Company via Combination with Angel Pond Holdings Corporation : MySQL의 포크 버전인 MariaDB가 6억 7천 2백만 달러의 기업 가치로 뉴욕 증권거래소에 상장할 계획이라고 밝혔다.(영어)
  • Quirrel Joins Netlify and Scheduled Functions Launches in Beta : Netlify가 Simon Knott이 만든 Quirrel을 인수했다. Quirrel은 서버리스 함수를 스케줄링하고 실행시키는 잡 큐잉 서비스이다. 이 서비스를 인수하면서 Netlify는 Scheduled Funtions 기능을 베타로 공개했다.

프로젝트

  • Grafana Incident : 서비스 장애시 장애 처리를 함께 진행하고 처리된 과정을 기록으로 남길 수 있는 서비스로 현재 얼리 엑세스 프로그램으로 Grafana Cloud에서 승인받아 사용할 수 있다.
  • Sha256 Algorithm Explained : Sha256이 입력값(text, binary, hex)를 변환하는 과정을 단계별로 시각화해서 보여주는 사이트

버전 업데이트

2022/02/16 09:38 2022/02/16 09:38