State of HTML 2023

심윤섭: HTML에는 어떤 기능이 있는지와 HTML에 대해 다른 사람은 어떻게 생각하는지 엿볼 수 있는 설문조사 결과입니다. HTML을 통해 구조를 설계해야 하고, HTML에 관련된 JS API에 대한 설문도 있으므로 둘러보면 좋은 설문조사입니다.

Rate Limit 알고리즘 시각화

심윤섭: Rate limit는 서비스의 트래픽을 관리하는 중요한 로직입니다. 위험한 공격인 Brute force에 대해 막을 수도 있죠. 알고리즘을 소개하는 것과 동시에 시각화를 해주는 좋은 글입니다.

ESLint 9.0 안정화

ESLint는 많은 커뮤니티에 의해 굴러갑니다. 그래서 커뮤니티 플러그인들의 버전 지원을 계속 해주는 것이 중요 포인트가 됩니다. ESLint가 9.0을 지원하면서 내부 동작 방식과 Flat Config를 출시해서 이전 버전과 호환이 안되는 경우가 많았는데 ESLint 팀에서 이를 라이브러리로 해소했습니다. 그래서 ESLint 9버전 지원과 Flat Config 지원을 보고 @eslint/eslintrc와 @eslint/compat을 잘 써서 9버전으로 버전업 해야겠네요.

React 어플리케이션을 만들 때 생각할 것

심윤섭: React 어플리케이션을 만들 때 라이브러리 선택하거나 코드 밖에서 고려해야 할 것은 공식문서에서 알려주지 않습니다. 이 글은 자신의 주관과 함께 고려할 점을 추려서 알려주고 있습니다. 이외에도 다른 라이브러리와 다른 고려할 것은 많지만 주요 부분은 모두 설명한다고 생각합니다.

React 내부 딥 다이브

심윤섭: React의 동시모드 작동 원리에서 가져왔듯이 React에서 내부 구조를 설명하는 글은 매우 많지만 이 글은 시각적으로 보여주면서 친절하게 설명하는 글이라고 생각해서 가져왔습니다. 글쓴이도 말했듯이 React의 코드는 거대하고 모두 한번에 이해할 수 없습니다(또한 업데이트되면서 바뀔 수도 있습니다). 천천히 이해하면서 보세요!

Tanstack Query를 왜 써야 하죠?

심윤섭: Redux saga로 서버 데이터를 받아오는 사람들에게는 React Query를 쓰는 이유에 대해 충분한 이해를 갖고 접근이 가능하지만 처음 시작하는 사람에게는 이해하기 어렵습니다. 이 글은 시각적으로 보여주면서 친절하게 설명해줍니다. Redux 개발자도 말했듯이, Tanstack Query는 서버 상태 관리 라이브러리이며, 문제 상황과 일치하는 도구를 사용하기를 바라고 있습니다.

가운데 정렬은 힘들다

심윤섭: 보통 Flex 레이아웃을 사용해서 가운데 정렬을 하기 마련인데, 저자는 그래도 가운데 정렬이 안되는 경우가 많다는 것을 지적합니다. 그리고 웹 개발자가 이를 해결하기 위해 여러가지 해결책을 소개합니다. 물론 실제로 가운데 정렬인데 보기에는 가운데 정렬이 아닌 경우도 있으므로 완전한 해결책은 아닙니다.. 가운데 정렬하는 방법에 대해서는 How To Center a Div을 참고하셔도 좋습니다.

CSS로 도형 만들기

홈페이지에 도형이 들어가게되면 이미지로 때우는 경우가 대부분이지만 어렵지 않은 경우는 CSS로만 도형을 만들 수 있다는 것을 보여줍니다. 이런 기능을 모두 외울 필요는 없지만 이런 도형도 CSS로 만들 수 있다는 것만 알고 다시 이 글을 방문해도 된다고 생각합니다.

Grid masonry에 대한 생각

