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가 종료되었다. 이 버전은 더는 업데이트가 되지 않는다.(영어)
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을 생성할 때 웹 훅으로 이를 검사하는 예시를 보여준다.(한국어)
Comments