Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

기술 뉴스 #250 : 24-07-16

웹개발 관련

  • Enhancing The New York Times Web Performance with React 18 : The New York Times는 뉴스 사이트 특성상 페이지 성능과 SEO, 최신 기술에 높은 가치를 두고 있는데 React 18의 새 기능이 INP 점수를 크게 개선할 것이라고 기대하고, 이는 SEO 점수에 영향을 주기 때문에 마이그레이션을 시작했다. 먼저 React 18과 호환되지 않은 Enzyme을 React Testing Library로 교체한 뒤 주요 의존성을 업데이트하고 createRoothydrateRoot 같은 최신 API를 업데이트했다. 이 과정에서 React 18이 이전보다 하이드레이션 불일치에 더 민감해서 일부 콘텐츠가 렌더링 되지 않는 문제를 발견해서 이를 수정하고 릴리즈하자 p75에서 INP가 30% 개선되었고 리렌더링도 절반으로 줄어들었다.(영어)
  • How to use container queries now : 컨테이너 쿼리가 모든 브라우저에서 지원되지만, 구형 브라우저 지원 때문에 적용 못 한다고 생각하는 사람들이 바로 적용할 수 있도록 하는 적용 가이드이다. @media 규칙을 모두 @container로 교체한 후 container-type: inline-size;를 지정해서 컨테이너가 규칙의 기준이 되도록 한다. 컨테이너 쿼리를 지원하지 않는 브라우저를 위해 크기 변경을 인지해서 스타일을 지정할 수 있는 <responsive-container> 커스텀 태그를 만들어서 폴백을 구현하고 이를 위한 추가 스타일을 작성한다. (영어)
  • @property: Next-gen CSS variables now with universal browser support : @property를 이제 주요 브라우저에서 모두 사용할 수 있게 되었다. @property를 사용해서 커스텀 프로퍼티를 만들 수 있고 그라데이션 애니메이션 같은 새로운 가능성도 열리게 된다. 커스텀 프로퍼티에서는 초깃값을 이용해서 폴백을 구현할 수 있다. @property를 이용해서 그라데이션 카드를 구현하는 예제도 함께 제공한다.(영어)
  • AI on Chrome : Google에서 LLM을 포함한 AI 모델을 브라우저에 직접 통합해서 사용할 수 있게 하는 기능을 개발 중이고 Gemini Nano를 포함해서 프리뷰로 테스트 중이다.(한국어)
  • Supabase에서 Kakao Login JS SDK를 사용하는 방법 : supabase에 Kakao OIDC 지원을 직접 추가하신 분이 이를 사용해서 카카오 로그인을 연동하는 예시를 설명한 글이다.(한국어)

