React 팀의 2024 계획

React 팀의 2024 계획

React Labs: What We've Been Working On – February 2024 – React

심윤섭: React 19 버전의 출시 예고와 함께 베일에 싸여있던 React Compiler, 그 외 다른 기능을 출시하는데에 React팀이 집중하고 있다는 글입니다. React Compiler가 이전 RSC와 다르게 안정적으로 충분한 성능(렌더링 혹은 컴파일)을 내는지가 주요 쟁점이 될 것으로 보입니다.

김대관: React Compiler 개선을 통해 메모이제이션과 같은 기능 최적화들에 대한 문제를 해결해준다는 내용은 매우 흥미롭지만, React 렌더링을 어디까지 컴파일러가 해주고 어디부터 개발자가 최적화를 하는게 옳을지 궁금합니다. 또한 글에서 리액트가 RSC를 준비하면서 메타 문서를 최적화한다는 부분은 매우 흥미롭긴 합니다.

LocalStorage는 언제 써야 하는가

Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database

This guide explores localStorage in JavaScript web apps, detailing its usage, limitations, and alternatives like IndexedDB and AsyncStorage.

심윤섭: 브라우저의 상태를 저장하기 위해 Web Storage를 사용합니다. 이 때 localStorage의 특성과 언제 써야 하는지를 말해주는 글입니다. 개인적으로 인증, 인가할 경우 어떤 Web Storage를 써야 하는지 생각해보고, React에서 localStorage를 사용하기 위한 useSyncExternalStore의 활용법도 확인해보세요.

김대관: 로컬 스토리지를 생각하면 과거 JWT Token 저장과 관련해서 쿠키냐 로컬스토리지냐 정말 많은 토론을 했었습니다. 결국은 웹의 비연결성적인 특징을 보완하기 위한 여러 스토리지의 비교도 설명하니 잘 읽어보시고 본인의 환경에서 맞게 사용하면 좋을 것 같습니다.

Favicon 가이드

How to Favicon in 2024: Six files that fit most needs—Martian Chronicles, Evil Martians’ team blog

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.

심윤섭: 구글에 검색하는 Favicon 생성기를 통해 Favicon을 생성하면 수많은 파일이 생성됩니다. 이 글은 생성되는 파일의 많은 부분이 필요 없고 그 이유를 설명합니다.

Element를 가운데 정렬하기

How To Center a Div

Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use… But how do we pick the best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.

심윤섭: CSS의 다양한 기능을 통해 HTML 요소를 가운데 정렬하는 방법을 알려줍니다. CSS의 다양한 기능을 아는 것도 좋지만 브라우저가 지원하지 않을 가능성도 있으니 다양한 툴(ex. browserlist…)를 통해 호환성을 지키는 것도 중요합니다.

React Native에서 DOM API를 사용한다면

GitHub - facebook/react-strict-dom: React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets

React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets - facebook/react-strict-dom

웹 개발자의 React Native 첫번째 장벽은 DOM과 CSS를 사용할 수 없다는 점입니다. 이 장벽을 허물기 위해 React 팀은 React Native 개발을 React(DOM) 개발하는 것처럼 개발할 수 있도록 만드는 라이브러리 개발에 착수했습니다.

UI는 상태의 함수다.

UI의 상태를 한 곳에서 관리하려고 하는 시도는 많지만 Web API, 서버의 상태와 데이터, 브라우저의 상태를 한 곳에서 모두 관리하기는 쉽지 않습니다. 이 글은 단순히 상태는 셀 수 없이 많다는 것을 보여줍니다.

SVG 튜토리얼

svg 로딩 스피너를 만들어 가며 SVG에 대한 속성을 안내합니다.