원글: https://www.omarileon.me/blog/typescript-as-const 새로운 구문인 “상수 어설션(const assertions)“은 TypeScript 3.4에서 도입되었습니다. 이것은 변수가 변경되지 않을 것(immutable)이고 가능한 엄격한 타입을 제공해야 한다는 것을 타입스크립트에 알려줍니다. 이는 타입의 종류에 따라 다르게 영향을 미치므로, 이 글에서는 상수 어설션을 어떻게 사용하고 왜 유용한지에 대해 설명할 것입니다. 문자열/숫자 문자열이나 숫자에 “as const”를 추가하면 특정 값으로 타입을 좁힐 수 있습니다. 숫자의 경우 문자열 또는 숫자의 경우 일반적으로 “const”를 사용하여 변수를 정의하면 동일한 효과를 얻을 수 있기 때문에 덜 유용합니다. 런타임 안전성이라는 추가 이점도 있습니다. 때로는 변수로 값을 정의하지 않고, 단순히 문자열 리터럴을 사용하고 싶을 수 있습니다. 예를 들어 값을 반환할 때처럼요. 그때 “as const”…

원글: https://aralroca.com/blog/html-node-streaming 썸네일 최근 몇 년간 브라우저는 HTML과 자바스크립트를 스트리밍을 지원하기 시작했습니다. 이 글에서는 이에 대한 장점과 브라우저가 자동으로 수행하지 않는 다른 작업들을 통해 스트리밍의 이점을 최대한 활용할 수 있는 방법에 대해 이야기할 것입니다. 스트리밍 HTML 초기 로드하는 동안에는 브라우저가 자동으로 처리하기 때문에 크게 신경 쓸 필요가 없습니다. 스트리밍 하는 동안 HTML 청크를 받으면, 브라우저는 그 콘텐츠를 출력합니다. 서버에서 스트리밍을 활성화하려면 헤더를 조정해야 합니다. 아래는 예시입니다. 그리고 응답에서는 ReadableStream을 사용합니다. 이것은 Bun을 사용한 예시입니다. enqueue 안에 있는 각 문자열은 브라우저가 받게 될 청크입니다. 스트리밍 중 HTML 콘텐츠 변경 성능상의 이점이 많기 때문에 많이 사용되는 방법 중 하나는 스트리밍 되는 동안 HTML 콘…

원글: https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 CSS를 사용하여 웹사이트와 앱의 접근성을 향상시키는 데 도움이 되는 팁에 대한 소개입니다. 이 글은 러시아어(역자: Workafrolic), 포르투갈어(역자: Maujor), 그리고 일본어(역자: Keita Nakanishi)로 번역되었습니다. 읽기를 선호하지 않는다면, CSS Conf Budapest에서 이 글의 대부분에 대해 이야기한 녹음본을 들을 수 있습니다. 약 1년 전, 저는 웹 접근성에 좀 더 집중하기 시작했습니다. 저에게 가장 효과적인 학습 방식은 다른 사람들을 가르치는 것입니다. 이것이 바로 제가 밋업과 컨퍼런스에서 발표하고, 이 주제에 대한 글을 쓰는 이유 중 하나입니다. 저는 Smashing Magazine에 점진적인 향상, 그리고 접근성 기초에 대해 Medium에 글을 작성했습니다. 이 글은 접근성 팁 모음 시리…

원문: https://storybook.js.org/blog/storybook-react-server-components/ 스토리북 8.0 알파 업그레이드를 통한 스토리북에서 RSC 사용 리액트 서버 컴포넌트 (RSC)는 리액트 기반 웹 UI의 새로운 프로그래밍 모델입니다. 기존의 전통적인 리액트 “클라이언트” 컴포넌트와 달리, 서버에서만 렌더링됩니다. 이는 다양한 성능 및 보안 이점을 가져오지만, 기존의 리액트 도구 및 라이브러리와는 크게 다릅니다. 가장 크게 영향을 받는 부분 중 하나는 컴포넌트 기반 개발 및 테스트입니다. 스토리북, 테스팅 라이브러리 및 Playwright/Cypress와 같은 컴포넌트 테스팅과 같은 도구들은 사용자의 컴포넌트가 브라우저 (또는 JSDom)에서 렌더링되고 있다고 가정합니다. 그러나 서버 컴포넌트의 경우, 이러한 가정이 성립하지 않습니다. 이로 인해, 서버를 위한 격리된 컴포넌트 개발 및 테스트를 수행하는 것이 무엇을 의미하는가? 라는 의문이 …

