shiwoo.dev logoshiwoo.dev

뉴스레터about me
  • GitHub
  • LinkedIn
  • Email
© 2026 Shi Woo, Park (custardcream98)
All rights reserved.
← 지난 이슈

프론트엔드 뉴스레터

#37

2026년 11월 12일5개 소식

이번 이슈 한눈에

  • GitHub Actions가 워크플로 잠금 파일을 정식 지원해 태그를 쓰면서도 커밋을 고정할 수 있어요
  • bee-js 악성 버전은 정상 배포 워크플로를 거쳐 유효한 provenance까지 달고 배포됐어요
  • Modern Web Guidance 1.0은 코딩 에이전트에 웹 모범 사례와 브라우저 호환성 데이터를 넣고, Firefox와 Edge도 합류했어요
  • CSS 시스템 색상 짝이 일부 브라우저·모드에서 WCAG 대비 기준에 못 미쳐요
  1. 01

    news.hada.io

    GitHub Actions가 액션 버전을 잠금 파일로 고정하는 기능을 정식 출시했다

    워크플로에서 액션을 v7 같은 태그로 지정하면, 그 태그가 나중에 다른 커밋을 가리키도록 바뀔 수 있어요. 공격자가 안전했던 태그를 악성 코드 커밋으로 옮기는 공급망 공격을 막으려고, 지금까지는 워크플로에 전체 커밋 SHA를 직접 적는 방법이 권장됐습니다.

    GitHub가 10월 28일 워크플로 잠금 파일을 정식 출시했어요. 이제 워크플로에는 읽기 쉬운 버전 태그를 두고, 태그마다 실제로 실행할 커밋은 .github/workflows/actions.lock에 따로 기록합니다. gh CLI 확장의 gh actions-lock 명령이 이 파일을 만들고, 수정된 워크플로와 잠금 파일은 함께 커밋해요. Renovate와 Dependabot도 이미 잠금 파일을 지원해서, 의존성을 업데이트할 때 잠금 파일도 같이 갱신합니다.

    • 잠금 파일은 자동 생성 파일이에요. 액션 사용 구문을 바꾸거나 워크플로를 추가하면 gh actions-lock을 다시 실행해야 하고, GitHub는 CI에서 gh actions-lock --verify로 잠금 파일이 워크플로와 맞는지 검사하라고 권합니다.
    원문 읽기 ↗
  2. 02

    socket.dev

    정상 배포 경로로 나간 악성 npm 릴리스, provenance도 유효했다

    11월 9일, npm 패키지 @ethersphere/bee-js 13.3.0이 악성 코드를 담은 채 latest 태그로 배포됐어요. 공격자는 유지보수자와 릴리스 봇의 GitHub 계정을 탈취한 뒤, PR 없이 postinstall 훅을 추가하는 커밋을 올리고 프로젝트의 배포 워크플로를 그대로 실행했습니다. 의존성의 install 스크립트를 실행하는 환경에서 이 버전을 설치하면 외부 서버에서 코드를 받아 설치한 사용자 권한으로 실행했어요. 이 버전은 약 75분 뒤 npm에서 내려갔습니다.

    이 버전에는 유효한 provenance가 붙어 있었어요. provenance는 어느 커밋을 어느 워크플로가 빌드했는지를 증명할 뿐, 그 코드가 리뷰를 거쳤는지는 증명하지 않습니다. 이번 배포 증명도 정상 버전 13.2.0의 것과 똑같아 보였어요.

    • 배포 워크플로는 테스트를 건너뛰었고, 배포 환경에 필수 리뷰어나 태그 제한이 없어 승인 없이 73초 만에 배포가 끝났어요. Socket은 배포할 커밋이 보호된 브랜치에 있는지 확인하고, 배포 환경에 리뷰어와 태그 제한을 걸라고 권합니다.
    • 11월 9일 00:09:50~01:24:58(UTC) 사이에 install 스크립트가 켜진 상태로 13.3.0을 설치한 기기나 CI 작업은 설치가 실패했더라도 침해된 것으로 보고, 거기서 접근할 수 있던 자격 증명을 교체해야 해요. npm 12, pnpm 10 이상, Yarn Berry 4.14.0 이상, Bun, Deno는 리뷰하지 않은 의존성 스크립트를 기본으로 실행하지 않습니다.
    원문 읽기 ↗
  3. 03

    developer.chrome.com

    Chrome 팀, 코딩 에이전트에 웹 모범 사례를 넣는 Modern Web Guidance 1.0 출시

    코딩 에이전트가 만든 코드는 동작은 해도, 내장 HTML·CSS 기능으로 충분한 일을 직접 짠 JavaScript로 처리하거나 접근성·성능·보안 모범 사례를 놓치는 경우가 많아요. Chrome 팀의 Modern Web Guidance는 이런 웹 플랫폼 지식과 브라우저 호환성 데이터를 에이전트가 참고하는 스킬로 묶은 프로젝트입니다. 추천은 Baseline 호환성 데이터를 바탕으로, 프로젝트가 지원해야 하는 브라우저 범위에 맞춰 골라져요.

    11월 10일 나온 1.0은 정식 버전이에요. 기존 코드의 HTML·CSS·JavaScript와 package.json을 훑어 안전하게 바꿀 수 있는 부분을 찾고, 에이전트가 그 수정을 진행하도록 안내하는 현대화 워크플로가 추가됐습니다. 다만 첫 버전은 정적 분석으로 제한된 패턴만 검사해요. Firefox와 Edge도 Chrome과 함께 프로젝트에 참여하기로 했습니다.

    • 특정 모델이나 에이전트에 묶이지 않고, Claude Code·Codex·Cursor·Copilot 등 여러 에이전트에서 쓸 수 있어요.
    원문 읽기 ↗
  4. 04

    aaron-gustafson.com

    짝으로 쓰는 CSS 시스템 색상도 읽기 어려울 수 있다

    CSS 시스템 색상 키워드는 Canvas와 CanvasText, Highlight와 HighlightText처럼 서로 짝지어 쓰도록 이름이 붙어 있어요. 사용자의 OS 테마나 강제 색상 모드를 따라가서 접근성을 챙길 때 자주 쓰지만, 짝으로 써도 읽기 쉽다는 보장은 없습니다. Aaron Gustafson은 Android Chrome 다크 모드에서 Highlight 배경 위의 HighlightText가 대비 1.98:1에 그쳐, 일반 텍스트·큰 텍스트·비텍스트에 대한 WCAG 대비 기준을 하나도 통과하지 못한다는 걸 발견했어요.

    그래서 브라우저·OS와 라이트·다크·강제 색상·고대비 설정마다 짝을 비교하는 System Color Study를 만들었어요. 그 결과 Chrome, Edge, Firefox, Safari 모두에 기준을 통과하지 못하는 짝이 있었습니다. 그는 키워드 이름만 믿지 말고 스터디에서 짝을 확인한 뒤 실제 UI에서 테스트하라고 권해요.

    원문 읽기 ↗
  5. 05

    blog.gaborkoos.com

    에러가 로그에 {}로 찍히는 이유

    분명 메시지가 있던 에러인데 로그에는 "err":{}만 남는 경우가 있어요. Error의 message, stack, cause는 열거되지 않는(non-enumerable) 속성입니다. JSON.stringify, 전개 구문, Object.assign은 이런 속성을 모두 건너뛰기 때문에, 생성자에서 따로 넣은 code 같은 필드만 남아요.

    Gábor Koós는 에러가 실행 환경 경계를 넘을 때도 정보가 빠진다고 정리했어요. structuredClone은 정해진 내장 에러 이름만 유지하고 사용자 정의 필드를 버립니다. 브라우저 워커에서 DatabaseError 같은 사용자 정의 에러 클래스를 postMessage로 보내면, 받는 쪽에서는 name이 Error로 바뀌고 code 같은 필드가 사라져요. 원문은 에러를 감쌀 때 cause를 넘기고, 로그에 남길 객체는 필요한 필드만 골라 담는 함수를 직접 만들어 쓰라고 권합니다.

    • 로거 기본 설정도 확인해야 해요. Winston의 기본 json 형식은 에러 하나만 넘기면 {"level":"error"}만 출력할 수 있어서 format.errors나 직접 만든 serializer가 필요합니다.
    원문 읽기 ↗

다음 이슈 받아보기

읽어볼 만한 프론트엔드 소식과 글을 골라 보내드립니다.

언제든 구독을 취소할 수 있어요.

← 뉴스레터 #36 · 2026-11-11