<div id="readability-page-1" class="page"><div itemscope="" itemtype="http://schema.org/BlogPosting" id="content"> 
        

				<div>
					<h2>웹개발 관련</h2>

<ul>
<li><strong><a href="https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html">The Plan for React 18</a></strong> : React에서 다음 메이저 버전인 React 18 작업을 시작했고 <a href="https://github.com/reactwg/react-18/discussions/4">워킹 그룹</a>을 만들어서 18에 대해 논의하기 시작했다. React 18에는 더 적은 렌더러를 위한 자동 배치와 <code>Suspense</code>의 SSR 지원 등의 개선이 추가되고 Concurrent 기능의 옵트인을 지원하는 첫 릴리스가 될 것이라고 한다. React 18 Alpha 버전을 릴리스해서 테스트해볼 수 있다.(영어)</li>
<li><strong><a href="https://immigration9.github.io/react/2021/06/12/automatic-batching-react.html">React 18: 렌더링 최적화를 위한 자동 배칭</a></strong> : Dan Abramov가 React 워킹그룹에 작성한 <a href="https://github.com/reactwg/react-18/discussions/21">Automatic batching for fewer renders in React 18</a>을 번역한 글이다. Batchin은 여러 state 업데이트를 하나의 리렌더링으로 묶어주는 것을 의미하고 이를 통해 성능을 바로 개선할 수 있다고 한다. React 18dptjsms <code>createRoot</code>로 자동 배칭을 할 수 있게 되었고 자동 배칭을 원하지 않는 경우와 Hook, Class와 사용할 때의 영향에 대한 설명도 잘 나와 있다.(한국어)</li>
<li><strong><a href="https://web.dev/css-web-vitals/">CSS for Web Vitals</a></strong> : Web Vitals를 최적화 할 수 있는 CSS 기법을 간단한 페이지를 최적화하면서 설명한다. <code>sticky</code>로 상단에 붙어 있던 쿠키 배너를 하단에 <code>fixed</code>로 고정해서 CLS를 개선하고 이미지로 된 배경 이미지를 CSS 그라디언트로 변경해서 LCP를 개선하고 폰트 로딩으로 인한 레이아웃 변경을 줄이기 위해 <code>@import</code> 대신 <code>&lt;link&gt;</code> 태그를 사용한다. 상황별 문제를 찾아서 개선하는 과정을 보여주어서 Web Vitals를 개선하는 접근을 전체적으로 보여주고 있다.(영어)</li>
<li><strong><a href="https://toss.tech/article/yarn-berry-plugins-and-since">Yarn Berry 플러그인과 “since”</a></strong> : Yarn Berry에 추가된 플러그인 기능의 사용법을 설명하고 토스 프론트엔드에서 "since"라는 플러그인을 만드는 과정을 설명하고 있다. 이전에 yarn 1과 Lerna를 사용해서 모노 레포에서 변경사항이 있는 서비스만 찾아낼 수 있게 Lerna의 <code>--since</code> 옵션을 사용하고 있었지만, Yarn Berry는 Lerna와 같이 쓸 수 없었고 Lerna가 이제 유지보수가 잘 되지 않으므로 모노 레포에서 특정 커밋 이후에 변경사항이 있는 워크스페이스만 찾아내고 명령어를 실행하는 <code>since</code>라는 플러그인을 만들었다고 한다.(한국어)</li>
</ul>

<h2>그 밖의 개발 관련</h2>

