웹과 다른 기술의 융합
2024. 1. 18.
Sentry에서 모든 광고 쿠키 제거 사례
심윤섭: 최신 웹사이트에서 GA4없이 사용자의 flow를 측정하기는 쉽지 않습니다. 하지만 Sentry는 크롬의 써드 파티 쿠키 차단을 보고 미래 모델(쿠키리스 추적)까지 먼저 적용하는 일을 수행했고, 이를 어떻게 했는지 과정과 결과를 소개합니다. 우리나라는 광고차단기 사용률이 높지 않을것이라고 생각하지만, 미국의 비율로 보면 꽤나 높은 것을 생각하면 해야만 한다고 생각하기도 합니다(우리나라에서 먼저 쿠키리스 추적을 적용하거나 GDPR, CCPA같은 규정을 도입하기엔 멀었구요).
김대관: 회사에서 GA4를 통해 flow를 추적하는 기능을 실제로 도입하고 이를 통해 회사를 성장하는데 매우 중요한 포인트라는 것은 몸으로 알고 있었지만, 해외에서는 이러한 데이터 수집에 대한 쿠키 문제에 대해 새롭게 알게 되었네요.
웹과 다른 기술의 융합
심윤섭: 최신 웹 기술을 현 시점의 웹 중심 서비스들은 어떻게 융합을 했는지 보여주는 글입니다. 최신 웹 기술과 함께 이런 서비스가 있다를 보면 좋을 것 같아 가져왔습니다. 특히 웹 기술과 오프라인 우선 소프트웨어를 합친 서비스를 강조하고 있습니다(Notion이 등장하면서 가속화된 거 같다고 생각합니다).
최원빈: 최신 스펙의 웹은 동적인 HTML 요소들과, CSS의 추가로 점점 JS 프레임워크에 대한 의존을 줄여가게끔 발전하는 것으로 보이는데, 그와중에 HTMX도 점차 새로운 방향성을 제시하고 있죠. 오프라인 우선, 로컬 우선인 프로젝트들을 구분한 것이 인상적인데, 이렇게 구분해보니 동적이지 않은 프로젝트에서는 정말로 프레임워크를 떼는 미래가 오겠다 싶네요.
김대관: 웹앱과 웹사이트의 경계에 대해서 생각치 못했던 부분들에 대해서 각 요소별 구분법이 한눈에 들어왔습니다. 이러한 웹앱과 웹사이트의 경계가 감소하면서 웹은 좀 더 전문적인 기술을 요할 수 있음을 느끼게 되었고 FrontEnd에 대한 앞으로의 발전도 기대가 됩니다.
CSS 최신 도구들
심윤섭: CSS 최적화를 위한 여러 도구들(zero runtime CSS-in-JS, LightningCSS…)과 브라우저에 공통으로 추가되는 CSS들(Interop 2023)은 CSS에 대한 관심을 그대로 반영하고 있습니다. 그것들 중 어떤 것이 (자신이) 주목하고 있는지를 이 글에 보여줍니다. 최근 CSS도 빠른 속도로 기술이 나오는 게 많아서 보시기를 추천드립니다. 추가되는 CSS에 대한 정보는 Interop 2023을 보면 도움이 될 겁니다.
최원빈: 중첩 CSS와 @container 쿼리가 핵심 브라우저에서 전부 지원되게끔 추가되었네요! 2023 Google I/O의 소개영상에서도 흥미롭게 봤었는데, 가능한 빨리 익숙해져볼 예정이예요.
김대관: CSS가 2024년도 주목할 기술인 nesting, :has, subgrid, container query에 대해서는 확실히 알고가시길 추천드립니다!! 상당히 강력한 기술로 평가되고 있어 다른 css 언어에 대한 반영도 기대가 됩니다.
Rust 기반 린트 툴의 기능 부족
심윤섭: Rust기반으로 된 툴이 나왔음에도 불구하고, 작동하지 않는 에지 케이스들이 많이 있으므로 장단점을 살펴봐야 한다는 글입니다. 아쉽게도 린트 툴을 바꿀 때는 아직 멀었다고 볼 수 있겠네요.
React 사용자의 두가지 접근
심윤섭: 서버측 렌더링과 클라이언트측 렌더링이 리액트에서 어떻게 구현되어왔는지를 설명하는 글입니다. 글쓴이가 어떻게 해야 하나요?로 끝냈고, 이 이후의 글도 쓴다는 것을 보니, RSC가 이를 어떻게 해결했는지를 쓰려고 하는 것 같습니다. 물론 RSC가 해결 방법이 될 수도 있겠지만 전 뉴스레터에서 봤듯이 많은 사람들은 아니라고 말하는 것 같습니다.
김대관: 정말 단순한 접근과 예시를 통해 서버측 렌더링과 클라이언트 렌더링의 구현이 용이한지를 설명하는 부분이 인상적이었습니다. 이와 유사하게 리액트만 사용하다가 NextJS가 필요한 순간을 느끼신다면, 특징에 대한 비교를 참고하시면 좋을 것 같습니다.
ContextAPI의 더 나은 대안
심윤섭: Context API는 많은 사람이 쓰고 있음에도 불구하고 재렌더링 성능 이슈가 존재합니다. 관련 대체 라이브러리도 있음이 이를 대변합니다. React의 신 기능은 이를 대체할 수 있다는 식의 글입니다. Context API는 많은 사람들이 알지만, 재렌더링 이슈는 많은 사람들이 알고 있지 않아서 많은 사람들이 알았으면 좋겠습니다.
최원빈: React 공식 문서에 재렌더링 이슈가 해결된 완전한 best practice가 작성되기 전까지는 재렌더링 이슈가 없는 가볍고 안정적인 라이브러리들을 계속 써야겠네요. 라이브러리를 완전히 벗어나 용량을 줄일 수 있게 된다면 베스트겠지만요.
React에서 Web Vitals 측정 방법
심윤섭: 개발 중에 Web Vitals를 볼 수 있는 방법을 소개하고 있습니다. 예시를 React로 들었지만 다른 프레임워크에도 적용할 수 있으니 Web Vital 측정방법 중에 하나로 알고 있으면 도움이 될 것 같습니다.
Vue 3.4 배포
심윤섭: Vue 3가 업데이트를 할 때 신 기능보다 개발자 경험에 투자하고 있다는 점에서 React와 대비되어 가져왔습니다.
현재 PWA는 무엇을 할 수 있는가?
딱히 글은 아니고, PWA에 관심있는 사람이 어떤 기능을 어떤 UX를 통해 사용할 수 있는가를 보여주는 웹사이트입니다.