원문: https://javascript.plainenglish.io/the-5-most-innovative-proposals-for-javascript-planned-for-2024-22139dd2f546 JavaScript Logo 2024 자바스크립트가 빠른 속도로 발전함에 따라 2024년은 이 프로그래밍 언어에 있어 중요한 해가 될 것입니다. 이 글에서는 개발자들이 자바스크립트 코딩에 접근하는 방식을 재정의하기 위한 최신 제안을 자세히 살펴보겠습니다. 이 글이 유용하길 바랍니다! 시작해 봅시다! 목차 데코레이터 Temporal API 파이프라인 연산자 Error cause 레코드와 튜플 1. 데코레이터 자바스크립트에 데코레이터가 도입된 것은 개발자가 클래스, 메서드, 프로퍼티 및 매개변수의 동작을 조작하고 개선할 수 있는 방법이 크게 발전했음을 의미합니다. 파이썬과 타입스크립트와 같은 다른 프로그래밍 언어에서 유래한 데코레이터는 기능을 추가하거나 수정하는 간결하고 선언적인…

원문: https://preactjs.com/blog/introducing-signals/ 시그널은 앱이 복잡해져도 빠른 속도를 유지하도록 하는 상태 표현 방식입니다. 시그널은 반응형 원칙에 기반을 두고 있으며, 가상 돔에 최적화된 독특한 구현을 통해 개발자에게 훌륭한 경험을 제공합니다. 본질적으로 시그널은 특정 값을 가지고 있는 .value 속성을 가진 객체입니다. 컴포넌트 내에서 시그널의 value 속성에 접근하면, 그 시그널의 값이 변경될 때 해당 컴포넌트가 자동으로 업데이트됩니다. 이는 간단하고 작성하기 쉬울 뿐만 아니라, 앱이 얼마나 많은 컴포넌트를 가지고 있든 상태 업데이트가 빠르게 유지되도록 보장합니다. 시그널은 기본적으로 빠르며, 백그라운드에서 자동으로 업데이트를 최적화해줍니다. REPL에서 실행 시그널은 훅과 달리 컴포넌트 내부 또는 외부에서 사용할 수 있습니다. 또한 시그널은 훅과 클래스 컴포넌트 모두에서 훌륭하게 작동하므로, 기존 지식을 활용하며 자신의 속도에 …

원글: https://itnext.io/decoupling-ui-and-logic-in-react-a-clean-code-approach-with-headless-components-82e46b5820c 프런트엔드 개발 영역에서는 용어와 패러다임이 때로는 이해하기 어려울 수 있으며 ‘헤드리스 UI’ 또는 ‘헤드리스 컴포넌트’도 이 범주에 속할 수 있습니다. 이러한 용어들이 무엇을 의미하는지 궁금해서 고개를 갸웃거리고, 혼자만 그런 것이 아닙니다. 사실, 혼란스러운 이름에도 불구하고 이러한 개념들은 복잡한 사용자 인터페이스 관리를 상당히 단순화할 수 있는 매력적인 전략입니다. 헤드리스 컴포넌트는 난해해 보일 수 있지만, 그 진정한 힘은 유연성, 재사용 가능성, 그리고 코드베이스의 구성과 깔끔함을 향상시킬 수 있는 능력에 있습니다. 이 글에서는 이 패턴이 정확히 무엇인지, 왜 유용한지, 그리고 인터페이스 디자인에 대한 접근 방식을 어떻게 혁신할 수 있는지에 대해 탐구해 볼 것입니다. …

