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

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

<ul>
<li><strong>OROR Forge: Figma to Code 도구 제작기 <a href="https://tech.kakao.com/2024/01/09/ororforge-1/">(1) 디자인을 코드로 만들어보자!</a>, <a href="https://tech.kakao.com/2024/01/09/ororforge-2/">(2) 실전용으로 만들기</a></strong> : Figma로 된 디자인을 코드로 만드는 시간을 줄이기 위해 자동화 도구를 만드는 과정이다. 상용 Figma to Code 솔루션 중 Amplify Sudio와 Locofy를 살펴보면서 인상적인 기능이 있었지만, 각 한계점이 있었고 직접 만들기로 한다. 이 OROR Forge에서 Figma의 디자인을 픽셀 퍼팩트한 코드를 생성하기 위해 Figma의 Property, Auto Layout, Constraints, Text를 CSS의 Property, Flexbox, Postions, Text로 변환한 과정을 설명한다. 이를 실제 현업에서 활용하기 위해 인라인 스타일 대신 TailwindCSS를 사용하기로 하고 인라인 스타일을 TailwindCSS로 매핑하는 빌더 함수를 구현하고 HTML 코드고 React 컴포넌트로 변환해서 코드 생성을 자동화한 과정을 설명한다.(한국어)</li>
<li><strong><a href="https://leerob.io/blog/css">How I'm Writing CSS in 2024</a></strong> : Vercel의 Lee Robinson이 nesting, <code>:has()</code>, 컨테이너 쿼리 등의 크로스 브라우저 지원과 CSS 도구 등에 관한 생각을 정리한 글이다. 이제 최신 CSS 기능이 대부분의 브라우저에서 지원되면서 Sass나 Less 없이도 최신 CSS를 작성할 수 있지만 컴파일러를 사용해서 사용하지 않는 스타일을 줄이고 고유한 파일명을 생성해서 캐싱할 수 있다. 동적인 화면을 위해서는 CSS를 스트리밍해야 하는데 이를 위해서 CSS 모듈, Tailwind CSS, StyleX를 사용할 수 있다.(영어)</li>
</ul>

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

<ul>
<li><strong><a href="https://netflixtechblog.com/rebuilding-netflix-video-processing-pipeline-with-microservices-4e5e6310e359">Rebuilding Netflix Video Processing Pipeline with Microservices</a></strong> : Netflix에서 2007년 스트리밍 서비스 출시 이후 동영상 처리 파이프라인을 개선해 왔다. 2014년부터 3세대 플랫폼인 Reloaded로 운영해 왔는데 모든 미디어 자산을 처리하는 모노리식 시스템으로 만들어졌기에 수년 동안 확장되면서 복잡도가 증가하고 한계가 드러나기 시작했다. 기능이 결합하여 있어서 기능 추가가 어려웠고 모노리식 구조로 재사용되지 않아야 하는 코드도 재사용되며 개발 속도를 늦추고 배포 규모가 커져서 프로덕션에 나가기까지 2주에서 4주나 걸리게 되었다. 그래서 2018년부터 차세대 플랫폼인 Cosmos를 개발하면서 Reloaded의 확장성과 안정성은 유지하면서 유연성과 개발 속도를 목표로 하면서 마이크로 서비스로 만들게 되었고 2023년 9월에 전환을 완료했다.(영어)</li>
<li><strong><a href="https://tonybaloney.github.io/posts/python-gets-a-jit.html">Python 3.13 gets a JIT</a></strong> : CPython 핵심 개발자인 Brandt Bucher가 Python 3.13에 copy-and-patch JIT을 추가하는 Pull Request를 올렸다.(현재 Draft 상태) 인터프리터는 실행할 때마다 opcode라 부르는 바이트 코드 이름을 if 문과 비교하는데 실행할 때마다 발생하는 오버헤드를 없애기 위해 시퀀스로 코드를 생성하는 것이 JIT이 하는 일이고 이번에 제안된 것은 copy-and-patch JIT이다. 인터프리터 루프는 해석한 뒤 실행하는 두 가지 과정을 거치는데 copy-and-patch JIT은 각 명령의 인스트럭션을 복사한 뒤에 바이트 코드 인수를 채우는(patch) 방식으로 진행된다. copy-and-patch JIT을 선택한 이유는 일반 Python 사용자가 이를 실행할 일은 없고 CPython을 빌드하고 패키징하는 CI 머신에서 LLVM JIT 도구만 설치하면 되기 때문이다. 초기 벤치마크에서는 2~9%의 성능 향상이 있는데 이 결과가 작아 보일 수 있으나 최적화 작업의 첫 단계로 생각하면 된다.(영어)</li>
</ul>



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

