AI는 브라우저를 없앨 수도 있다.
2025. 4. 9.
AI는 브라우저를 없앨 수도 있다.
Keynote: The Death of the Browser - Rachel-Lee Nabors, AgentQL - YouTube 🔗과거와 현재 웹의 모습, 그리고 AI가 현재의 웹 형태에 어떤 영향을 미칠 수 있는지에 대한 흥미로운 발표입니다. 그리고 발표에 나오지는 않았지만, 발표의 내용은 앞으로 우리가 중요하게 생각해야 할 "기본기"의 정의에 대해 다시 한번 고민하게 만듧니다. 현재는 HTML, CSS, JS를 비롯한 기술과 브라우저 환경에 대한 깊이 있는 이해가 프론트엔드의 핵심 역량으로 여겨지지만, 웹의 근본적인 변화는 이러한 기본 역량의 재정의를 요구할 수도 있겠다는 생각이 듭니다.
React에서 SPA가 뭐길래
React Architecture Tradeoffs: SPA, SSR, or RSC 🔗SPA와 SSR의 개념, 메타 프레임워크의 소개, (주로 Server Components에 관한) 메타 프레임워크의 비교하고 있습니다. 물론 SPA가 정확하게 무엇인가요?에 대한 정의는 약간씩 다를 수 있지만, 글에서 잘 설명하고 있습니다. 더 깊게, 그리고 JS를 아우르는 SPA와 관련된 개념을 소개하는 글은 SPA는 무엇인가? 글을 참고하세요.
크롬의 이미지 요청 순서는 어떻게 결정되는가
How Does Chrome Prioritize Image Requests? | DebugBear 🔗Chrome이 이미지의 우선순위를 어떻게 책정하는지에 대해 소개하는 글입니다. 모든 자원은 어떻게 받아오는지 알고 싶으시다면 브라우저와 로딩 매커니즘이나 web.dev의 요청 우선순위 문서를 참고하세요.
React Context 정말 사용해야 하나요?
You are using React Context WRONG Or why we should not underestimate what we consider simple - The Miners 🔗Context API가 상태 관리 도구가 아닌 이유에서도 말하듯이, Context API는 DI 형태(완전한 Dependency Injection은 아님)를 하는 low level API로서 작동하지만, 상태 관리 도구처럼 사용해서 잘못된 동작이 발생하는 경우를 심심치 않게 볼 수 있습니다. 이 글에서는 Context API + useState()로 상태관리해야 할 때 주의할 부분을 소개합니다. 혹은 Context API 기반 가벼운 상태 관리 도구를 원한다면 use-context-selector 라이브러리를 고려해보세요.
CSS-in-JS is sunsetting.
Is CSS-in-JS still a thing? 🔗styled-components는 관리 모드로 변경되었고, CSS-in-JS의 인기는 utility CSS(tailiwindCSS)가 가져가버렸습니다. 그리고 Runtime CSS-in-JS의 대체로 Compile-time CSS-in-JS가 많이 나왔지만, 인기를 되찾아오지 못하고 있습니다. 이 글이 해결책이나 인기가 떨어진 확실한 이유를 제시하지 않지만, 인기가 떨어진 현상은 지켜봐야겠네요.
흐릿한 대체 이미지 만들기
Minimal CSS-only blurry image placeholders 🔗LQIP(Low Quailty Image Placeholder)를 구현하는 여러 기술을 찾아보고, 순수 CSS로 구현 해보는 과정을 소개하는 글입니다. Lazy image를 구현하는데에 더 좋은 UX를 제공할 수 있겠네요.
헤더를 믿지 마세요.
I guess some request headers are more trustworthy than others. | Alex MacArthur 🔗브라우저에서 JS로 수정할 수 없는 헤더(forbidden request header)를 소개하고, 사용의 장단점을 소개하는 글입니다.
비동기 코드에서 동기 코드를 실행할 수 있다. 그 반대는?
Could JavaScript have synchronous `await`? 🔗동기와 비동기 그 사이 어딘가 글에서는 비동기 코드에서 동기 코드를 호출할 수 있도록 하는 quansync를 소개합니다. 하지만 이 라이브러리에서도 동기 코드에서 비동기 코드를 실행하는 것은 할 수 없습니다. 이 글은 동기 await가 있다면 어떻게 될 것인지, 왜 없을 예정인지 소개하는 글입니다.
CSS override를 모-단하게 하는 법
Cowardly Defaults and Courageous Overrides with Modern CSS – Cloud Four 🔗예전의 CSS override하는 방법과 최근 CSS 문법을 사용해서 override하는 방법을 소개하는 글입니다. :where()과 @layer는 최신 모던 브라우저에서 모두 지원하지만, 레거시 브라우저를 지원해야 하는 경우 조심해서 사용해야 합니다.
Node.js에서 파일을 제공할 때 주의해야 하는 취약점
Node.js API Security Vulnerabilities with Path Traversal in files-bucket-server 🔗파일 시스템을 검증하지 않고 직접 넣었을 경우 다른 로컬 파일에 접근할 수 있는 취약점을 소개하는 글입니다.
적응형 비디오 스트리밍 입문하기
Adaptive Video Streaming With Dash.js In React — Smashing Magazine 🔗비디오를 저사양 기기에서도 (그나마) 원활하게 재생할 수 있도록 하는 적응형 비트레이트 스트리밍(Adaptive BitRate Streaming)을 소개하고, 프론트엔드에 어떻게 연결해야 하는지 소개하는 글입니다.
새로운 친구들
Release 19.1.0 (March 28, 2025) · facebook/react · GitHub 🔗컴포넌트 스택을 확인할 수 있는 captureOwnerStack API가 포함된 19.1버전이 배포되었습니다.
여러가지 애니메이션을 쉽게 구현할 수록 도와주는 anime.js가 4버전이 나왔습니다. Web Animation API 헬퍼, Engine API… 여러가지가 추가되었습니다.
Astro 5.6 | Astro 🔗Cloudflare에서의 활용성을 높인 Astro 5.6버전이 배포되었습니다.