원글: https://github.com/kamranahmedse/design-patterns-for-humans/blob/master/readme.md 역자주: 이 글은 Kamran Ahmed의 글이며, PHP-7 기준으로 작성된 예제 코드를 타입스크립트로 변경하였습니다. logo 🎉 디자인 패턴에 대한 초간단 설명입니다! 🎉 누구든지 혼란스럽게 만들 수 있는 주제입니다. 이 글에서는 최대한 간단한 방식으로 설명함으로써 당신의 기억 속 (그리고 아마도 제 기억)에 각인시키기 위해 노력할 것입니다. 저의 다른 프로젝트도 확인하고 트위터에서 “안녕”이라고 인사해 보세요. 생성 패턴 구조 패턴 행동 패턴 심플 팩토리(Simple Factory) 어댑터(Adapter) 책임 연쇄(Chain of Responsibility) 팩토리 메서드(Factory Method) 브릿지(Bridge) 명령(Command) 추상 팩토리(Abstract Factory) 컴포지트(Composite) 반복자…

원문: https://www.tecforfun.com/frameworks/how-to-manage-server-state-with-react-query/ React Query는 React 애플리케이션에서 데이터 페칭과 캐싱 프로세스를 간소화하는 라이브러리입니다. 이 라이브러리는 API와 기타 데이터 소스로부터 데이터를 페칭하고 업데이트하는 데 필요한 도구와 유틸리티를 제공하며 데이터 페칭의 상태와 캐싱을 자동으로 관리합니다. 이 라이브러리는 React 컴포넌트에서 데이터를 더 쉽게 다룰 수 있도록 다양한 훅과 유틸리티를 제공합니다. 이 포스트에서는 React Query의 주요 기능에 대해 이야기하겠습니다. 여기서 제 목적은 가능한 한 빨리 React Query를 사용하여 작업을 시작할 수 있는 출발점을 제공하는 것입니다. React 앱 개발에 경험이 있다면, 클라이언트 상태 관리를 위해 Redux와 같은 라이브러리를 사용한 적이 있을 수 있습니다. 반면에, React Query는 …

원글: https://javascript.plainenglish.io/6-caching-strategies-to-remember-while-designing-cache-system-da058a3757cf 캐시 시스템 관련 용어, 읽기 vs 쓰기 중심의 애플리케이션에서 캐싱 전략, 캐시를 무효화하는 방법 등에 대해서 알려드리겠습니다. 개요 캐싱의 목표는 원본 소스에서 데이터를 가져오는 횟수를 줄여 처리 속도를 높이고 대기 시간을 감소시키는 것입니다. 캐싱은 인메모리 캐싱, 디스크 캐싱, 데이터베이스 캐싱, CDN 캐싱과 같은 다양한 수준의 아키텍처에서 구현될 수 있습니다. 데이터는 각각 고유한 이점이 있는 다양한 기술을 사용하여 캐싱할 수 있습니다. 인메모리 캐싱은 컴퓨터의 주 메모리에 데이터를 저장하여 디스크 저장소 보다 빠른 액세스를 제공합니다. 반면 디스크 캐싱은 하드 디스크에 데이터를 저장하므로 주 메모리보다는 느리지만 원격 소스에서 데이터를 가져오는 것보다 빠릅니다. 데이터…

원문: https://blog.openreplay.com/deep-copying-objects-with-the-structuredclone-api/ Deep Copying Objects with the StructuredClone API 개요: 자바스크립트에서 객체를 복사하는 것은 간단하지 않으며, 이는 잘 알려진 문제입니다. 그러나 이 글에서는 해결책을 제공합니다. StructuredClone API를 사용하면 모든 객체를 간단하고 빠르게 복사할 수 있습니다. 자바스크립트에서 객체가 변수에 저장될 때, 해당 변수는 객체의 참조값을 갖습니다. 이는 변수 자체에 객체를 저장하는 것이 아니라, 객체의 메모리 위치를 나타내는 식별자를 저장한다는 것을 의미합니다. 객체의 복사는 원시 타입과는 다른 방식으로 동작합니다. 얕은 복사(Shallow Copy) vs. 깊은 복사(Deep Copy) 자바스크립트에서 값은 두 가지 방법으로 복사할 수 있습니다. 얕은 복사와 깊은 복사입니다. 얕은 복…