그 밖의 개발 관련

  • 웹서버, 끈질긴 최적화 기록(PHP-FPM, MySQL) : PHP, Apache, MySQL로 된 서버가 자주 다운되어서 문제를 추적해 간 과정을 정리한 글이다. 실험 환경을 만들고 가설을 세운 뒤 결과를 비교하면서 원인을 찾아가는 과정이 좋다.(한국어)
  • From Idea to Standard: How the JWT Profile for OAuth 2.0 Access Tokens Became RFC9068 : OAuth 2 Core는 Access Token의 모양을 정의하지 않아서 다양한 변형이 많이 발생했기에, 이 문제를 해결하려고 OAuth 2.0 AT(Access Token)을 JWT로 인코딩하고 검증하는 새로운 표준인 RFC9068를 2021년 만들게 되었다. OAuth 2에서는 인가 서버와 리소스 서버가 분리되어 있는데 같은 조직 내에서 인가 서버에 접속할 수 있다면 AT를 쉽게 검증할 수 있지만 인가 서버와 상태를 공유할 수 없다면 AT를 검증할 다른 방법이 필요하고 이때 JWT를 쓰면 편하게 사용할 수 있다. 하지만 JWT내의 데이터는 비슷했지만, 클레임의 형태가 달랐기에 이를 프로필로 통일시킬 수 있다고 생각해서 조사한 뒤 IETF에 제안을 올리게 되었다. 이후 IETF의 표준화 프로세스를 거쳐서 표준화가 되었다.(영어)
  • 기기와 앱의 무결성 보장부터 서비스 요청 보호까지: LINE의 기기 증명 서비스 - 1편 : Line에서 보안을 강화하기 위해 기기와 앱이 위변조되지 않았는지 서비스 요청이 변조되지 않았음을 증명하기 위해 기기 증명 서비스를 도입했다. 이는 Anroid에서는 Key Attestation, iOS에서는 App Attest 기능으로 구현했고 WebAuthn를 사용했다. 기기 증명 클라이언트와 기기 증면 서버가 통신하고 클라이언트는 Trusted Execution Envionment를 이용해서 PKI 방식으로 동작하도록 구현했고 이때 어설션을 통해서 중요한 통신을 안전하게 할 수 있다.(한국어)
  • Ruby on Rails 소식지 : Ruby on Rails 관련 소식을 한국어로 받을 볼 수 있는 뉴스레터가 생겼다.(한국어)
  • Zed: Linux when? Linux now. : Zed 에디터가 공식적으로 Linux용 빌드를 공개했다.(영어)

인프라 관련

  • eBPF/XDP: 당신만 모르는 안전하고 빠른 Networking : 커널 스페이스에서 실행되는 eBPF와 eBPF 기반으로 패킷을 처리할 수 있는 XDP를 설명하는 글이다. eBPF로 작성해서 이를 커널로 로드하는 예시를 보여주고 2018년에 나온 XDP의 설계를 보여주는The eXpress Data Path: Fast Programmable Packet Processing in the Operating System Kernel 논문을 요약했다.(한국어)
  • Cloudflare 1.1.1.1 incident on June 27, 2024 : Cloudflare가 운영하는 DNS 서비스인 1.1.1.1에서 지난 6월 27일 연결이 안 되거나 성능이 저해되는 장애가 발생했다. 이 장애는 BGP(Border Gateway Protocol) 하이재킹과 라우팅 유출로 인한 장애였으면 Cloudflare가 RPKI를 사용해 1.1.1.0/24를 서명한 리소스로 사용하고 있었음에도 1.1.1.1/32를 블랙홀 경로로 여러 네트워크에서 수락했고 AS262504(Nova)가 라우팅을 유출하면서 영향이 확대되었다.(영어)
  • Using S3 as a container registry : ECR 대신 S3를 컨테이너 레지스트리로 사용하는 실험이다. HTTP로 S3를 노출하고 그대로 사용할 수 있는데 OCI 표준에 따라 레이어 푸시가 순차적으로 이뤄지기 때문에 ECR보다 S3가 최대 8배까지 빠른 속도를 보여주었다고 한다.(영어)
  • Getting started with Grafana: best practices to design your first dashboard : Grafana 대시보드를 만들 때 가장 중요한 것은 특정 목적이나 사용 사례를 염두에 두고 설계해야 한다는 것이다. 시각적 계층 구조를 이용해서 중요도 순으로 정렬하고 크기를 다르게 배치하고 중요한 패널은 색상을 사용해서 사용자의 시선을 유도할 수 있고 목적에 맞는 올바른 메트릭을 사용해야 하는데 RED나 USE 방법론이 도움이 될 수 있다.(영어)

