2024년, 프론트엔드

State of Frontend 2024

심윤섭: 프론트엔드의 통계를 바탕으로 동향과 관점을 얻을 수 있는 자료입니다. 전망을 예측하는 것은 불가능합니다. 하지만 동향과 관점들은 제품에 부족한 것이 무엇인지를 다시 생각해보는 계기가 될 수 있습니다. 트렌드에 따라가지 않는 자신만의, 제품만의 원칙도 중요하지만, 좋은 관점인 부분은 채택해야겠죠.

김대관: 프론트엔드 통계를 보며, 여전한 React의 시장 점유율도 알 수 있었고, 이외의 Vue 사용률도 보면 본인의 상황에 맞는 기술 선택이 이루어지고 있다는 것을 알 수 있었습니다. 또한 유명한 기업에서 내는 신기술이라고 무작정 채택하는 것이 아닌 안정적인 방향으로 기술을 선택하는 흐름도 인상적이지만, 언제 프론트엔드 시장이 격변할지는 아무도 모를것이니 기술의 변화를 언제나 주시해야할 겁니다.

마이크로 프론트엔드의 새로운 접근

Incremental adoption of micro-frontends with Cloudflare Workers

Large frontend applications are often hard to improve without major investments. With Cloudflare Workers, our fragment-based micro-frontend architecture, and fragment piercing technique, engineering teams can incrementally improve large frontends in a fraction of the time, yielding significant user and developer experience gains.

심윤섭: Cloudflare에서 Fragment Piercing이라는 접근 방법으로 마이크로 프론트엔드를 구현하는 방식을 소개합니다. 개념과 기존의 여러가지 접근방식을 보시려면 마틴 파울러의 글을 참고하세요. Fragment Piercing은 JS을 통해 런타임에서 통합한다는 점에서 Module Federation과 같지만, gateway worker(서버리스 함수)를 통해 빠르게 로드하고, 점진적 도입이 가능한 것에 기술에 주목하고 있을만 하다고 생각합니다.

툴팁은 언제 써야 하는가

Tooltip Best Practices | CSS-Tricks

What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.

툴팁이 지향해야 하는 점, 지양해야 하는 점을 정의와 다른 기사를 통해서 설명하는 글입니다. popover 관련 UI 패턴들은 용도에 맞게 사용해야 한다는 점을 상기시켜줍니다.

Core Web Vital 점수 올리기(2024년)

The most effective ways to improve Core Web Vitals | Articles | web.dev

A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals

Core Web Vital 점수를 올리는 방법은 크게 달라지지 않았지만, bfcache에 대한 설명, 그리고 INP로의 변경점은 볼만하네요.

여러가지 구현하기

Simplifying Islands Architecture – Preact

Animated Spiral with React Native Skia

Learn how to create an animated spiral with React Native Skia and Reanimated.

Rendering Outlines with a Post-processing Shader | ATOMWOLF

I learn about shaders to make a post-processing effect for model-viewer that adds outlines to highlight detail in 3D CAD models.

React Native, and "the native feel" — mozzius.dev

by Samuel · 11 min read

Conditional React hooks pattern | Robin Malfait

A pattern for conditionally applying React hooks.

첫번째 글은 React Native Skia를 통해서 멋진 애니메이션을 구현하는 글입니다. 두번째 글은 React Three Fiber을 기반으로 셰이더를 추가하는 과정을 보여주는 글이지만, 맨 밑에 각종 참고한 자료가 다양하고 공부하는데 도움이 된다고 생각하여 가져왔습니다. 세번째는 React Native에서 네이티브 느낌이 나도록 하기 위해 주의해야 할 점을 짚어주는 글입니다. 네번째 글은 React의 훅 안에서 조건부 로직을 삽입하는 방법을 구현하는 이유, 구현 방법을 보여주는 글입니다. 마지막 글은 Island Architecture를 소개하고 Preact 기반으로 어떻게 구현하는지 보여주는 글입니다. Island Architecture가 궁금하시면 patterns.dev의 소개글을 참고하세요.