<ul>
<li><strong><a href="https://d2.naver.com/helloworld/9222129">ArchUnit - UnitTest로 아키텍처 검사를</a></strong> : 아키텍처 구조와 규칙을 쉽게 정의하고 검사해주는 ArchUnit의 사용법을 설명한다. ArchUnit의 테스트를 작성해서 의존관계와 상속 관계 등을 검사하고 레이어 아키텍처 등을 검사할 수 있는데 선언형/명령형으로 검사할 수 있으면 AssertJ와 연동할 수도 있다. 실제 네이버에서 Support 패키지는 다른 패키지를 의존하면 안 된다는 규칙이나 API 문서화를 위한 속성을 통일시키는 등의 규칙을 만들어서 프로젝트를 검사하게 했다고 한다.(한국어)</li>
<li><strong><a href="https://www.theverge.com/2021/5/25/22451144/microsoft-gpt-3-openai-coding-autocomplete-powerapps-power-fx">Microsoft has built an AI-powered autocomplete for code using GPT-3</a></strong> : GPT-3 관련 기술의 라이센스를 가지고 있는 Microsoft에서 엑셀에서 수식을 만들어주는 <a href="https://powerapps.microsoft.com/en-us/blog/introducing-microsoft-power-fx-the-low-code-programming-language-for-everyone/">Power Fx</a>를 오픈소스로 공개했다. Power Fx를 통해서 자연어를 입력하면 GPT-3를 이용해서 쿼리문을 만들어준다고 한다.(영어)</li>
<li><strong><a href="https://medium.com/uniquegood/%ED%8F%AD%EB%B0%9C%EC%A0%81%EC%9D%B8-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A6%9D%EA%B0%80%EB%A1%9C-%EB%A7%88%EC%A3%BC%ED%95%9C-%EC%84%B1%EB%8A%A5-%EC%A0%80%ED%95%98-2%EC%A2%85-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-f60ba284258e">폭발적인 사용자 증가로 마주한 성능 저하 2종 해결하기</a></strong> : 유니크굿컴퍼니라는 회사에서 운영 중인 리얼월드 플랫폼의 한 게임이 트위터를 타고 갑자기 많은 사용자가 방문하면서 겪은 성능 문제를 해결한 과정을 적은 글이다. 처음은 큐의 메시지의 양을 제대로 소비하지 못하면서 지연되는 문제였고 두 번째는 데이터베이스 커넥션 풀을 충분히 설정하지 못해서 타임아웃이 발생한 문제였다. 알고 나면 해결책이 간단하지만, 갑자기 트래픽이 증가하면 없던 문제도 생기게 마련이라 갑자기 대응한 이야기가 재미있다.(한국어)</li>
</ul>

<h2>인프라 관련</h2>

<ul>
<li><strong><a href="https://www.hashicorp.com/blog/toward-vagrant-3-0">Toward Vagrant 3.0</a></strong> : Ruby로 작성된 Vagrant의 기능을 유지하면서 3.0을 준비하면서 Go로 포팅 중이라고 한다. 앞으로 2.3과 2.4에서는 호환성을 깨뜨리지 않을 것이지만 3.0에서는 호환성을 유지하면서도 새로운 설정 방법을 도입할 것이라고 한다. Go로 포팅된 3.0에서는 서버-클라이언트 모델이 도입되고 새로운 플러그인 API도 추가될 것이라고 한다. Vagrant의 유용함이 이제는 많이 줄었다고 생각하는 데 적극적으로 Go로 포팅하면서 개선될 Vagrant가 기대된다.(영어)</li>
<li><strong><a href="https://kubelist.com/issue/129/">New from the CNCF Sandbox</a></strong> : kubelist 뉴스레터에서 최근 CNCF의 TOC에서 Sandbox 프로젝트로 승인한 프로젝트를 정리했다.<ul>
<li><a href="https://blogs.vmware.com/opensource/2021/05/05/antrea-joins-cncf-sandbox/">Antrea</a>: CNI(Container Network Interface)와 Kubernetes NetworkPolicy를 pod 수준에서 구현한 VMWare의 프로젝트</li>
<li><a href="https://www.alibabacloud.com/blog/chaosblade---an-open-source-chaos-engineering-tool-by-alibaba_594850">ChaosBlade</a>: 카오스 엔지니어링 시나리오를 생성하고 쉽게 사용할 수 있게 하는 알리바바의 프로젝트</li>
<li><a href="https://wasmedge.org/">WasmEdge Runtime</a>: 엣지 컴퓨팅을 위한 WebAssembly 런타임</li>
<li><a href="https://v6d.io/">Vineyard</a>: 인메모리 불변 데이터 매니저</li>
<li><a href="https://github.com/fluid-cloudnative/fluid">Fluid</a>: 분산 데이터 세트 오케스트레이터/엑셀러레이터</li>
<li><a href="https://submariner.io/getting-started/architecture/">Submariner</a>: 다중 Kubernetes 클러스터를 연결하고 서비스 디스커버리도 제공하는 프로젝트</li>
</ul></li>
<li><strong><a href="https://medium.com/ctc-mzc/gke-cni-performance-benchmark-2021-06-10-5ff0e6feabe5">GKE CNI Performance benchmark</a></strong> : Kubernetes에서 사용할 수 있는 CNI 중 Kubenet, Calico, Cilium을 Idle 상태, 트래픽을 줄 때의 상황 등에서 네트워크 성능, CPU/램의 사용량 등을 비교한 글이다. 각 CNI의 특징에 따라 성능을 비교해서 볼 수 있다.(한국어)</li>
<li><strong><a href="https://aws.amazon.com/ko/blogs/korea/getting-started-with-amazon-ecs-anywhere-now-generally-available/">Amazon ECS Anywhere 시작하기 – 정식 출시</a></strong> : Amazon의 컨테이너 서비스 ECS를 온프레미스에서 사용할 수 있는 <a href="https://aws.amazon.com/ko/ecs/anywhere/">Amazon ECS Anywhere</a>가 정식 출시되었다.(한국어)</li>
</ul>

