심윤섭
심윤섭
개발 ・ 2024.05.29
# 저번 주 프론트엔드 볼 거리 - 어떻게 테스트해야 하는가? https://kentcdodds.com/blog/how-to-know-what-to-test https://kentcdodds.com/blog/write-tests 첫 글의 한국어 번역(https://soojae.tistory.com/83) 원칙보다는, 어떤 테스트를 작성해야 하는지를 생각하는게 중요하다고 생각해서, 테스팅 트로피(https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests)를 만든 Kent D dodds의 생각이 드러나는 글을 가져왔습니다. 간단하게 말하면 테스트를 작성할 때 구현을 바꾸지 않는 것을 목표로 하지 말고 나의 동작의 수동 테스트를 대체하기 위해 작성하라는 주장이며, 이를 여러가지 코드와 함께 가져와서 설명하고 있습니다. - throttle에서 useDeferredValue로 https://www.joshwcomeau.com/react/use-deferred-value/ React에서 마지막 Input 값을 알아내기 위해서 Throttle과 Debounce(https://css-tricks.com/debouncing-throttling-explained-examples/ )의 개념을 알고 있어야 했습니다. 하지만 이 둘은 React 렌더링과 별개로 로직이 돌아가서 React 렌더링이 빨리 끝나도 delay만큼 기다려야 했습니다. 이제는 18버전에 들어온 "useDeferredValue"로 React에서 Throttle을 처리하도록 할 수 있습니다. 기존 Throttle이나 Debounce와 달리, React의 렌더링 사이클과 자연스럽게 통합되어 값 업데이트의 우선순위를 낮춰서 성능 최적화(혹은 FPS 드롭 방지)가 가능해졌습니다. - NextJS와 SSRF 취약점 https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps NextJS에서 SSRF 취약점이 있었고 14.1.1 버전에서 패치되었다는 내용입니다. 프론트엔드를 위해 서버를 관리할 수도 있기 때문에 클라이언트 측 위조는 항상 검증해야 할 것 같습니다. 보안 프로젝트인 OWASP에서 SSRF 치트시트(https://cheatsheetseries.owasp.org/cheatsheets/Server_Side_Request_Forgery_Prevention_Cheat_Sheet.html )를 제공하고 있으니 한번 보시길 추천드립니다. - 텍스트 확대과 웹 접근성 https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 노안을 온 사람들을 위해 브라우저의 확대 비율을 높이는 사람은 많습니다. 하지만 일반적인 웹 사이트를 만들 때 고려하는 사람은 많지 않죠. 그래서 지원하는 것을 회사범위로 확대하기 위해 어떻게 툴을 사용했는지 안내합니다. 웹 접근성을 위해 rem을 사용하라는 사람은 많지만 현실적인 대안을 내놓지 않는 글이 대부분인데 구체적인 방법과 함께 소개해서 일부는 회사에 맞게 바꿔서 적용할 수 있다고 생각합니다. - "contrast-color()"에 대한 생각들 https://lea.verou.me/blog/2024/contrast-color/ https://ericwbailey.website/published/contrast-color-is-a-good-thing-but-also-solving-the-problem-at-the-wrong-layer/ 첫 글은 "contrast-color()"을 소개하고, 아직 지원하지 않는 브라우저를 위해 Relative Color Syntax를 사용해서 구현하는 방법을 설명합니다. 두번째 글은 "contrast-color()"이 웹 개발자가 접근하기 쉬운 방법이지만 보편적인 웹 접근성을 위해 브라우저에서 지원해야 한다고 주장합니다. 개발자들에게 신 기술이 도달하려면 시간이 걸리기 때문에(지금 컨테이너 쿼리를 사용하고 있나요?(https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/ )), 두번째 글은 크게 와닿네요. - 인라인 스타일을 활용한 CSS Hooks https://weser.io/blog/inline-styles-on-steroids 인라인 스타일을 활용한 CSS-in-JS 라이브러리인 CSS hooks를 소개하는 글입니다. CSS Hooks는 [CSS 트리와 DOM 트리가 다른 위치에 있는 것은 문제가 된다](https://danielnagy.me/posts/Post_jt4adn0o5bnr )와 비슷한 접근 방식을 가지고 있습니다. 또한 [CSS Inlining의 성능 향상](https://strikingloo.github.io/inlining-css )에서 소개했다시피 성능에 이점이 있습니다. 하지만 네이티브 CSS 기능들을 쓰려면 아직이라는 점이 아쉽네요. - SSR에서 Styled Components는 진짜 느리다. https://blog.levineandrew.com/quantifying-the-impact-of-styled-components-on-server-response-times 저자가 styled-components가 SSR 요청 중에서 매우 큰 영역을 차지한다고 가정하고 실제 분석을 통해 증명해낸 글입니다. Node.js를 분석하는 방식과 라이브러리 클론을 통해 증명하는 부분은 다른 라이브러리에도 적용할 수 있으니 접근법을 알아 둘 필요는 있다고 생각합니다. - UI 밀도에 대한 생각 https://matthewstrom.com/writing/ui-density/ 저자가 말했듯이, 디자인이 좋고 나쁜지는 매우 주관적입니다. 하지만 디자인은 일관적이여야 합니다. 이를 위해 저자는 여러가지 지표를 정의하고 어떻게 논의해야 할지 생각할 거리를 제공합니다(가장 쉽게 접근할 수 있는 시간 밀도에 대해서도 언급합니다). - 웹 접근성 테스트 도구 https://www.a11y-collective.com/design/accessibility-testing-tools/ 생소한 웹 접근성 테스트 도구들을 소개해줍니다. 수동으로 테스트하는 것도 중요하지만 항상 수동 테스트로 시간을 쏟을 수는 없으니까요. - SolidStart 1.0, Angluar 18 출시 https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe Zone.js(Angular에서 사용하는 변경 탐지 매커니즘, 자세한 건 Zone.js in Angular(https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html ) / (번역)(https://norux.me/64 )를 참조하세요!)을 사용하지 않는 모드를 넣은 Angular 18 버전(이외에도 많은 패치가 있습니다)과 Vinxi(https://vinxi.vercel.app/ )(Vite, Nitro 기반으로 만들어진 meta framework 유틸리티)를 기반으로 만들어진 SolidStart가 출시되었습니다. - JSX 안에서 조건을 관리하지 말고, 최상단에서 관리하세요. https://kyleshevlin.com/prefer-multiple-compositions/ 저자가 조건부에 대해 새로운 관점을 제시해서 가져왔습니다. 만약 한 값이 enum형식을 띈다면 좋은 접근 방식일 수 있다고 생각합니다. 더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/news/list/1 를 참조해주세요. :)
콘텐츠를 더 읽고 싶다면?
원티드에 가입해 주세요.
로그인 후 모든 글을 볼 수 있습니다.
・댓글 1