<ul>
<li><strong><a href="https://zetablogs.medium.com/prometheus-vs-victoria-metrics-load-testing-3fa0cc782912">Prometheus Vs Victoria Metrics Load Testing</a></strong> : <a href="https://prometheus.io/">Prometheus</a>와 V<a href="https://victoriametrics.com/">itoria Metrics</a>의 성능 비교를 한 글이다. Prometheus는 압축할 때 active time series를 메모리에 저장하지만, Vitoria Metrics는 VM insert 스토리지에 저장하므로 이는 성계의 차이는 성능에도 영향을 준다. active time series, 수집률, 수집 대상의 수를 부하 테스트를 하면서 프로덕션에 운영하는 정도의 매트릭으로 둘을 비교하고 있다. 부하가 커지면 Prometheus는 메모리가 Vitoria Metrics는 CPU가 커지는 특징이 있지만 Vitoria Metrics에 최적화한 뒤에는 전체적으로 Vitoria Metrics 리소스 사용이 훨씬 적은 것으로 나타났다.(영어)</li>
<li><strong><a href="https://opentofu.org/blog/opentofu-is-going-ga/">OpenTofu is going GA</a></strong> : Terraform의 오픈소스 포크인 <a href="https://opentofu.org/">OpenTofu</a>가 4개월간의 개발 후 첫 안정 버전이 릴리스했다.</li>
<li><strong><a href="https://www.docker.com/blog/announcing-builds-view-in-docker-desktop-ga/">Announcing Builds View in Docker Desktop GA</a></strong> : Docker Desktop 4.26부터 빌드 뷰를 제공하기 시작했다. 빌드뷰를 통해서 실패한 빌드의 로그를 볼 수 있고 캐싱 여부도 확인할 수 있다.(영어)</li>
<li><strong><a href="https://www.hashicorp.com/blog/target-cli-the-context-switcher-for-hashicorp-tools">Target CLI: The context switcher for HashiCorp tools</a></strong> : HashiCorp의 Senior Developer Advocate가 만든 <a href="https://github.com/devops-rob/target-cli">Target CLI</a>의 소개 글이다. HashiCorp에는 Terraform, Vault, Boundary, Consul, Nomad 등의 도구가 있지만 각 클러스터 간의 전환을 위해서는 환경변수를 세팅해야 한다. Target CLI는 이러한 컨텍스트 프로필의 전환을 쉽게 해주는 역할을 한다.(영어)</li>
<li><strong><a href="https://samuel.karp.dev/blog/2024/01/deprecation-warnings-in-containerd-getting-ready-for-2.0/">Deprecation Warnings in containerd - Getting Ready for 2.0!</a></strong> : containerd가 2017년 1.0 릴리스 이후 6년간의 개발을 통해 2.0가 나올 예정이므로 이를 준비하라고 알리는 글이다. <code>ctr deprecations list</code> 명령어로 사용량 기반으로 중단되는 기능을 확인할 수 있다.(영어)</li>
</ul>

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