<h2>볼만한 링크</h2>

<ul>
<li><strong><a href="https://zzsza.github.io/data/2021/06/13/data-event-log-definition/">데이터 로그 설계, 데이터 로깅, 이벤트 로그 설계, 데이터 QA의 모든 것</a></strong> : 서비스에서 데이터 추적을 위해 많은 로그를 쌓게 되는데 이 데이터 로그의 설계부터 QA까지 기획자, PM, 마케터들이 이해할 수 있게 정리한 글이다. 데이터 로깅을 하기 위해 필요한 상식과 사용할 수 있는 플랫폼들도 정리되어 있고 서버 로그와 클라이언트 로그의 차이, 웹이나 앱의 로깅 특성도 잘 정리되어 있다. 이벤트 로그를 어떻게 설계하는 방법과 예시도 잘 나와 있어서 데이터 추적에 대한 이해도를 높이거나 서비스에 로깅 설계를 할 때 참고해서 정리하기 좋은 글이다. (한국어)</li>
<li><strong><a href="https://www.fastly.com/blog/summary-of-june-8-outage">Summary of June 8 outage</a></strong> : 지난 6월 8일 CDN인 fastly가 장애 나면서 수많은 서비스에 영향을 주었다. 사용자의 유효한 설정이 숨겨져 있던 버그를 실행하면서 발생했고 1분 이내에 이 문제를 발견해서 해당 문제를 격리 한 뒤에 49분 후에 95%의 네트워크를 복구했다고 한다.(영어)</li>
<li><strong><a href="https://developers.facebook.com/blog/post/2021/06/02/f8-refresh-all-about-developers/?locale=ko_KR">F8 Refresh: 개발자가 주인공인 이벤트</a></strong> : 페이스북이 자사의 콘퍼런스 F8에서 새로운 API 및 기능을 공개했다.(한국어)<ul>
<li>Instagram 용 Messenger API 공개</li>
<li>WhatsApp Business API 공개</li>
<li>Messenger를 이용한 로그인 커넥트로 로그인 흐름에서 메시지를 주고받을 수 있게 됨</li>
<li>모바일 AR 플랫폼인 Spark AR에 Multipeer API 추가</li>
</ul></li>
<li><strong><a href="https://blog.dramancompany.com/2021/06/awsgameday2021/">AWS 대회에서 1등 했습니다!</a></strong> : AWS에서 고객사와 진행하는 게임데이에 참여해서 1등을 차지한 후기를 적은 글이다. AWS에서 설정한 어떤 환경 아래에서 AWS 인프라를 이용해서 서비스를 제공하면서 계속 주어지는 문제를 해결하는 식으로 진행되는데 다음 대회를 위해서 자세한 문제까지는 공유하지 못했지만, 진행 방식과 적용한 내용이 나와 있어서 대회 방식을 이해할 수 있다. 나도 이 대회에 참가했는데 어떤 대회인지 사전에는 몰랐지만, 무척 재밌고 잘 구성되어 있었다.(한국어)</li>
</ul>

<h2>IT 업계 뉴스</h2>

