다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법 : React의 Context API를 이용하면 컴포넌트에 Props를 계속 전달해주어야 하는 Props Drilling 문제를 피할 수 있는데 createContext 함수로 값을 선언하고 자식 컴포넌트에서 이 값에 접근하는 방법을 설명한다. 이를 이용해서 상태관리를 하거나 최적화를 위해 여러 Context를 사용하는 등 다양한 Context API의 사용법을 설명하고 예제코드로 설명해 주고 있어서 이해하기 좋다.(한국어)
Faster JavaScript Builds with Metro : Airbnb에서 JavaScript 번들링에 Webpack을 사용하고 있었는데 작년에 코드 베이스가 4배가 커지면서 개발 경험이 안 좋아졌고 단순 변경에도 페이지를 갱신하는데 30초 ~ 2분이 걸리게 되었다. Metro로 변경하고 UI 변경은 80% 빨라졌고 가장 느린 프로덕션 빌드는 55%(30.5분에서 13.8분) 빨라졌다. Metro는 React Native 번들러인데 Airbnb는 React Native를 이제 쓰지 않지만, Metro가 웹에도 잘 동작하거라 믿었다. Webpack은 번들링하기 전에 엔트리포인트를 알아야 하고 Metro 개발 서버는 요청된 JavaScript 번들을 즉석에서 처리하기 때문에 Webpack은 모든 엔트리 포인트를 다 컴파일하고 요청받은 엔트리포인트의 파일만 컴파일한다. 또한 Metro는 멀티 레이어 캐시를 지원해서 메모리, 디스크, 원격 캐시 순으로 읽어 들이게 할 수 있어서 원격 캐시로 56% 빠르게 할 수 있었고 내장된 워커 지원으로 무거운 작업을 병렬로 처리할 수 있다.(Webpack은 서드파티 플러그인을 설정해야 한다.) Metro를 웹에서 처리하기 위해 추가적인 설정 작업이 필요했고 먼저 개발환경을 개선하고 프로덕션은 Webpack과 A/B 테스트를 진행해서 Metro의 프로덕션 빌드가 최적화되도록 했다.(영어)
How we think about browsers : 점진적 향상 원칙에 따라 오래된 브라우저에서도 사용할 수 있으면서 최신 브라우저에서는 더 빠른 경험을 제공하도록 하고 있다. GitHub 사용자의 브라우저를 분석해 보면 95% 요청이 7개 브라우저에서 오고 최신 버전에서 70%의 요청이 오고 이전 3개 버전까지 가면 1% 미만으로 떨어지게 되고 브라우저별로 추적해서 자동 업데이트되는 에버그린 브라우저를 통해 빠르게 과거 버전을 없애는 것을 알 수 있다. 또한 오래된 브라우저의 4% 요청을 보면 오래되고 다양한 브라우저를 볼 수 있고 오래된 브라우저일수록 로그아웃 상태의 요청이 많다는 것을 알 수 있다. 로그아웃 사용자라는 것은 읽기 전용 활동이 많다는 의미이고 이때는 JavaScript가 많이 필요하지 않다는 것이고 GitHub에서는 JavaScript를 비활성화해도 기본적인 활동을 대부분 할 수 있다. 그래서 lint로 브라우저 호환성을 검사하고 최신 기능에 대한 폴리필을 많이 사용했지만, 종종 성능 저하도 있었기에 최소한의 폴리필을 유지하도록 관리하고 있다.(영어)
자바스크립트 프레임워크 비교 : Ryan Carniato가 TodoMVC를 프레임워크별로 구현해서 비교한 작년 글을 현재 기준으로 새로 업데이트해서 테스트한 글이다. React, Preact, Solid, Svelte, Vue를 비교해서 프레임워크 자체의 크기와 애플리케이션 코드의 크기를 비교하고 애플리케이션 코드의 규모가 커졌을 때 전체 사이즈의 경향성도 비교해서 보여주고 있다. 용량이 전부는 아니지만, 하나의 기준으로 참고하기 좋은 테스트 결과이다.(한국어)
이미 Node.js 모듈을 TypeScript로 작성했기 때문에 ESM으로 바꿔줄 필요는 없었고 서드파티 의존성은 없었기에 외부 라이브러리의 호환성에 대한 걱정도 없었다.
Node.js 표준 라이브러리에서 임포트한 것은 Deno용으로 바꿀 필요는 있다. Deno에서 이미 Node.js 호환 모듈을 제공하고 있어서 대응하는 모듈로 교체하고 어댑터 파일을 만들어서(adapter.node.ts) 하나의 파일에서 Node.js API를 임포트하고 각 파일에서는 이 파일을 사용한다. Deno에서는 이 어댑터 파일을 Deno용으로(adapter.deno.ts) 교체한다.
그래서 아래 작업을 진행하는 코드를 작성해서 CI에서 배포할 때마다 deno 모듈에도 등록하도록 만든다.
Node.js 스타일의 임포트를 Deno 스타일로 제작성한다.
adapter.node.ts를 임포트를 모두 adapter.deno.ts로 바꾼다.
process, Buffer같은 Node.js 전역 변수를 Deno 코드로 바꾼다.
src 디렉터리를 _src 디렉터리로 바꾸어서 직접 임포트 못하도록 만든다.
src/index.node.ts를 Deno에 맞게 mod.ts로 바꾼다.
쏘카 예약을 효율적으로 - 수학적 모델링을 활용한 쏘카 예약 테트리스 : 쏘카에서 차량의 운영효율을 높이기 위해 알고리즘 개발에 비해 짧은 시간 안에 좋은 결과를 도출할 수 있는 Solver를 사용해서 최적화 문제를 해결하기로 했다. 최적화 모델을 찾아서 Google OR-Tools로 구현해서 GCP 배포해서 운영한 결과 이전보다 평균적인 차량 사용 비율이 4% 증가했다고 한다.(한국어)
Prebuilding codespaces is generally available : GitHub 코드스페이스에서 개발환경을 더욱 빨리 실행할 수 있도록 사전에 이미지를 빌드해 놓고 사용할 수 있게 하는 Prebuild가 GA로 열렸다. Prebuild를 할 주기를 선택할 수 있고 히스토리 관리 등을 할 수 있다.(영어)
Introducing GitHub Skills : GitHub의 사용 방법을 따라 하면서 배울 수 있는 GitHub Skills 사이트가 공개되었다. GitHub 소개부터 CI까지 템플릿으로 저장소를 생성해보면서 기능을 익힐 수 있다.(영어)
인프라 관련
Automation of Terraform for AWS : mercari에서 수동으로 직원들을 위한 AWS 계정을 만들어 주다가 규모가 커지면서 이러한 문제를 해결하기 위해 자동화하는 과정이다. Terraform보다는 AWS 조직 내에서 계정을 생성하고 해당 계정에 환경을 Terraform으로 프로비저닝하면서 보안 문제가 생기지 않도록 권한을 최소화 한 것이 중요한 부분이라고 생각된다. 계정을 생성할 때는 오직 생성 권한만 가지고 권한을 생성하고 Okta와 SSO를 연결해서 계정을 생성하고 각 환경(production, dev, lab)에서 테라폼용 계정을 만들어서 관리 계정과 권한을 분리해서 보안을 강화했다. 초기에 AWS Control Tower가 기존 계정은 지원하지 않아서 사용하지 않았지만, 지금은 AWS Control Tower가 다 지원해 주고 있으므로 비슷한 상황에서는 Control Tower를 쓰면 된다고 한다.(영어)
Build Your First Docker Extension : Docker Desktop 4.8.0부터 추가된 확장 기능을 만드는 방법을 설명한다. UI는 JavaScript, TypeScript로 작성하는데 React/Material UI를 추천하고 백엔드는 컨테이너 안에서 실행되므로 어떤 언어든 가능하다. docker extension init 명령어로 프로젝트 초기 구성을 할 수 있고 로컬에서 설치하고 디버깅을 해볼 수 있고 개발이 완료되면 마켓 플레이스에 올릴 수 있다.(영어)
Connecting to a private network from GitHub-hosted Actions runners : GitHub Actions를 사용할 때 보통은 깃헙이 운영하는 GitHub-hosted 러너를 사용하지만, 회사의 프라이빗 네트워크에 연결이 필요한 경우 보통 self-hosted 러너를 네트워크 안에 띄워서 실행할 수 있다. 하지만 self-hosted 러너를 관리할 리소스가 없는 경우 GitHub-hosted 러너에서 프라이빗 네트워크에 연결할 방법을 설명한다. OpenID Connect(OICD) 토큰을 이용해서 API 게이트웨이에 인증해서 접속하거나 WireGuard로 오버레이 네트워크를 설정하거나 TailScale같은 사용 솔루션으로 오버레이 네트워크를 설정해서 연결할 수 있다.(영어)
Custom repository roles are now GA : GitHub의 org내 모든 저장소에서 사용할 수 있는 Custom repository role 기능이 추가되었다. 이 Role에 필요한 권한을 설정해서 이를 팀이나 저장소에 할당해서 권한 관리를 할 수 있다.(영어)
엔지니어를 위한 글쓰기 : Writing for Engineers의 번역 글로 글쓴이가 15년 동안 글을 쓰면서 배운 점을 정리했다. 글을 쓸 때 글감이나 태도에 대해 다루고 글을 쓰기 전에 좋은 글을 쓰기 위해 줄거리나 요약 등을 적는 방법을 설명하고 글쓰기를 연습하는 방법을 소개하고 있다. 개인적으로는 머리에 명확한 메시지가 아직 없다면, 당신은 아직 글 쓸 준비가 되지 않은 것입니다.와 글쓰기 기술을 향상하는 유일한 방법은, 바로 글을 써보는 것입니다. 대부분의 많은 연습이 그렇듯이, 질보다 양을 중시하는 건 보통 좋은 생각입니다.가 와닿았다.(한국어)
Sunsetting Atom : 2014년 GitHub이 공개했던 텍스트 에디터인 Atom을 종료하고 VS Code와 GitHub Codespaces에 더 집중할 예정이라고 한다. Atom의 모든 프로젝트는 2022년 12월 15일 아카이브 처리한다고 한다. Atom은 VS Code, Slack, GitHub Desktop 등의 기반이 된 Electron의 시작점이 되었다.(영어)
Comments