<ul>
<li><strong><a href="https://www.lukew.com/ff/entry.asp?2046">The More Features You Add...</a></strong> : 여러 연구 결과에 따르면 사람들은 제품 사용 전에는 기능 수에 따라 품질을 판단하고 제품을 사용한 후에는 너무 많은 기능으로 사용성에 문제가 있다는 걸 깨닫게 된다고 한다. 제품의 시기에 따라 영업의 결과도 달라지는데 기업은 초기 매출을 극대화하기 위해 기능이 많은 제품을 개발하지만, 이후에는 고객 유지를 극대화하기 위해서 기능보다는 사용 편의성을 우선시해야 한다. 또한 기능이 많아지면 유지보수도 많아져서 속도도 느려지게 되므로 조심해야 한다.(영어)</li>
<li><strong><a href="https://radar.cloudflare.com/year-in-review/2023">Cloudflare Radar Year in Review 2023</a></strong> : Cloudflare에서 자신들의 트래픽을 기준으로 리포트를 공개했다. 가장 많이 사용되는 인터넷 서비스와 iOS/Android 비중, API 클라이언트, 국가별 인터넷 품질, 모바일/데스크톱 비중 등을 확인할 수 있다.(영어)</li>
</ul>

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

<ul>
<li><strong><a href="https://openai.com/blog/introducing-the-gpt-store">Introducing the GPT Store</a></strong> : 사람들이 많은 GPT를 확인할 수 있는 OpenAI GPT 스토어가 나왔다. 인기 많은 GPT를 확인할 수 있고 1분기 이내에 수익 프로그램을 출시해서 GTP 사용량에 따라 만든 사람한테 수익이 분배되도록 할 예정이라고 한다.(영어)</li>
<li><strong><a href="https://kotaku.com/unity-layoffs-1800-people-jobs-25-percent-january-2024-1851150254">Report: Unity Cutting About 1,800 People In Company's Largest Layoff</a></strong> : Unity가 직원의 25% 정도인 1,800명을 감원할 계획이라고 한다.(영어)</li>
<li><strong><a href="https://www.bbc.com/news/entertainment-arts-67833411">Disney's earliest Mickey and Minnie Mouse enter public domain as US copyright expires</a></strong> : 디즈니의 미키 마우스와 미니 마우스가 95년 뒤에는 누구나 사용할 수 있는 퍼블릭 도메인에 진입하는 저작권 법에 따라 1928년 공개된 미키 마우스와 미니 마우스를 누구나 사용할 수 있게 되었다.(영어)</li>
</ul>

<h2>프로젝트</h2>

<ul>
<li><strong><a href="https://tart.run/">Tart</a></strong> : Apple Silicon 기반 macOS/Linux 가상화를 제공하는 서비스로 GitHub Actions, GitLab Runner, Buildkite 등의 러너로 사용할 수 있다.</li>
<li><strong><a href="https://github.com/openpubkey/openpubkey">OpenPubKey</a></strong> : OpenID 프로바이더에서 식별자를 공개키에 바인딩하는 프로토콜의 구현체</li>
<li><strong><a href="https://github.com/bartoszjarocki/cv">Minimalist CV</a></strong> : 간단한 정적 파일을 통해 이력서 페이지를 만들어주는 프로젝트.</li>
</ul>

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