<ul>
<li><strong><a href="https://www.wsj.com/articles/software-developer-community-stack-overflow-sold-to-tech-giant-prosus-for-1-8-billion-11622648400">Stack Overflow Sold to Tech Giant Prosus for $1.8 Billion</a></strong> : 개발자가 질문 답변을 하는 사이트인 Stack Overflow가 유럽에서 가장 큰 투자 회사인 Prosus에 18억 달러에 매각되었다.(영어)</li>
<li><strong><a href="https://zdnet.co.kr/view/?no=20210602093043">'빅데이터 강자' 클라우데라, 사모펀드에 팔렸다</a></strong> : 사모펀드가 클라우드 데이터 플랫폼을 제공하는 Cloudera를 53억 달러에 인수했다. 2017년 Cloudera는 뉴욕증시에 상장했지만 이번 인수로 비공개 기업으로 바뀌게 되었다.(한국어)</li>
<li><strong><a href="https://ma.tt/2021/06/day-one-at-automattic/">Day One at Automattic</a></strong> : Wordpress를 운영하는 <a href="https://automattic.com/">Automattic</a>이 노트 앱인 <a href="https://dayoneapp.com/">Day One</a>을 인수했다.(영어)</li>
</ul>

<h2>프로젝트</h2>

<ul>
<li><strong><a href="https://developer.apple.com/sf-symbols/">SF Symbols 3</a></strong> : Apple에서 San Francisco 폰트와 어울리는 아이콘 라이브러리를 공개했다. 3 버전에서 600개의 새 아이콘이 추가되었다.</li>
<li><strong><a href="https://play.elevatorsaga.com/">Elevator Saga</a></strong> : 엘리베이터를 프로그래밍해서 도전 과제를 푸는 게임이다. 예를 들어 일정 시간 내의 몇 명의 사람을 이동시켜라 같은 미션을 엘리베이터 프로그램을 작성해서 푸는 게임이다.</li>
</ul>

<h2>버전 업데이트</h2>

<ul>
<li><strong><a href="https://www.terraform.io/">Terraform</a> v1.0 GA</strong> : 서버 인프라 설정 도구, <a href="https://www.hashicorp.com/blog/announcing-hashicorp-terraform-1-0-general-availability">릴리스 공지</a></li>
<li><strong><a href="http://grafana.org/">Grafana</a> v8.0</strong> : 매트릭 대쉬보드, <a href="https://grafana.com/blog/2021/06/08/grafana-8.0-unified-grafana-and-prometheus-alerts-live-streaming-new-visualizations-and-more/">릴리스 공지</a></li>
<li><strong><a href="https://grafana.com/oss/tempo/">Grafana Tempo</a> v1.0.0 GA</strong> : 분산 트레이싱 백엔드, <a href="https://grafana.com/blog/2021/06/09/grafana-tempo-is-now-ga-with-the-release-of-v1.0/">릴리스 공지</a></li>
<li><strong><a href="http://electron.atom.io/">Electron</a> v13.0.0</strong> : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, <a href="https://www.electronjs.org/blog/electron-13-0">릴리스 공지</a></li>
<li><strong><a href="https://github.com/GoogleChrome/lighthouse">Lighthouse</a> v8.0.0</strong> : Progressive Web Apps용 성능 분석 도구, <a href="https://github.com/GoogleChrome/lighthouse/blob/master/changelog.md#800-2021-06-02">릴리스 공지</a></li>
<li><strong><a href="https://vivaldi.com/">Vivaldi</a> 4.0</strong> : 웹 브라우저, <a href="https://vivaldi.com/blog/vivaldi-4-0/">릴리스 공지</a></li>
<li><strong><a href="https://www.waypointproject.io/">Waypoint</a> v0.4.0</strong> : 빌드, 배포, 릴리스 워크플로우, <a href="https://www.hashicorp.com/blog/announcing-waypoint-0-4">릴리스 공지</a></li>
<li><strong><a href="https://github.com/spring-projects-experimental/spring-native">Spring Native</a> v0.10.0</strong> : GraalVM을 이용한 스프링 네이티브 이미지 컴파일러, <a href="https://spring.io/blog/2021/06/14/spring-native-0-10-0-available-now">릴리스 공지</a></li>
<li><strong><a href="https://gradle.org/">Gradle</a> v7.1</strong> : Java 빌드 도구, <a href="https://docs.gradle.org/7.1/release-notes.html">릴리스 공지</a></li>
<li><strong><a href="https://obsproject.com/">OBS Studio</a> v27.0</strong> : 비디오 녹화 및 라이브 스트리밍 프로그램, <a href="https://github.com/obsproject/obs-studio/releases/tag/27.0.0">릴리스 공지</a></li>
<li><strong><a href="http://nodejs.org/">Node.js</a> v16.3.0 (Current)</strong> : 자바스크립트 런타임, <a href="https://nodejs.org/en/blog/release/v16.3.0/">릴리스 공지</a></li>
<li><strong><a href="https://deno.land/">Deno</a> v1.11.0</strong> : TypeScript 런타임, <a href="https://deno.com/blog/v1.11">릴리스 공지</a></li>
<li><strong><a href="https://pnpm.js.org/">pnpm</a> v6.7.1</strong> : Node.js 패키지 매니저, <a href="https://github.com/pnpm/pnpm/releases/tag/v6.7.1">릴리스 공지</a></li>
<li><strong><a href="https://github.com/rollup/rollup">Rollup</a> v2.51.0</strong> : JavaScript 번들러, <a href="https://github.com/rollup/rollup/blob/master/CHANGELOG.md#2510">변경 사항</a></li>
<li><strong><a href="https://github.com/goharbor/harbor-operator">Harbor Operator</a> v1.0.0</strong> : 컨테이너 이미지 저장소의 오퍼레이터, <a href="https://www.cncf.io/blog/2021/06/09/harbor-operator-1-0-is-available-now/">릴리스 공지</a></li>
</ul>

          </div>
					

				<div>
          <meta itemprop="dateModified" content="2021/06/15 23:23">
					<ul>
						<li itemprop="datePublished"><i title="등록일"></i> 2021/06/15 23:23</li>
						<li><i title="카테고리"></i> <a href="/category/Newsletter">Newsletter</a></li>
						<li>
							<i title="태그"></i>
							
							<a href="https://blog.outsider.ne.kr/tag/react" rel="tag">react</a>,
