어떻게 테스트해야 하는가?

[Guillermo Rauch](https://twitter.com/rauchg) [tweeted](https://twitter.com/rauchg/status/807626710350839808) this a while back. Let's take a dive into what it means.

(첫 글의 한국어 번역)

심윤섭: 코드와 함께 알아보는 프론트엔드 단위테스트 글을 보고 떠오른 글들입니다. 원칙보다는, 어떤 테스트를 작성해야 하는지를 생각하는게 중요하다고 생각해서, 테스팅 트로피를 만든 Kent D dodds의 생각이 드러나는 글을 가져왔습니다. 간단하게 말하면 테스트를 작성할 때 구현을 바꾸지 않는 것을 목표로 하지 말고 나의 동작의 수동 테스트를 대체하기 위해 작성하라는 주장이며, 이를 여러가지 코드와 함께 가져와서 설명하고 있습니다.

throttle에서 useDeferredValue로

Snappy UI Optimization with useDeferredValue

useDeferredValue is one of the most underrated React hooks. It allows us to dramatically improve the performance of our applications in certain contexts. I recently used it to solve a gnarly performance problem on this blog, and in this tutorial, I'll show you how! ⚡

심윤섭: React에서 마지막 Input 값을 알아내기 위해서 Throttle과 Debounce의 개념을 알고 있어야 했습니다. 하지만 이 둘은 React 렌더링과 별개로 로직이 돌아가서 React 렌더링이 빨리 끝나도 delay만큼 기다려야 했습니다. 이제는 18버전에 들어온 useDeferredValue로 React에서 Throttle을 처리하도록 할 수 있습니다.

김대관: 기존 Throttle이나 Debounce와 달리, React의 렌더링 사이클과 자연스럽게 통합되어 값 업데이트의 우선순위를 낮춰서 성능 최적화(혹은 FPS 드롭 방지)가 가능해졌습니다.

NextJS와 SSRF 취약점

Digging for SSRF in NextJS apps

At Assetnote, we encounter sites running NextJS extremely often; in this blog post we will detail some common misconfigurations we find in NextJS websites, along with a vulnerability we found in the framework.

심윤섭: NextJS에서 SSRF 취약점이 있었고 14.1.1 버전에서 패치되었다는 내용입니다. 프론트엔드를 위해 서버를 관리할 수도 있기 때문에 클라이언트 측 위조는 항상 검증해야 할 것 같습니다. 보안 프로젝트인 OWASP에서 SSRF 치트시트를 제공하고 있으니 한번 보시길 추천드립니다.

텍스트 확대과 웹 접근성

Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium

Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. Improving web accessibility is a critical priority at Airbnb, and we use the Web…

심윤섭: 노안을 온 사람들을 위해 브라우저의 확대 비율을 높이는 사람은 많습니다. 하지만 일반적인 웹 사이트를 만들 때 고려하는 사람은 많지 않죠. 그래서 지원하는 것을 회사범위로 확대하기 위해 어떻게 툴을 사용했는지 안내합니다. 웹 접근성을 위해 rem을 사용하라는 사람은 많지만 현실적인 대안을 내놓지 않는 글이 대부분인데 구체적인 방법과 함께 소개해서 일부는 회사에 맞게 바꿔서 적용할 수 있다고 생각합니다.

`contrast-color()`에 대한 생각들

On compliance vs readability: Generating text colors with CSS • Lea Verou

contrast-color() is a good thing, but also solving the problem at the wrong layer – Eric Bailey

Browsers are a failure of imagination

심윤섭: 첫 글은 contrast-color()을 소개하고, 아직 지원하지 않는 브라우저를 위해 Relative Color Syntax를 사용해서 구현하는 방법을 설명합니다. 두번째 글은 contrast-color()이 웹 개발자가 접근하기 쉬운 방법이지만 보편적인 웹 접근성을 위해 브라우저에서 지원해야 한다고 주장합니다. 개발자들에게 신 기술이 도달하려면 시간이 걸리기 때문에(지금 컨테이너 쿼리를 사용하고 있나요?), 이런 기술을 어떻게 어떤 방식으로 접근해야 할지 많은 고민이 됩니다.

인라인 스타일을 활용한 CSS Hooks

Robin Weser | Inline Styles on Steroids

A short reflection on my journey with fela and an introduction to css-hooks and brandeur adding support for native CSS features to inline styles

심윤섭: 인라인 스타일을 활용한 CSS-in-JS 라이브러리인 CSS hooks를 소개하는 글입니다. CSS Hooks는 CSS 트리와 DOM 트리가 다른 위치에 있는 것은 문제가 된다와 비슷한 접근 방식을 가지고 있습니다. 또한 CSS Inlining의 성능 향상에서 소개했다시피 성능에 이점이 있습니다. 하지만 네이티브 CSS 기능들을 쓰려면 아직이라는 점이 아쉽네요.

SSR에서 Styled Components는 진짜 느리다.

Quantifying the Impact of Styled Components on Server Response Times

Working off of a suspicion, I spent some time at work trying to properly attribute the amount of time spent during SSR to Styled Components

저자가 styled-components가 SSR 요청 중에서 매우 큰 영역을 차지한다고 가정하고 실제 분석을 통해 증명해낸 글입니다. Node.js를 분석하는 방식과 라이브러리 클론을 통해 증명하는 부분은 다른 라이브러리에도 적용할 수 있으니 접근법을 알아 둘 필요는 있다고 생각합니다.

UI 밀도에 대한 생각

UI Density || Matthew Ström, designer-leader

I speak and write about design, front-end code, leadership, and (occasionally) math.

저자가 말했듯이, 디자인이 좋고 나쁜지는 매우 주관적입니다. 하지만 디자인은 일관적이여야 합니다. 이를 위해 저자는 여러가지 지표를 정의하고 어떻게 논의해야 할지 생각할 거리를 제공합니다(가장 쉽게 접근할 수 있는 시간 밀도에 대해서도 언급합니다).

웹 접근성 테스트 도구

Navigating the Variety of Web Accessibility Evaluation Tools - The A11Y Collective

Explore an in-depth guide on web accessibility evaluation tools, their features, and effective usage.

생소한 웹 접근성 테스트 도구들을 소개해줍니다. 수동으로 테스트하는 것도 중요하지만 항상 수동 테스트로 시간을 쏟을 수는 없으니까요.

SolidStart 1.0, Angluar 18 출시

SolidStart 1.0: The Shape of Frameworks to Come | SolidJS

A declarative, efficient and flexible JavaScript library for building user interfaces.

Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | May, 2024 | Angular Blog

Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing…

Zone.js(Angular에서 사용하는 변경 탐지 매커니즘, 자세한 건 Zone.js in Angular / (번역)를 참조하세요!)을 사용하지 않는 모드를 넣은 Angular 18 버전(이외에도 많은 패치가 있습니다)과 Vinxi(Vite, Nitro 기반으로 만들어진 meta framework 유틸리티)를 기반으로 만들어진 SolidStart가 출시되었습니다.

JSX 안에서 조건을 관리하지 말고, 최상단에서 관리하세요.

Prefer Multiple Compositions | Kyle Shevlin

The flexibility of JavaScript and React means there are lots of ways to achieve the same result. Let's consider why we might choose one way over another when it comes to React. Specifically, when to choose a more verbose solution with composition over the DRYest code possible.

저자가 조건부에 대해 새로운 관점을 제시해서 가져왔습니다. 만약 한 값이 enum형식을 띈다면 좋은 접근 방식일 수 있다고 생각합니다.

어떻게 테스트해야 하는가?