<ul>
<li><strong><a href="https://rescript-lang.org/">ReScript</a> v11.0.0</strong> : 프로그래밍 언어(구 BuckleScript/Reason), <a href="https://rescript-lang.org/blog/release-11-0-0">릴리스 공지</a></li>
<li><strong><a href="https://opentofu.org/">OpenTofu</a> v1.6.0</strong> : Infrastructure as Code 도구, <a href="https://github.com/opentofu/opentofu/releases/tag/v1.6.0">릴리스 공지</a></li>
<li><strong><a href="https://ui.nuxt.com/">Nuxt UI</a> v2.12.0</strong> : UI 라이브러리, <a href="https://github.com/nuxt/ui/releases/tag/v2.12.0">릴리스 공지</a></li>
<li><strong><a href="http://www.sqlite.org/">SQLite</a> v3.45.0</strong> : SQL 데이터베이스 엔진, <a href="https://sqlite.org/draft/releaselog/3_45_0.html">릴리즈 공지</a><ul>
<li>새로운 JSONB 파스 트리 형식 도입</li>
</ul></li>
<li><strong><a href="https://zed.dev/">Zed</a> v0.118.1</strong> : 코드 에디터, <a href="https://zed.dev/releases/stable#zed-0.116.1">릴리스 공지</a></li>
<li><strong><a href="https://kargo.akuity.io/">Kargo</a> v0.3.0</strong> : Kubernetes용 배포 도구, <a href="https://github.com/akuity/kargo/releases/tag/v0.3.0">릴리스 공지</a></li>
<li><strong><a href="https://hono.dev/">Hono</a> v3.12.0</strong> : 엣지용 웹 프레임워크, <a href="https://github.com/honojs/hono/releases/tag/v3.12.0">릴리스 공지</a></li>
<li><strong><a href="http://nodejs.org/">Node.js</a> v20.11.0 (LTS)</strong> : 자바스크립트 런타임, <a href="https://nodejs.org/en/blog/release/v20.11.0">릴리스 공지</a></li>
<li><strong><a href="http://nodejs.org/">Node.js</a> v21.6.0 (Current)</strong> : 자바스크립트 런타임, <a href="https://nodejs.org/en/blog/release/v21.6.0">릴리스 공지</a></li>
<li><strong><a href="https://github.com/hashicorp/terraform-cdk">CDK for Terraform</a> v0.20.0</strong> : Terraform Cloud Development Kit, <a href="https://www.hashicorp.com/blog/cdktf-0-20-improves-implementation-of-iterators-and-enables-hcl-output">릴리스 공지</a></li>
</ul>

          </div>
					

				<div>
          <meta itemprop="dateModified" content="2024/01/16 03:20">
					<ul>
						<li itemprop="datePublished"><i title="등록일"></i> 2024/01/16 03:20</li>
						<li><i title="카테고리"></i> <a href="/category/Newsletter">Newsletter</a></li>
						<li>
							<i title="태그"></i>
							
							<a href="https://blog.outsider.ne.kr/tag/containerd" rel="tag">containerd</a>,
<a href="https://blog.outsider.ne.kr/tag/Figma" rel="tag">Figma</a>,
<a href="https://blog.outsider.ne.kr/tag/OpenTofu" rel="tag">OpenTofu</a>,
<a href="https://blog.outsider.ne.kr/tag/prometheus" rel="tag">prometheus</a>,
<a href="https://blog.outsider.ne.kr/tag/Python" rel="tag">Python</a>,
<a href="https://blog.outsider.ne.kr/tag/Victoria%20Metrics" rel="tag">Victoria Metrics</a>
							
						</li>
						<li title="CCL">
							<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/kr/"><img src="https://blog.outsider.ne.kr/skin/blog/anti_verbose/images/license.png" alt="BY-NC-SA" title="BY-NC-SA"></a>
							
							
						</li>
						
            
						<li>
							
						</li>
					</ul>
				</div>
        <meta itemprop="mainEntityOfPage" content="/1705">
        <meta itemprop="name" content="기술 뉴스 #238 : 24-01-16">
        
        
	      



				

				

				

				
			</div></div>

Outsider's Dev Story

Outsider

