경력소프트웨어 엔지니어링의 향후 2년
Addy Osmani는 향후 2년을 주니어 채용, 기술 퇴화, 역할 변화, 스페셜리스트 대 제너럴리스트, 교육이라는 다섯 가지 미해결 질문으로 구성하며, 확정적 예측이 아닌 두 가지 대조 시나리오로 제시합니다. 6,200만 명 근로자를 대상으로 한 Harvard 연구에 따르면 생성형 AI 도입 후 6분기 이내에 주니어 개발자 고용이 9~10% 감소한 반면 시니어 고용은 거의 변하지 않았으며, 대형 기술 기업의 신규 졸업자 채용도 지난 3년간 50% 감소했습니다. 기술 관련 질문도 첨예합니다. 현재 개발자의 84%가 AI 보조를 정기적으로 사용하고 있으며, 진입 수준의 업무는 알고리즘 구현에서 AI 출력 검증으로 이동하고 있습니다. Osmani는 AI가 스페셜리스트보다 제너럴리스트를 더 효과적으로 증폭시키는 만큼 T자형 엔지니어가 가장 지속 가능한 유형이라고 주장하며, 이미 45%에 달하는 엔지니어링 역할이 멀티 도메인 역량을 요구하고 있음을 지적합니다. 인간의 경쟁 우위는 아키텍처, 보안, 시스템 설계, 멘토링, AI 출력의 오류를 판별하는 판단력에 집중됩니다.
Read Articlearrow_forward Article · 브라우저READ TIME: 15m
모든 브라우저 API가 'Web' API인 것은 아니다
Polypane 블로그는 웹 플랫폼의 잘못 이해된 균열을 지적합니다. 표준화된 것처럼 보이는 많은 브라우저 API가 실제로는 벤더 운영 독점 백엔드 서비스를 감싸는 얇은 래퍼에 불과합니다. Geolocation API는 Chrome 및 Chromium 기반 브라우저에서 Google Location Services를 경유하며(Firefox는 2024년 Mozilla Location Service 종료 후 Google 서비스로 전환), 사용자 위치 데이터가 브라우저 고지 없이 제3자 서버로 전송됩니다. Speech Recognition은 브라우저에 따라 Google, Apple, 또는 Azure Cognitive Services로 오디오를 스트리밍합니다. Chrome 139에서 온디바이스 처리를 위한 옵트인 processLocally 플래그가 도입되었지만 Chrome에서만 사용 가능합니다. WebAuthn passkey는 Google Password Manager, iCloud Keychain, Microsoft Account를 통해 동기화되어 완전히 벤더 통제 하에 있습니다. Web Push는 FCM(Chrome/Edge), APNs(Safari), Mozilla 인프라를 각각 경유하며 속도 제한 및 메시지 크기 제한(FCM: 4 KB, APNs: 5 KB)이 다릅니다. 이 글은 해당 API들을 벤더 서비스 통합으로 취급하고, 테스트한 브라우저를 문서화하며, 우아한 기능 저하를 설계하고, 사용자에게 개인정보 보호 영향을 고지할 것을 권고합니다.
READ_FULL_LOGarrow_forwardArticle · 도구READ TIME: 5m
Vitest 설정에서 Projects를 사용해야 하는 이유
Vitest의 defineConfig 내 projects 배열을 사용하면 단일 설정 파일 안에 여러 명명된 테스트 러너를 선언할 수 있습니다. 각 프로젝트는 extends: true를 통해 루트 레벨의 공유 설정을 상속하면서 필요한 부분만 재정의합니다. 이를 통해 별도의 vitest.unit.config.ts와 vitest.integration.config.ts 파일을 관리하는 번거로움이 사라집니다. 일반적인 설정은 파일 접미사(*.unit.test.{ts,tsx} 대 *.integration.test.{ts,tsx})로 테스트를 분리하고, vitest --project unit과 vitest --project integration 같은 npm 스크립트를 노출합니다. --project proj1 --project proj2로 두 프로젝트를 동시에 실행하는 것도 가능하며, 이는 별도 설정 파일로는 불가능한 기능입니다. Vitest Browser Mode도 동일한 구조에 자연스럽게 통합됩니다. 브라우저 프로젝트에 browser.enabled, playwright() 프로바이더, 전용 setupFiles를 추가하면 됩니다. 주의 사항으로, coverage와 reporters는 반드시 루트 설정에 두어야 하며, 프로젝트별 재정의가 필요한 경우 별도 파일로 돌아가야 합니다.
READ_FULL_LOGarrow_forwardArticle · 성능READ TIME: 5m
React에서 수천 개의 어노테이션을 처리하며 렌더링 성능을 최적화한 방법 — 2부
Nutrient의 Igor Perzic는 Web Viewer SDK에 적용한 세 가지 정밀 React 최적화를 소개합니다. Part 1의 광범위한 개선(메모이제이션, web worker, 작업 지연) 이후에도 수천 개의 문서 주석을 동시 렌더링할 때 여전히 성능 저하가 남아 있었습니다. 팀은 React Scan으로 리렌더링 히트맵을 얻은 뒤, 이전 props와 현재 props를 비교해 정확한 트리거를 식별하는 커스텀 훅을 작성했습니다. 이를 통해 렌더마다 새로 생성되는 콜백 참조, 인라인 스타일 객체, JSX 자식이 주요 원인임을 밝혀냈습니다. Redux에서는 .filter()나 .map()으로 새 배열을 반환하는 useSelector 셀렉터가 매 스토어 업데이트마다 리렌더를 유발했는데, 관련 상태 슬라이스에 범위를 좁힌 useMemo 안에서 파생 값을 계산하거나 객체를 반환하는 셀렉터에 shallowEqual을 전달하는 방식으로 해결했습니다. SDK는 전역 상태에 Immutable.js를 사용하고 있어 속성 변경마다 새 객체 참조가 생성되는데, useMemo/useCallback 의존성을 annotation.id와 annotation.type 같은 특정 기본값 필드로 좁혀 불필요한 재계산을 방지했습니다. 이 변경 이후 주석 하나에 호버해도 전체 주석이 리렌더되지 않았고, CPU 사용량이 대폭 감소했습니다.
READ_FULL_LOGarrow_forwardArticle · 성능READ TIME: 6m
성능 예산 문제로서의 광고
Sarah Gerrard는 광고 통합을 뒤늦은 고려 사항이 아닌 명시적 성능 예산 제약으로 재정의합니다. 그녀는 9월에 TanStack 생태계에 합류해 수년간 누적된 기술 부채 — 사용되지 않는 JS 경로, 죽은 CSS, 단일 커밋으로 추적할 수 없는 복합적인 성능 저하 — 를 해결하는 작업을 기반으로 이 논점을 전개합니다. 브라우저 관점에서 서드파티 광고 스크립트는 퍼스트파티 UI 코드와 동일한 메인 스레드, 레이아웃 및 스타일 재계산 사이클, 네트워크 대역폭, 메모리 예산을 두고 경쟁합니다. "그냥 async로 로드하면 된다"는 접근은 비용을 지연시킬 뿐 제거하지 않으며, async 스크립트 역시 파싱, 실행, 레이아웃 재계산을 일으키고 스케줄링 시간을 다툽니다. 광고의 숨겨진 성능 비용은 첫 인터랙션을 지연시키는 long task, 늦은 DOM 삽입으로 인한 레이아웃 이동, LCP·CLS·INP에 영향을 주는 연쇄 지연으로 나타납니다. Gerrard는 수익화에 사전에 정의된 예산을 배분하고, 미사용 JavaScript 제거, 죽은 CSS 정리, 린팅 강화, 컴포넌트 경계 단순화로 그 비용을 상쇄할 것을 권고합니다. TanStack과 같은 문서·콘텐츠 사이트는 독자가 텍스트 이동을 즉시 인식하고 CLS 저하가 검색 노출에 직접 영향을 주기 때문에 불안정성에 대한 허용 범위가 더 낮습니다.
READ_FULL_LOGarrow_forwardArticle · 도구READ TIME: 6m
웹 앱 E2E 테스트를 위한 더 나은 방법
Swizec Teller는 수작업으로 Playwright 셀렉터를 작성하는 방식을 기록-재생 에이전트 루프로 대체하는 오픈소스 TypeScript 라이브러리 e2e-testing-agent를 소개합니다. 첫 실행 시 에이전트는 스크린샷을 찍고, OpenAI의 computer-use 모델로 전송한 뒤, 반환된 브라우저 액션을 Playwright를 통해 실행하고 기록된 단계를 저장합니다. Swizec에 따르면 전체 구매 흐름 테스트에 약 7달러가 들었습니다. 이후 실행은 저장된 단계를 토큰 소모 없이 재생하며 약 80% 빠르게 동작해 UI 변경 시에도 테스트를 다시 작성할 필요 없이 회귀를 감지할 수 있습니다. 개념 모델은 Ruby VCR에서 차용했으며, 전체 프론트엔드를 서드파티 API처럼 기록합니다. 테스트는 URL과 "Sign up for the mailing list" 같은 자연어 의도 문자열로 구성된 두 인수만으로 작성하며, 런타임에 환경 변수 자격 증명, faker 생성 입력값, 데이터베이스 픽스처를 가져오는 커스텀 도구 호출도 지원합니다. 각 실행 마지막에는 빠르고 저렴한 모델(gpt-5-nano)이 최종 스크린샷으로 목표 달성 여부를 시각적으로 확인합니다. 저자는 computer-use 모델이 아직 무인 프로덕션 사용에 충분히 신뢰할 수 없으며, 첫 에이전트 기록 시 감시가 필요할 수 있다고 인정합니다.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
2주차 웹 개발 일반 주제는 AI의 압력 아래에서의 직업적 생존과 실전 기술입니다. 주목할 에세이는 Addy Osmani의 향후 2년 소프트웨어 엔지니어링 시나리오 지도입니다. 확정적 예측이 아닌 다섯 가지 미해결 질문 — 주니어 채용·기술 퇴화·역할 변화·스페셜리스트 대 제너럴리스트·교육 — 에 걸친 대조적 시나리오로 구성되었습니다. Osmani가 인용하는 6,200만 명 근로자 대상 Harvard 연구 — 생성형 AI 도입 후 6분기 이내에 주니어 개발자 고용이 9–10% 감소, 시니어는 거의 변화 없음 — 는 커리어 불안에 데이터 틀을 제공합니다. 그의 결론: 한두 도메인에서 깊고 스택 전반에서 폭넓은 T자형 엔지니어가 가장 지속 가능한 유형입니다. AI는 스페셜리스트보다 제너럴리스트를 더 많이 증폭시키며, 이미 45% 가까운 엔지니어링 역할이 멀티 도메인 역량을 요구합니다. 인간에게 남은 일관된 경쟁 우위는 아키텍처·보안·시스템 설계·멘토링, 그리고 AI 출력의 오류를 잡아내는 판단력입니다.
Polypane의 브라우저 API 조사는 내면화할 가치 있는 구조적 놀라움을 드러냅니다: 표준화된 것처럼 보이는 많은 API가 실제로는 벤더 운영 백엔드 서비스의 얇은 래퍼입니다. Geolocation API는 Chrome과 Chromium에서 Google Location Services를 경유하고(Firefox는 2024년 전환), Speech Recognition은 브라우저에 따라 Google·Apple·Azure Cognitive Services로 오디오를 스트리밍합니다. WebAuthn passkey는 완전히 벤더 제어 인프라를 통해 동기화되어 Electron에서는 구현할 수 없습니다. Web Push는 FCM·APNs·Mozilla 인프라를 각각 경유하며 메시지 크기 제한도 다릅니다(FCM: 4 KB; APNs: 5 KB). 실용적인 처방은 이 API들을 벤더 서비스 통합으로 취급하고, 테스트한 브라우저를 문서화하며, 프라이버시 영향을 공개하고, 벤더 종속을 의식적으로 계획하는 것입니다.
이번 주 테스트 섹션은 풍성합니다. defineConfig의 Vitest projects 배열은 단일 설정 파일에서 extends: true로 공유 설정을 상속하는 여러 명명된 테스트 러너를 선언하고 --project 플래그로 동시 실행할 수 있게 합니다. Swizec Teller의 e2e-testing-agent는 수작업 Playwright 셀렉터를 OpenAI computer-use 모델 기반의 기록-재생 에이전트 루프로 대체하며, 첫 실행 시 전체 구매 흐름 테스트에 약 7달러가 들고 이후 실행은 80% 빠릅니다. Nutrient의 수천 개 동시 주석에 대한 React 렌더링 최적화 심층 분석 — React Scan 히트맵·커스텀 diff 훅·특정 상태 슬라이스에 범위를 좁힌 useMemo·객체 반환 셀렉터의 shallowEqual — 은 광범위한 메모이제이션 전략이 남기는 성능 문제 유형을 위한 정밀 도구 모음을 제공합니다. 그리고 Sarah Gerrard의 광고 통합을 명시적 성능 예산 제약으로 재정의하는 글이 주를 마무리합니다.
Key Takeaways- T자형 깊이를 의도적으로 구축하세요: 제너럴리스트 프롬프트 엔지니어가 놓칠 AI 실수를 잡아낼 수 있는 도메인을 최소 하나 이상 깊게 파세요. 아키텍처·보안·시스템 설계는 AI 대체에 가장 잘 격리된 역할입니다.
- Geolocation·Speech Recognition·Web Push·WebAuthn 사용을 지금 감사하세요. 각 API가 경유하는 벤더 백엔드를 문서화하고, 사용자에게 프라이버시 영향을 공개하며, 기능이 저하되는 브라우저 환경을 위한 폴백을 계획하세요.
- 서드파티 광고 스크립트를 추가할 때는 사전에 수익화에 정의된 성능 예산 조각을 할당하고, 동일한 무게의 미사용 JavaScript와 죽은 CSS를 제거하여 상쇄하세요. async로 광고를 로드하면 메인 스레드 비용을 지연시킬 뿐 제거하지는 않습니다.
