프론트엔드 생태계 이대로 가면

프론트엔드 생태계 이대로 가면

프레임워크가 전년도보다 더욱더 범람하고 있는데, 새로 나오는 프레임워크를 모두 배우기보다 핵심 웹 기술에 집중하자는 이야기를 담은 글입니다. 이전에 소개했던 프론트엔드 과거와 현재 글에도 보이듯이 모든 기술에는 모든 이유가 있기에, 모두 배우려기보다는 어떤 문제를 해결하려 했는지를 알고 사용하는 것이 좋겠습니다. Next.js를 선택하지 않고 Tanstack Router를 선택하는 글에서도 라이브러리의 특성에 따라 기술을 선택하는 모습이 보입니다.

inline Background, 어디까지 구현해봤니?

inline background를 background-color를 통해서 구현하면, 겹침 현상이 발생할 수도 있습니다. 이 글에서는 svg 필터를 통해 문제 없는 방식으로 구현 후 고도화하면서, svg 필터와 관련된 CSS 속성을 자세하게 알아봅니다.

React 라이브러리와 React의 통합 이해하기

상태를 담당하는 수많은 React 기반 라이브러리들이 어떤 방식으로 React와 어떤 방식으로 통합하는지, 그리고 그 방식에 따라 어떤 장단점이 있는지(예시)를 차근차근 설명합니다. 상태를 담당하는 라이브러리가 간단하여 버그가 발생하지 않을 수도 있지만, 사람일은 모르기 때문에 어떻게 통합하는지 아는 것은 중요합니다.

에디터 개발자의 성능 문제 접근 방식

Rich Text Editor인 CKEditor에서 성능 문제를 탐색하고, 문제를 어떻게 해결했는지 소개하는 글입니다. 이 글에서 성능 문제를 찾는 방식은 라이브러리 개발자가 아니더라도 어플리케이션 개발자에게도 도움이 됩니다. 두번째 글에서의 JS엔진의 monomorphism 캐싱을 설명하는 글들을 참고하세요.

ESLint v9로 마이그레이션 해보자.

ESLint가 v9로 변경되면서 여러 라이브러리의 변경점, 설정의 변경점으로 인해 설정을 바꾸기 시작하기 곤란할 때 어떻게 해야하는지 가이드라인이 될 수 있는 글입니다. 모든 소개와 참고 문헌이 도움이 되지만, ESLint의 v9 지원 트래킹 이슈를 통해 여러 새로운 plugin 라이브러리 도입을 검토해보는 것도 좋습니다.

DB 대신, 동기화하자.

브라우저의 IndexedDB 기능을 이용하여 백엔드 없이 DB 동기화 엔진을 사용하는 것이 미래가 될 수도 있겠다는 시선을 공유하는 글입니다. 물론 이전에 소개한 Local-first 어플리케이션에만 미래가 될 수도 있지만, 미래는 모르니까요.

Parcel의 RSC 지원

RSC 지원은 매우 한정적이였었는데, Parcel 2.14버전부터 지원을 시작해서, 새로운 친구들 섹션 뒤에 가져왔습니다.

BreadCrumb는 왜 없어졌을까

BreadCrumb가 현대 웹 디자인에서 왜 사라졌는지에 대한 주관적인 의견을 적은 간단한 글입니다. 간단한 글이지만 왜 그랬는지에 대한 이유와 대체품들을 소개합니다.

React 개발자에게 SSR 설명하기

SSR이 어떻게 동작하는지도 설명하지만, 그보다 SPA에서 SSR이 필요하게 된 경우, 메타프레임워크의 등장, 서버리스의 장단점…으로 이어지는 SSR의 발전 과정을 간단하게 살펴보는 글입니다. 더 자세하고 친절한 설명 글은 patterns.dev의 렌더링 패턴 부분을 참고하세요.

AWS Lambda는 어떻게 써야 할까

AWS에서 AWS Lambda에서 수많은 호출을 처리하기 위해 어떻게 인프라를 구성해야 하는지 소개합니다. 물론 경우에 따라 Edge Function이 필요하지 않을 수도 있으니, 잘 고려하고 도입을 검토해야겠습니다.

디자인 시스템에는 디스플레이에 대한 고려가 필요하다

색 공간이라고 칭해지는 color space는 디스플레이마다 지원방식이 다르고, 규격또한 여러개가 존재합니다. 가장 유명한 규격인 P3를 소개하고, 브라우저 CSS에서 어떻게 지원해야하는지를 소개하는 글입니다.

JS 악성 스크립트를 AI로 탐지하기

AST 대신 CST로 자바스크립트를 분석하여 악성 스크립트에 해당되는 부분을 어떻게 탐지하도록 훈련했는지 소개하는 글입니다. 대부분은 AI의 학습과 평가에 대한 부분이지만, JS를 분석하는지에 대한 부분은 프론트엔드 개발자가 학습하기에 좋습니다.

Flexbox에서 일부만 gap을 바꿔야 할때

Flexbox에서 일부분만 gap의 값을 바꿔야 할 때 어떻게 코드를 바꿀까에 대한 여러 방식을 소개하는 간단한 글입니다.

브라우저 줌 감지하기

브라우저를 확대/축소하는 사람은 종종 있지만 브라우저에 zoom 이벤트는 없습니다. 이 글에서는 바닐라 자바스크립트로 줌 배율을 확인하는 코드를 만들고 친절하게 소개합니다.

Zod, 처음부터 끝까지

zod가 무엇인지에서부터 zod의 사용법을 간단하게 보여주는 튜토리얼입니다.

새 친구들

트리셰이킹 가능한 유효성 검사 라이브러리인 Valibot이 1버전이 되었습니다.

Rust기반으로 만들어진 Oxlint가 베타버전으로 출시되었습니다. ESLint보다 2배 빠르다고 하네요.

Rspack과 Webpack의 빌드 과정을 분석하는 도구인 Rsdoctor가 1버전이 되었습니다.

여러가지 기능을 담은 Nuxt 새 버전이 출시되었습니다. LazyComponent를 hydration 타이밍을 정할 수 있는 기능이 눈에 띄네요.

framer-motion으로 많이 알려진 motion라이브러리의 vue버전이 출시되었습니다.

Web container를 사용해서 node_modules의 크기와 어떻게 의존성을 띄고있는지 여러가지 형태로 보여줍니다.

Infinite Query의 UX를 더 좋게, 더 쉽게 구현할 수 있도록 지원하는 Live mode를 소개하는 글입니다.

멀티 스레드가 가능하도록 하는 React Native Worklets에 대해 의논하는 글입니다.

React Native 글을 많이 기고하던 Callstack 회사에서 새로운 RN 메타 프레임워크를 만들고 있다는 소식입니다.