웹개발 관련
OROR Forge: Figma to Code 도구 제작기 (1) 디자인을 코드로 만들어보자!, (2) 실전용으로 만들기 : Figma로 된 디자인을 코드로 만드는 시간을 줄이기 위해 자동화 도구를 만드는 과정이다. 상용 Figma to Code 솔루션 중 Amplify Sudio와 Locofy를 살펴보면서 인상적인 기능이 있었지만, 각 한계점이 있었고 직접 만들기로 한다. 이 OROR Forge에서 Figma의 디자인을 픽셀 퍼팩트한 코드를 생성하기 위해 Figma의 Property, Auto Layout, Constraints, Text를 CSS의 Property, Flexbox, Postions, Text로 변환한 과정을 설명한다. 이를 실제 현업에서 활용하기 위해 인라인 스타일 대신 TailwindCSS를 사용하기로 하고 인라인 스타일을 TailwindCSS로 매핑하는 빌더 함수를 구현하고 HTML 코드고 React 컴포넌트로 변환해서 코드 생성을 자동화한 과정을 설명한다.(한국어)
How I'm Writing CSS in 2024 : Vercel의 Lee Robinson이 nesting, :has(), 컨테이너 쿼리 등의 크로스 브라우저 지원과 CSS 도구 등에 관한 생각을 정리한 글이다. 이제 최신 CSS 기능이 대부분의 브라우저에서 지원되면서 Sass나 Less 없이도 최신 CSS를 작성할 수 있지만 컴파일러를 사용해서 사용하지 않는 스타일을 줄이고 고유한 파일명을 생성해서 캐싱할 수 있다. 동적인 화면을 위해서는 CSS를 스트리밍해야 하는데 이를 위해서 CSS 모듈, Tailwind CSS, StyleX를 사용할 수 있다.(영어)
그 밖의 개발 관련
Rebuilding Netflix Video Processing Pipeline with Microservices : Netflix에서 2007년 스트리밍 서비스 출시 이후 동영상 처리 파이프라인을 개선해 왔다. 2014년부터 3세대 플랫폼인 Reloaded로 운영해 왔는데 모든 미디어 자산을 처리하는 모노리식 시스템으로 만들어졌기에 수년 동안 확장되면서 복잡도가 증가하고 한계가 드러나기 시작했다. 기능이 결합하여 있어서 기능 추가가 어려웠고 모노리식 구조로 재사용되지 않아야 하는 코드도 재사용되며 개발 속도를 늦추고 배포 규모가 커져서 프로덕션에 나가기까지 2주에서 4주나 걸리게 되었다. 그래서 2018년부터 차세대 플랫폼인 Cosmos를 개발하면서 Reloaded의 확장성과 안정성은 유지하면서 유연성과 개발 속도를 목표로 하면서 마이크로 서비스로 만들게 되었고 2023년 9월에 전환을 완료했다.(영어)
Python 3.13 gets a JIT : CPython 핵심 개발자인 Brandt Bucher가 Python 3.13에 copy-and-patch JIT을 추가하는 Pull Request를 올렸다.(현재 Draft 상태) 인터프리터는 실행할 때마다 opcode라 부르는 바이트 코드 이름을 if 문과 비교하는데 실행할 때마다 발생하는 오버헤드를 없애기 위해 시퀀스로 코드를 생성하는 것이 JIT이 하는 일이고 이번에 제안된 것은 copy-and-patch JIT이다. 인터프리터 루프는 해석한 뒤 실행하는 두 가지 과정을 거치는데 copy-and-patch JIT은 각 명령의 인스트럭션을 복사한 뒤에 바이트 코드 인수를 채우는(patch) 방식으로 진행된다. copy-and-patch JIT을 선택한 이유는 일반 Python 사용자가 이를 실행할 일은 없고 CPython을 빌드하고 패키징하는 CI 머신에서 LLVM JIT 도구만 설치하면 되기 때문이다. 초기 벤치마크에서는 2~9%의 성능 향상이 있는데 이 결과가 작아 보일 수 있으나 최적화 작업의 첫 단계로 생각하면 된다.(영어)
인프라 관련
Prometheus Vs Victoria Metrics Load Testing : Prometheus와 Vitoria Metrics의 성능 비교를 한 글이다. Prometheus는 압축할 때 active time series를 메모리에 저장하지만, Vitoria Metrics는 VM insert 스토리지에 저장하므로 이는 성계의 차이는 성능에도 영향을 준다. active time series, 수집률, 수집 대상의 수를 부하 테스트를 하면서 프로덕션에 운영하는 정도의 매트릭으로 둘을 비교하고 있다. 부하가 커지면 Prometheus는 메모리가 Vitoria Metrics는 CPU가 커지는 특징이 있지만 Vitoria Metrics에 최적화한 뒤에는 전체적으로 Vitoria Metrics 리소스 사용이 훨씬 적은 것으로 나타났다.(영어)
OpenTofu is going GA : Terraform의 오픈소스 포크인 OpenTofu가 4개월간의 개발 후 첫 안정 버전이 릴리스했다.
Announcing Builds View in Docker Desktop GA : Docker Desktop 4.26부터 빌드 뷰를 제공하기 시작했다. 빌드뷰를 통해서 실패한 빌드의 로그를 볼 수 있고 캐싱 여부도 확인할 수 있다.(영어)
Target CLI: The context switcher for HashiCorp tools : HashiCorp의 Senior Developer Advocate가 만든 Target CLI의 소개 글이다. HashiCorp에는 Terraform, Vault, Boundary, Consul, Nomad 등의 도구가 있지만 각 클러스터 간의 전환을 위해서는 환경변수를 세팅해야 한다. Target CLI는 이러한 컨텍스트 프로필의 전환을 쉽게 해주는 역할을 한다.(영어)
Deprecation Warnings in containerd - Getting Ready for 2.0! : containerd가 2017년 1.0 릴리스 이후 6년간의 개발을 통해 2.0가 나올 예정이므로 이를 준비하라고 알리는 글이다. ctr deprecations list 명령어로 사용량 기반으로 중단되는 기능을 확인할 수 있다.(영어)
볼만한 링크
The More Features You Add... : 여러 연구 결과에 따르면 사람들은 제품 사용 전에는 기능 수에 따라 품질을 판단하고 제품을 사용한 후에는 너무 많은 기능으로 사용성에 문제가 있다는 걸 깨닫게 된다고 한다. 제품의 시기에 따라 영업의 결과도 달라지는데 기업은 초기 매출을 극대화하기 위해 기능이 많은 제품을 개발하지만, 이후에는 고객 유지를 극대화하기 위해서 기능보다는 사용 편의성을 우선시해야 한다. 또한 기능이 많아지면 유지보수도 많아져서 속도도 느려지게 되므로 조심해야 한다.(영어)
Cloudflare Radar Year in Review 2023 : Cloudflare에서 자신들의 트래픽을 기준으로 리포트를 공개했다. 가장 많이 사용되는 인터넷 서비스와 iOS/Android 비중, API 클라이언트, 국가별 인터넷 품질, 모바일/데스크톱 비중 등을 확인할 수 있다.(영어)
IT 업계 뉴스
Introducing the GPT Store : 사람들이 많은 GPT를 확인할 수 있는 OpenAI GPT 스토어가 나왔다. 인기 많은 GPT를 확인할 수 있고 1분기 이내에 수익 프로그램을 출시해서 GTP 사용량에 따라 만든 사람한테 수익이 분배되도록 할 예정이라고 한다.(영어)
Report: Unity Cutting About 1,800 People In Company's Largest Layoff : Unity가 직원의 25% 정도인 1,800명을 감원할 계획이라고 한다.(영어)
Disney's earliest Mickey and Minnie Mouse enter public domain as US copyright expires : 디즈니의 미키 마우스와 미니 마우스가 95년 뒤에는 누구나 사용할 수 있는 퍼블릭 도메인에 진입하는 저작권 법에 따라 1928년 공개된 미키 마우스와 미니 마우스를 누구나 사용할 수 있게 되었다.(영어)
프로젝트
Tart : Apple Silicon 기반 macOS/Linux 가상화를 제공하는 서비스로 GitHub Actions, GitLab Runner, Buildkite 등의 러너로 사용할 수 있다.
OpenPubKey : OpenID 프로바이더에서 식별자를 공개키에 바인딩하는 프로토콜의 구현체
Minimalist CV : 간단한 정적 파일을 통해 이력서 페이지를 만들어주는 프로젝트.
버전 업데이트
ReScript v11.0.0 : 프로그래밍 언어(구 BuckleScript/Reason), 릴리스 공지
OpenTofu v1.6.0 : Infrastructure as Code 도구, 릴리스 공지
Nuxt UI v2.12.0 : UI 라이브러리, 릴리스 공지
SQLite v3.45.0 : SQL 데이터베이스 엔진, 릴리즈 공지
새로운 JSONB 파스 트리 형식 도입
Zed v0.118.1 : 코드 에디터, 릴리스 공지
Kargo v0.3.0 : Kubernetes용 배포 도구, 릴리스 공지
Hono v3.12.0 : 엣지용 웹 프레임워크, 릴리스 공지
Node.js v20.11.0 (LTS) : 자바스크립트 런타임, 릴리스 공지
Node.js v21.6.0 (Current) : 자바스크립트 런타임, 릴리스 공지
CDK for Terraform v0.20.0 : Terraform Cloud Development Kit, 릴리스 공지
댓글 쓰기