<a href="https://blog.outsider.ne.kr/tag/web%20vitals" rel="tag">web vitals</a>
							
						</li>
						<li title="CCL">
							<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/kr/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAASCAMAAAAwhE0GAAACZFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQECAgIDAwMFBQUGBgYHBwcKCgoLCwsMDAwNDQ0PDw8QEBARERESEhIVFRUXFxcaGhobGxscHBwdHR0eHh4gICAhISEiIiIjIyMkJCQmJiYpKSkqKiorKysvLy80NDQ1NTU5OTk7OztGRkZHR0dISEhKSkpLS0tOTk5PT09QUFBRUVFTU1NUVFRVVVVWVlZXV1dZWVlaWlpbW1tcXFxdXV1eXl5hYWFiYmJjY2NkZGRpaWlsbGxycnJ0dHR5eXl7e3t8fHx+fn6AgICBgYGCgoKDg4OEhISFhYWHh4eIiIiJiYmKioqLi4uNjY2Ojo6Pj4+QkJCSkpKWlpacnJylpaWnp6epqamrq6uurq6wsLC0tLS4uLi6urq9vb2/v7/AwMDCwsLDw8PExMTFxcXGxsbIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDW1tbX19fY2NjZ2dnc3Nzd3d3g4ODh4eHi4uLj4+Pk5OTl5eXm5ubn5+fo6Ojq6urr6+vs7Ozt7e3u7u7v7+/y8vL09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7////UlTWNAAAAOnRSTlMAAQIDBAYxMjM1NkJERUZHSktNTk9QZmdoaWp5fICCg4WGiIqLv8DCw8TFx8nKy9ja29zd3vr7/P3+v0NsgwAAAr9JREFUOMttk/s/k1EYwGdokW4qE5WSculm0d7tySKMLkSke6lR7hsVXVFCupJLFyWXEREhw2xS5JLnn+o5Z7Px+Xh+eN+z7/t9dp7znHNEIhZOrp4hMk9XJ9HiWBY6ungeDJa6ONqJe5DisFodptizSbQEqmJjVUvh+kCBmULQBisQ71Cefqo3m9srzoCfox0mVXSMGjurUuzQwUeRWNb2c0hfnqz0FXPkA9kjiNXViMZ88LN6PpAzijg2gGgqsMGtkDGMPIxa8GVkjXBzGrELoAtxTqu01LNGyGPOcx095nTKjRyuFtL/IjZWVn6Yw9k8pTu1JTCe5sUJjWaCXuakfc6sV4Fwowkn7x2P0DQijidbYEDcME4XAsV1I5l7nUUSoZSSunU5OboeGlQoXMiTCIkAqZlw7U7Ke4LPFK4cklkNiW/eXoa8eawkU6rS0+c69n91NOhQbSZPqmpt0R4BKJvgK/xqhXocuwiPEL9HhvdwKFMb6HM9S66ngSEmhDxZDMHu+3Fw4kGvHZJpTo18hzh7jlwGLcm2mQ0xoeQFc4jmV2chOv8LmtSh1mT8/Y218DzU8mSpqp1+9hcBFPXzCr3I8+DwTx9O0tohtTzci5fdjvOlt1oRf0SHdfKyJcJjNkkDQAN7V/HerGDw3+3wzAzQfNJGgLVhTxDvwpXWTg1cneVddAqIZxtfC1QJ25X9fFf8Cc5/zDp2tJBKbY6ywADa1JFLbIEX+tDMTTd52hRiDUAN4kyu9ZCs4hBfFNBjJt8K3eTpU/jrZXbua7PN3ALpg9hbUtKLhizLoaPwhjQ6muNDiEMZNshNHmTutDJ5fHGbyaQvSRC2iRfuj/ehkw8/Dww2FZ9aBJnZPDDQUpKg2L4A3XbJIToa5LvXLrp9DEZGLQOZ6b/OzhwkHsEHPCTiJfeeoGw5SOZKC/wPvbta2ieizLUAAAAASUVORK5CYII=" alt="BY-NC-SA" title="BY-NC-SA"></a>
							
							
						</li>
						
            
						<li>
							
						</li>
					</ul>
          </div>
        <meta itemprop="mainEntityOfPage" content="/1552">
        <meta itemprop="name" content="기술 뉴스 #176 : 21-06-15">
        
        
	      



				

				

				

				
			</div></div>

