Outsider's Dev Story

Outsider

웹개발 관련
QUIC and HTTP/3 Support now in Firefox Nightly and Beta : Firefox 나이틀리와 베타에서 기본적으로 QUIC과 HTTP/3를 지원하기 시작했고 Firefox 88 버전에 배포될 예정이다.(영어)
Web Performance Recipes With Puppeteer : Puppeteer를 이용해서 DevTools의 성능을 특정해서 스크린숏을 찍거나 Lighthouse 리포트를 만들거나 성능을 측정하는 자동화를 하는 코드를 레시피로 모아서 정리해 놓은 글이다.(영어)
[SVG] 스퀘어클(Squircle)로 카카오 프로필 만들기 : 카카오 프로필을 표시하는 스퀘어클(모서리가 둥근 정사각형)을 그리기 위해 디자이너가 준 SVG를 이용해서 프로필 이미지를 표시하는 과정을 설명하고 있다. Sketch에서 SVG를 익스포트 할 때 보더라인이 center로만 되는 문제와 텍스트 표시, 배경색, 이미지 표시등의 문제를 해결한 과정을 설명한다.(한국어)
Why We Switched From Webpack To Vite : 인브라우저 IDE인 replit에서 프론트엔드 빌드 도구로 사용하던 Webpack을 Vite로 바꾼 이유를 설명한 글이다. Vite를 도입하고 React보다 훨씬 빨라서 개발할 때 큰 도움이 되었는데 Vite는 개발 중에 거의 바뀌지 않는 의존성은 esbuild로 빌드하고 소스 코드는 ES Modules를 이용해서 브라우저가 번들링을 할 수 있게 하면서 HMR을 지원하고 있다고 한다.(영어)
Real-world CSS vs. CSS-in-JS performance comparison : CSS와 CSS-in-JS의 성능을 비교하기 위해 꽤 큰 규모의 CSS-in-JS를 사용한 React 앱과 이 앱을 linaria로 빌드 타임에 CSS로 추출한 앱으로 성능 비교한 결과를 설명한 글이다. 전반적으로 CSS가 성능이 좋고 특히 저가형 디바이스에서는 특히 CSS-in-JS가 느렸다. 이로 인해서 CSS-in-JS가 가 안 좋다는 것은 아니라도 둘의 차이는 아는 것이 좋을 것 같다.(영어)
Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript : Sentry의 프론트엔드 코드를 TypeScript로 변환한 과정을 설명한다. 행사를 통해 TypeScript를 알게 되고 내부 TSC에서 TypeSciprt로의 변환을 결정한 뒤에 내부 직원이 TypeScirpt를 알 수 있도록 교육하고 새로운 코드는 TypeScript로 작성하도록 한 뒤에 기존 JavsScript를 TypeScript로 변환하는 과정을 거쳤다고 한다.(영어)
그 밖의 개발 관련
Node.js 10 is going EOL : Node.js 릴리스 일정에 따라 2019년 LTS가 된 Node.js 10이 2021년 4월 30일부로 LTS가 종료되었다. 이 버전은 더는 업데이트가 되지 않는다.(영어)
GitHub Actions: Maintainers must approve first time contributor workflow runs : GitHub Actions를 암호화폐 마이닝에 어뷰징하는 사례가 발견되면서 공개 저장소에 올라오는 첫 PR은 메인테이너가 승인해서 GitHub Actions 워크플로우가 실행되도록 변경되었다.(영어)
Goodbye Dependabot Preview, hello Dependabot! : GitHub에 인수된 Dependabot이 제공하던 dependabot preview가 GitHub의 네이티브 Dependabot으로 전환된다. Dependabot은 저장소의 의존성 업데이트를 감지해서 버전을 올리는 Pull Request를 올려주는 봇으로 dependabot preview는 2021년 8월 3일에 종료될 예정이고 새 GitHub dependabotd에서는 Dependency graph 메뉴에서 로그를 볼 수 있고 라이브 업데이트나 PHP 환경변수 레지스트리, 자동 머지 등의 기능은 제거된다고 한다.(영어)
Xcode 프로젝트 내부 경로 관리 : Xcode 프로젝트를 공유할 때 공유하지 않은 시크릿 파일이 깨지는 문제 등을 해결하기 위한 프로젝트의 내부 경로 관리를 설명하고 있다. 정대 경로는 깨지기 쉬우므로 추천하지 않고 있고 각 개발자의 환경에 맞는 공통 상대 경로를 지정하는 방법을 추천하고 이를 설정하는 방법을 설정한다.(한국어)
SLASH 21 발표 영상 : 지난 28일부터 30일까지 열린 토스의 개발자 콘퍼런스 SLASH 21의 발표 영상이 모두 올라왔다.(한국어)
인프라 관련
Grafana, Loki, and Tempo will be relicensed to AGPLv3 : Grafana Labs에서 Grfana, Loki, Tempo의 라이센스를 Apache 2.0에서 AGPL로 변경했다. Elastic, Redis Labs, MongoDB, Timescale, Cockroach Labs 등의 라이센스 변경을 관찰하고 내부에서 고민한 결과 SSPL처럼 Grafana Labs의 사업을 보호해주지 못하지만 오픈소스와 적절한 균형을 맞추었기에 AGPL을 선택했다고 한다. APGL은 OSI의 오픈소스 승인 라이센스고 수정한 경우 소스 코드를 공개해서 다른 사람이 이용할 수 있게 해야 한다.(영어)
쿠버네티스 Admission Control #1 : Kubernetes가 접근 제어를 할 때 Authentication과 Authorizaion을 실행한 뒤에 Admission Control이라는 단계를 하나 더 거치는데 이 단계에서 인증된 사용자의 요청 값을 변경하거나(MutatingWebhook) 검사한다(ValidatingWebhook). 이 과정이 진행되는 방식을 설명하고 flask로 간단한 웹서버를 만들어서 Pod을 생성할 때 웹 훅으로 이를 검사하는 예시를 보여준다.(한국어)
IT 업계 뉴스
BREAKING CAMP : 생산성 도구를 만드는 basecamp가 10여 년 전 전부터 고객의 우스꽝스러운 이름을 목록으로 만들어서 내부에서 조롱했다는 논란에 CEO인 Jason Fried가 글을 통해 사내 정치적 토론 금지 등을 밝혔고 Rails의 창시자로 유명한 DHH도 이에 호응하는 글을 올려서 비난을 받고 있다. 이 행위와 글 자체도 문제이지만 그동안 Basecamp는 수많은 정치적 발언을 회사 차원에서 하고 있었기 때문에 더욱 비난을 받고 있다. Basecamp는 Rework, Remote 등의 사내 문화에 대한 책으로도 유명한 회사이다. 이 발표에서 퇴직할 사람에게는 후한 퇴직 보상을 하겠다고 하였는데 여기에 전체 직원 57명의 1/3이 이 제안을 받아서 퇴사하겠다고 밝혔다. 퇴사 직원에는 마케팅 헤드, CS 헤드 등이 포함되어 있다.(영어)
SQUARESPACE S-1 : 웹사이트 빌더 업체인 Squarespace가 상장을 위해 증권거래소에 S-1 문서를 제출했다.(영어)
프로젝트
velofolio : velopert님이 만든 미국 주식 포트폴리오 백테스팅 사이트로 React, REcoil, React Query, Node.js Fatify, TypeORM을 사용했다.
Script Kit : 자동화 스크립트를 만들어서 공유할 수 있는 macOS 앱으로 egghead로 유명한 John Lindquist가 만들었다.
곰표체 : 곰표에서 곰표 폰트를 공개했다. 개인 사용자가 비상업적인 용도로 사용 가능 하다.
Kubie : kubectx나 kubens 대신 사용할 수 있는 CLI 도구.
FigJam : Figma에서 온라인 협업 화이트보드 사이트를 공개했다.
Cusdis : 오픈 소스 댓글 시스템.
Space Cloud : Kubernetes 위에서 운영하는 서버리스 플랫폼.
버전 업데이트
Ubuntu 21.04 LTS(Hirsute Hippo) : Linux 배포판, 릴리스 공지
Vitess 10.0 : MySQL 클러스터링 시스템, 릴리스 공지
QEMU 6.0.0 : 프로세스 에뮬레이터, 릴리스 공지
Kong 2.4 : API 게이트웨이, 릴리스 공지
Apache kafka v2.8 : 분산 스트리밍 플랫폼, 릴리스 공지
ZooKeeper를 직접 관리하는 쿼럼으로 교체
Describe Cluster API 추가
오류 상태의 의미를 명확히 하려고 Streams의 상태 머신 노출
Docker Desktop Apple Silicon GA : 데스크톱용 Docker 애플리케이션, 릴리스 공지
LLVM v12.0.0 : 컴파일러, 릴리스 공지
Node.js v16.0.0(현재 버전) : 자바스크립트 런타임, 릴리스 공지
Puppeteer v9.0.0 : Headless Chrome의 Node.js 라이브러리, 변경사항
Next.js 10.2 : 서버렌더링 React 애플리케이션 프레임워크, 릴리스 공지
Webpack 5 사용
구동 시간 개선
접근성 개선
Babel v7.14.0 : JavaScript 컴파일러, 릴리스 공지
ESLint v7.25.0 : JavaScript 코드 분석 도구, 릴리스 공지
Gatsby v3.4.0 : 정적 웹사이트 생성기, 릴리스 공지
Open Policy Agent v0.28.0 : 클라우드 네이티브 환경의 정책 엔진, 릴리스 공지
webpack v5.36.0 : JavaScript 번들러, 변경사항
Swift v5.4 : 프로그래밍 언어, 릴리스 공지
Grafana Tempo v0.7.0 : 분산 트레이싱 백엔드, 릴리스 공지
RxJS v6.4.0 : JavaScript 리액티브 프로그래밍 라이브러리, 변경사항
Armeria v1.7.0 : Java용 비동기 RPC/REST 라이브러리, 릴리스 공지
Rollup v2.46.0 : JavaScript 번들러, 변경 사항
GitHub Desktop v2.8 : GitHub 데스크톱 애플리케이션, 릴리스 공지
WebdriverIO v7.5.0 : Browser 테스트 자동화도구, 릴리스 공지
kube-state-metrics v2.0 : Kubernetes 리소스를 Prometheus 형식의 매트릭으로 출력하는 프로젝트, 릴리스 공지
GraalVM v21.1.0 : 통합 가상 머신, 릴리스 공지
Pulumi v3.0.0 : 인프라 설정 도구, 릴리스 공지
Boundary v0.2.0 : 인프라 접근 관리, 릴리스 공지
댓글 쓰기

기술 뉴스 #173 : 21-05-01

댓글