볼만한 링크

  • 테드 창 “예술은 무수한 선택의 결과…AI, 인간 예술 대체 못 해” : SF 작가인 테드 창이 한겨레 사람과디지털포럼에서 강연한 내용 전문이다. 기존과 같이 AI에 긍정적이지 않은데 AI는 지능이 있다기보다 응용 통계라고 부르는 것이 정확하다고 얘기하고 있다. 또한 언어는 의사소통 체계를 의미하는데 LLM에서는 의도가 없기 때문에 의사소통이 일어나지 않고 있다. LLM이 만든 텍스트는 광고성인 경우가 많아서 인터넷이 앞으로 정보의 출처로서 영구적으로 퇴보할 가능성이 높다. 에세이 쓰기는 두뇌를 위한 근력운동이기 때문에 LLM으로는 인지능력을 향상할 수 없고 예술은 표현의 한 형태이기 때문에 욕구가 없는 ChatGPT는 예술을 할 수 없다고 얘기하고 있다.(한국어)
  • AI는 전기를 먹고 자란다 : AI의 인기로 하이퍼스케일 데이터센터가 생겨나고 있고 기존에 기업에서 쓰던 전력을 100% 재생에너지로 충당하겠다는 RE100 선언에 동참했던 빅테크 기업들도 데이터센터에 들어갈 엄청난 양의 전기를 확보할 방법 때문에 고민하고 있다. 빅테크 업체들도 이러한 전기를 확보하기 위해서 다양한 노력을 하고 있지만 여러 국가에서 데이터센터 설립을 제한하는 법을 만들고 있다. 국내에서도 재생에너지를 구하기가 어려운 게 현실이고 정부의 발표에서도 2030년에는 2023년보다 전력 수요량이 2배 증가할 것이라고 내다봤다. 한국은 데이터센터가 수도권에 집중되어 있는데 수도권의 전력 자급률을 0.67에 불과하기 때문에 국내에서는 발전보다 송전이 더 중요한 문제가 되었고 이 때문에 데이터센터를 전기가 생산되는 지방으로 이전하려고 노력하고 있지만 지방에서의 인력 문제와 전력 가격 정책 등의 문제로 쉽지 않은 상황이다.(한국어)
  • What Happened to ThoughtWorks? : 한때 애자일로도 유명했던 소프트웨어 컨설팅 회사인 ThoughtWorks에 마틴 파울러를 포함해서 테스트나 CI/CD 관련해서 유명한 사람이 많이 있었지만, 최근 3년 동안 주가가 90%가 빠진 것을 발견하고 최근 ThoughtWorks의 행보를 정리한 글이다. ThoughtWorks의 컨설팅했던 내용과 다른 행보를 걷고 있는데 지난 17년 동안 ThoughtWorks가 테스트 자동화나 CI/CD 관련한 제품을 출시했지만, Mingle, Twist, Gauge, Cruise CD, GoCD 등 대부분의 제품이 실패했고 초기에 Ruby on Rails를 컨설팅했지만, 적극적으로 하지 않고 Groovy로 넘어갔지만, 오히려 실수였다고 하고 있다. 마지막으로 지금 업계에도 ThoughtWorks같은 컨설팅 회사가 필요하기 때문에 ThoughtWorks가 과거의 영광을 되찾기를 응원하고 있다.(영어)
  • vinyl.coroke.net 바이닐고로케 개발기 : LP 바이닐 음반을 검색할 수 있는 서비스를 만들어야겠다는 아이디어에서 시작해서 10일 정도 만에 데이터를 크롤링해서 서비스까지 오픈한 과정이다. django와 SvelteKit, MySQL을 사용해서 구축했고 서비스를 구축하면서 고민했던 내용이 잘 담겨있다.(한국어)

IT 업계 뉴스

프로젝트

  • ray.so : Raycast 팀에서 코드 이미지를 생성하거나 Icon 생성기, Raycast용 탐색기 등의 기능을 가진 ray.so를 오픈소스로 공개했다.
  • CronTool : 크론 주기를 입력하면 달력에서 실행되는 시기를 알려준다.
  • PythonMonkey : Mozilla의 SpiderMonkey 자바스크립트 엔진을 Python 런타임에 임베드한 프로젝트.

버전 업데이트

2024/07/16 03:21 2024/07/16 03:21