CSS Grid masonry가 아직 실험적인 단계이지만 Firefox에서 요소의 순서가 매우 이상하게 배치하는 것을 지적하는 글입니다. 실험적인 단계이고, 다른 곳에서 많이 사용할 것은 알지만 masonry layout에 대해 모르는 사람이 많을 것이라 생각해서 가져왔습니다. JS로 구현하려면 너비와 높이를 계산해서 배치해야합니다(예시).

Phoenix LiveView는 Next.js의 꿈을 꾸는가

LiveView의 1.0 배포가 다가왔다고 해서 가져왔습니다. 어그로 끌려서 가져온 것도 맞구요. Blazor와 비슷한 방식(소켓으로 UI 변경점 통신) 만든 SSR 프레임워크입니다. 매우 좋은 프레임워크라고 보기는 힘들지만 이러한 접근 방식도 있다라는 것을 알아두셨으면 합니다.

Google I/O 2024

Google I/O에서도 Web에 대한 발표를 진행했습니다. 요약은 Google I/O 2024에서 발표한 10가지 업데이트: 모든 웹 개발자를 위한 AI 기능 활용을 참고하세요. 이전에 소개했던 Chrome 사전렌더링 API도 있네요.

Web Feature Status

4개 브라우저의 기능 지원 현황을 한번에 보여주는 대시보드를 만들었습니다. CanIuse의 데이터를 대체할 수는 없을 것 같지만 신규 기능이 무엇이 있는지는 더 잘 볼 수 있다고 생각합니다.

현재 JavaScript 프레임워크의 상태

2024년 5월 현재 JavaScript 프레임워크의 기능과 아키텍처가 닮아가고 있으며, 각 프레임워크마다 어떤 기능으로 차별화를 이루고 있는지 분석한 자료입니다. 물론 내부 구성이나 지향점으로 삼고 있는 목표는 모두 다르기 때문에 정말로 분석한다면 각 프레임워크의 블로그를 봐야겠네요(Angular, React, Remix, Nuxt).

View Transition API

여러 프레임워크에서 View Transition API가 지원하는 것은 기본이 되었으며, 다양한 애니메이션을 만들 수 있게 되었습니다(ex. FLIP 애니메이션).

Baseline to DX

RUM 데이터(실제 사용자 데이터)를 잘 보이기 위해 RUM 통계를 공개했습니다. 그리고 개발자가 개발 도중에 대상 브라우저가 해당 기능을 지원하는지 보여주기 위해 도구에 통합하는 것을 목표로 하고 있다고 합니다.

React Conf 2024

Meta에서 2년만에 React 컨퍼런스를 개최했습니다. 그 중에서 좋은 글과 함께 소개할 수 있는 것들을 모았습니다(React 19의 신 기능은 여러가지 출시 소식에 넣어놨던 React 19 beta 글을 참고하세요).

Remix에서 다시 React-Router로

Remix는 React Router를 기반으로 만들어진 SSR 프레임워크입니다. React 공식문서에서 CRA를 추천하지 않고, Remix에서 번들링 툴을 Vite로 바꾸게 되면서(이 과정에서 Remix에서 SPA모드를 지원하겠다고도 했습니다), Remix와 React Router는 다를 것이 없다고 생각하게 되고, Remix 패키지를 React Router로 변경하는 과정을 거칠 것이라는 발표입니다.

RSC React와 Node.js만으로만 구현하기

컨퍼런스에서는 서버 컴포넌트 지원의 일부를 구현하는 것만 나왔지만, RSC의 많은 부분을 구현하는 워크샵을 만들었길래 이 워크샵으로 가져왔습니다. RSC를 다른 프레임워크들이 어떻게 구현하는지를 RSC의 payload부터 server action까지 모두 파악합니다.

React Compiler

React Compiler의 베타버전을 출시하면서 어떻게 쓸 것인지와 내부는 어떻게 동작하는지 간략하게 소개했습니다. 이전에 소개했던 React 컴파일러의 타입 시스템의 저자가 Deep dive를 발표했습니다. 블로그 글을 읽으면 더 잘 이해할 수 있습니다.