Outsider's Dev Story

Outsider

웹개발 관련
The Plan for React 18 : React에서 다음 메이저 버전인 React 18 작업을 시작했고 워킹 그룹을 만들어서 18에 대해 논의하기 시작했다. React 18에는 더 적은 렌더러를 위한 자동 배치와 Suspense의 SSR 지원 등의 개선이 추가되고 Concurrent 기능의 옵트인을 지원하는 첫 릴리스가 될 것이라고 한다. React 18 Alpha 버전을 릴리스해서 테스트해볼 수 있다.(영어)
React 18: 렌더링 최적화를 위한 자동 배칭 : Dan Abramov가 React 워킹그룹에 작성한 Automatic batching for fewer renders in React 18을 번역한 글이다. Batchin은 여러 state 업데이트를 하나의 리렌더링으로 묶어주는 것을 의미하고 이를 통해 성능을 바로 개선할 수 있다고 한다. React 18dptjsms createRoot로 자동 배칭을 할 수 있게 되었고 자동 배칭을 원하지 않는 경우와 Hook, Class와 사용할 때의 영향에 대한 설명도 잘 나와 있다.(한국어)
CSS for Web Vitals : Web Vitals를 최적화 할 수 있는 CSS 기법을 간단한 페이지를 최적화하면서 설명한다. sticky로 상단에 붙어 있던 쿠키 배너를 하단에 fixed로 고정해서 CLS를 개선하고 이미지로 된 배경 이미지를 CSS 그라디언트로 변경해서 LCP를 개선하고 폰트 로딩으로 인한 레이아웃 변경을 줄이기 위해 @import 대신 <link> 태그를 사용한다. 상황별 문제를 찾아서 개선하는 과정을 보여주어서 Web Vitals를 개선하는 접근을 전체적으로 보여주고 있다.(영어)
Yarn Berry 플러그인과 “since” : Yarn Berry에 추가된 플러그인 기능의 사용법을 설명하고 토스 프론트엔드에서 "since"라는 플러그인을 만드는 과정을 설명하고 있다. 이전에 yarn 1과 Lerna를 사용해서 모노 레포에서 변경사항이 있는 서비스만 찾아낼 수 있게 Lerna의 --since 옵션을 사용하고 있었지만, Yarn Berry는 Lerna와 같이 쓸 수 없었고 Lerna가 이제 유지보수가 잘 되지 않으므로 모노 레포에서 특정 커밋 이후에 변경사항이 있는 워크스페이스만 찾아내고 명령어를 실행하는 since라는 플러그인을 만들었다고 한다.(한국어)
그 밖의 개발 관련
ArchUnit - UnitTest로 아키텍처 검사를 : 아키텍처 구조와 규칙을 쉽게 정의하고 검사해주는 ArchUnit의 사용법을 설명한다. ArchUnit의 테스트를 작성해서 의존관계와 상속 관계 등을 검사하고 레이어 아키텍처 등을 검사할 수 있는데 선언형/명령형으로 검사할 수 있으면 AssertJ와 연동할 수도 있다. 실제 네이버에서 Support 패키지는 다른 패키지를 의존하면 안 된다는 규칙이나 API 문서화를 위한 속성을 통일시키는 등의 규칙을 만들어서 프로젝트를 검사하게 했다고 한다.(한국어)
Microsoft has built an AI-powered autocomplete for code using GPT-3 : GPT-3 관련 기술의 라이센스를 가지고 있는 Microsoft에서 엑셀에서 수식을 만들어주는 Power Fx를 오픈소스로 공개했다. Power Fx를 통해서 자연어를 입력하면 GPT-3를 이용해서 쿼리문을 만들어준다고 한다.(영어)
폭발적인 사용자 증가로 마주한 성능 저하 2종 해결하기 : 유니크굿컴퍼니라는 회사에서 운영 중인 리얼월드 플랫폼의 한 게임이 트위터를 타고 갑자기 많은 사용자가 방문하면서 겪은 성능 문제를 해결한 과정을 적은 글이다. 처음은 큐의 메시지의 양을 제대로 소비하지 못하면서 지연되는 문제였고 두 번째는 데이터베이스 커넥션 풀을 충분히 설정하지 못해서 타임아웃이 발생한 문제였다. 알고 나면 해결책이 간단하지만, 갑자기 트래픽이 증가하면 없던 문제도 생기게 마련이라 갑자기 대응한 이야기가 재미있다.(한국어)
인프라 관련
Toward Vagrant 3.0 : Ruby로 작성된 Vagrant의 기능을 유지하면서 3.0을 준비하면서 Go로 포팅 중이라고 한다. 앞으로 2.3과 2.4에서는 호환성을 깨뜨리지 않을 것이지만 3.0에서는 호환성을 유지하면서도 새로운 설정 방법을 도입할 것이라고 한다. Go로 포팅된 3.0에서는 서버-클라이언트 모델이 도입되고 새로운 플러그인 API도 추가될 것이라고 한다. Vagrant의 유용함이 이제는 많이 줄었다고 생각하는 데 적극적으로 Go로 포팅하면서 개선될 Vagrant가 기대된다.(영어)
New from the CNCF Sandbox : kubelist 뉴스레터에서 최근 CNCF의 TOC에서 Sandbox 프로젝트로 승인한 프로젝트를 정리했다.
Antrea: CNI(Container Network Interface)와 Kubernetes NetworkPolicy를 pod 수준에서 구현한 VMWare의 프로젝트
ChaosBlade: 카오스 엔지니어링 시나리오를 생성하고 쉽게 사용할 수 있게 하는 알리바바의 프로젝트
WasmEdge Runtime: 엣지 컴퓨팅을 위한 WebAssembly 런타임
Vineyard: 인메모리 불변 데이터 매니저
Fluid: 분산 데이터 세트 오케스트레이터/엑셀러레이터
Submariner: 다중 Kubernetes 클러스터를 연결하고 서비스 디스커버리도 제공하는 프로젝트
GKE CNI Performance benchmark : Kubernetes에서 사용할 수 있는 CNI 중 Kubenet, Calico, Cilium을 Idle 상태, 트래픽을 줄 때의 상황 등에서 네트워크 성능, CPU/램의 사용량 등을 비교한 글이다. 각 CNI의 특징에 따라 성능을 비교해서 볼 수 있다.(한국어)
Amazon ECS Anywhere 시작하기 – 정식 출시 : Amazon의 컨테이너 서비스 ECS를 온프레미스에서 사용할 수 있는 Amazon ECS Anywhere가 정식 출시되었다.(한국어)
볼만한 링크
데이터 로그 설계, 데이터 로깅, 이벤트 로그 설계, 데이터 QA의 모든 것 : 서비스에서 데이터 추적을 위해 많은 로그를 쌓게 되는데 이 데이터 로그의 설계부터 QA까지 기획자, PM, 마케터들이 이해할 수 있게 정리한 글이다. 데이터 로깅을 하기 위해 필요한 상식과 사용할 수 있는 플랫폼들도 정리되어 있고 서버 로그와 클라이언트 로그의 차이, 웹이나 앱의 로깅 특성도 잘 정리되어 있다. 이벤트 로그를 어떻게 설계하는 방법과 예시도 잘 나와 있어서 데이터 추적에 대한 이해도를 높이거나 서비스에 로깅 설계를 할 때 참고해서 정리하기 좋은 글이다. (한국어)
Summary of June 8 outage : 지난 6월 8일 CDN인 fastly가 장애 나면서 수많은 서비스에 영향을 주었다. 사용자의 유효한 설정이 숨겨져 있던 버그를 실행하면서 발생했고 1분 이내에 이 문제를 발견해서 해당 문제를 격리 한 뒤에 49분 후에 95%의 네트워크를 복구했다고 한다.(영어)
F8 Refresh: 개발자가 주인공인 이벤트 : 페이스북이 자사의 콘퍼런스 F8에서 새로운 API 및 기능을 공개했다.(한국어)
Instagram 용 Messenger API 공개
WhatsApp Business API 공개
Messenger를 이용한 로그인 커넥트로 로그인 흐름에서 메시지를 주고받을 수 있게 됨
모바일 AR 플랫폼인 Spark AR에 Multipeer API 추가
AWS 대회에서 1등 했습니다! : AWS에서 고객사와 진행하는 게임데이에 참여해서 1등을 차지한 후기를 적은 글이다. AWS에서 설정한 어떤 환경 아래에서 AWS 인프라를 이용해서 서비스를 제공하면서 계속 주어지는 문제를 해결하는 식으로 진행되는데 다음 대회를 위해서 자세한 문제까지는 공유하지 못했지만, 진행 방식과 적용한 내용이 나와 있어서 대회 방식을 이해할 수 있다. 나도 이 대회에 참가했는데 어떤 대회인지 사전에는 몰랐지만, 무척 재밌고 잘 구성되어 있었다.(한국어)
IT 업계 뉴스
Stack Overflow Sold to Tech Giant Prosus for $1.8 Billion : 개발자가 질문 답변을 하는 사이트인 Stack Overflow가 유럽에서 가장 큰 투자 회사인 Prosus에 18억 달러에 매각되었다.(영어)
'빅데이터 강자' 클라우데라, 사모펀드에 팔렸다 : 사모펀드가 클라우드 데이터 플랫폼을 제공하는 Cloudera를 53억 달러에 인수했다. 2017년 Cloudera는 뉴욕증시에 상장했지만 이번 인수로 비공개 기업으로 바뀌게 되었다.(한국어)
Day One at Automattic : Wordpress를 운영하는 Automattic이 노트 앱인 Day One을 인수했다.(영어)
프로젝트
SF Symbols 3 : Apple에서 San Francisco 폰트와 어울리는 아이콘 라이브러리를 공개했다. 3 버전에서 600개의 새 아이콘이 추가되었다.
Elevator Saga : 엘리베이터를 프로그래밍해서 도전 과제를 푸는 게임이다. 예를 들어 일정 시간 내의 몇 명의 사람을 이동시켜라 같은 미션을 엘리베이터 프로그램을 작성해서 푸는 게임이다.
버전 업데이트
Terraform v1.0 GA : 서버 인프라 설정 도구, 릴리스 공지
Grafana v8.0 : 매트릭 대쉬보드, 릴리스 공지
Grafana Tempo v1.0.0 GA : 분산 트레이싱 백엔드, 릴리스 공지
Electron v13.0.0 : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, 릴리스 공지
Lighthouse v8.0.0 : Progressive Web Apps용 성능 분석 도구, 릴리스 공지
Vivaldi 4.0 : 웹 브라우저, 릴리스 공지
Waypoint v0.4.0 : 빌드, 배포, 릴리스 워크플로우, 릴리스 공지
Spring Native v0.10.0 : GraalVM을 이용한 스프링 네이티브 이미지 컴파일러, 릴리스 공지
Gradle v7.1 : Java 빌드 도구, 릴리스 공지
OBS Studio v27.0 : 비디오 녹화 및 라이브 스트리밍 프로그램, 릴리스 공지
Node.js v16.3.0 (Current) : 자바스크립트 런타임, 릴리스 공지
Deno v1.11.0 : TypeScript 런타임, 릴리스 공지
pnpm v6.7.1 : Node.js 패키지 매니저, 릴리스 공지
Rollup v2.51.0 : JavaScript 번들러, 변경 사항
Harbor Operator v1.0.0 : 컨테이너 이미지 저장소의 오퍼레이터, 릴리스 공지
댓글 쓰기