AI 어플리케이션에는, 프론트엔드 개발자가 더 필요하다.
2025. 5. 13.
AI 어플리케이션에는, 프론트엔드 개발자가 더 필요하다.
The future of AI interaction: Beyond just text 🔗React conf의 시연 영상을 보고 AI의 응답으로 텍스트를 제공해주기 보다는, 사람들은 AI의 응답에 따라 interaction이나 visualization된 UI를 보여주기를 원하므로, 프론트엔드 개발자가 다른 방향으로 나아갈 것이라고 말하는 짧은 글입니다. Ant Design X같이 디자인 시스템 또한 AI에 맞게 진화하고 있으므로, 내 프론트엔드 기술과 AI와 어떻게 결합할지 고민해보는 것이 좋겠습니다.
왜 나는 Next.js가 아니라 Astro를 선택했을까?
Why Kleinanzeigen.de Picked Astro Over Next.js | Danilo Velasquez 🔗Next.js에서 Astro로 변경하게 된 이유를 설명하는 글은 많지만(Next.js에서 Astro로 변경하기) 자신의 목표를 상세하게 설명하고, 여러가지 프레임워크의 장단점을 같이 설명하는 글은 많지 않습니다. 이 글에서는 회사에서 자신에게 주어진 요구사항을 명확하게 분석하고 여러가지 프레임워크의 장단점을 소개하고, Astro 또한 단점이 있음에도 왜 선택했는지를 자세하게 소개합니다.
일반적으로, Tanstack Query의 설정을 override하는게 좋다.
When You Might Need to Override the Defaults in TanStack Query | Kolade Afode 🔗Tanstack Query에서 QueryClient를 선언하면, 기본 옵션 값을 제공하고, 일반적으로 그 설정에 따라 사용하고 있습니다. 위 글은 많은 경우에 이를 override하는 것이 좋은 이유를 몇가지 예시를 간단하게 설명하는 글입니다. 물론 예시를 큰 어플리케이션 코드에서 찾는 것은 어렵겠지만, 캐싱 설정을 인지하고 상황에 따라 적절하게 사용하는 것은 필요해보입니다.
Passkey 알아보기
Troy Hunt: Passkeys for Normal People 🔗2FA(2단계 인증)이 어떤 문제가 있고, Passkey가 어떻게 동작하고 어떤 문제상황을 해결하려고 나온 기술인지 비개발자도 알 수 있도록 쓴 글입니다. 만약 web에서의 passkey와 관련된 더 자세한 히스토리나 작동 원리를 알고 싶다면, WebAuthn 여행 글을 참고하세요!
RSC는 우리에게 선택권을 준다.
Server Components Give You Optionality | Daniel Saewitz 🔗CSR과 SSR을 소개하면서, 그 사이에서 RSC가 어떤 역할을 할 수 있는지, 기존 역할과는 어떻게 다른지 소개하는 글입니다. 이 글에서는 간단하게 fetch만을 사용했지만, 큰 어플리케이션 단에서는 아키텍쳐의 일부로서 사용할 수 있으므로, 잘 생각해봐야겠습니다.
Promise의 내부
How Promises Work in JavaScript 🔗복잡한 Promise(와 console.log)로직을 살펴보면서 Promise가 어떻게 흘러가는지 설명하는 글입니다. 더 interactive한 글을 보려면, Visualized Promise in event loop글을 참고하세요!
JS와 문자열
Converting values to strings in JavaScript has pitfalls 🔗JavaScript의 여러 값을 문자열로 바꾸는 방식에 대해 비교하는 간단한 글입니다.
Node.js는 어떻게 동작하는가?
How Node.js Works Behind the Scenes 🔗Node.js가 I/O부터 시작해서 웹 브라우저의 동작방식과 비교해서 Node.js의 작동방식을 자세하게 알려주는 글입니다. 브라우저의 Event loop와 비교해서 보는 것이 더 좋습니다 :)
Image Map 살펴보기
Revisiting Image Maps | CSS-Tricks 🔗image 기반 <map>태그를 사용할 때 어떻게 사용해야 하는지, 주의할 점은 무엇인지 살펴보는 글입니다.
CSS polyfill(가상으로) 구현해보기
Polyfilling CSS with CSS Parser Extensions – Bram.us 🔗CSS Parser extension이라는 아이디어를 통해 CSS polyfill을 구현하자는 아이디어 차원에서의 글입니다. 흥미롭게 보신 분은 글에서 소개한 관련 글인 CSS polyfill은 어렵다도 보시길 추천드립니다.
접근성 좋은 폼을 위한 팁
Accessible Forms: Tips and Techniques - AFixt AFixt, Inc. offers a full array of services for regulations and standards such as ADA, WCAG, EAA, AODA, and EN 301 549 🔗form을 만들 때 간단하게 적용하기 좋은 여러가지 접근성 팁을 소개하는 글입니다.
다크모드 toggle 버튼 구현하기
How to Add a Color Scheme Toggle in React Router by sergiodxa 🔗React Router에서 서버와 함께 다크모드 버튼을 구현하는 글이지만, 약간만 바꾸면 다른 프레임워크에도 적용할 수 있겠네요.
제품에 좋은 접근성을 위해 우리가 해볼 수 있는 것들
Fostering An Accessibility Culture — Smashing Magazine 🔗접근성을 위해 개발자 차원이 아니라, 문화차원에서, 혹은 프로세스 차원에서 생각해볼만한 것들을 제시하는 글입니다.
React 밖에서의 RSC
Functional HTML — overreacted 🔗HTML을 Server Components로 만들면서 RSC가 주는 장점을 되새길 수 있는 글입니다.
RSC for Astro Developers — overreacted 🔗Astro의 Island Arcitecture과 React Server Component과 비교해보면서 닮은 점을 소개하는 글입니다.
Towards React Server Components in Clojure, Part 1 | Roman Liutikov, Software Engineer 🔗Clojure에서 RSC를 사용하기 위해서 RSC 데이터 직렬화를 Clojure로 옮기는 과정을 진행했고, 다른 과정을 진행할 예정임을 밝히는 글입니다.
위 세 글은 RSC를 Next.js 바깥에서 사용할 수 있음을 보여줍니다(전자는 개념만 비교하는 글이지만). Server Component의 개념과 직렬화 방식은 널리 퍼질 수도 있겠네요.
주목할만한 친구들
Categorize Your Dependencies 🔗어떤 경우에 devDependencies를 사용해야 할까는 임의로 팀마다 어떤 전략을 사용하면 좋을지 여러가지의 접근 방식을 소개했다면, 이 글은 pnpm catalog와 자신이 만든 패키지와 익스텐션을 바탕으로 pnpm catalog를 잘 사용하는 방법을 소개하는 글입니다. 특히 node module inspector의 경우에는 deprecated된 라이브러리를 잘 짚어주기 때문에 새로운 라이브러리에 접근할 경우 이 도구를 사용하면 좋습니다.
Frontends are hard | SST 🔗프론트엔드의 인프라가 어려워진 이유를 분석하면서 SST는 어떻게 프론트엔드 인프라의 복잡함을 풀어냈는지에 대한 글입니다. SST에 관심이 없더라도, 프론트엔드 인프라가 복잡해진 이유에 대해서는 꼭 보셨으면 좋겠네요.
3.13 release | GSAP | Docs & Learning 🔗애니메이션을 다양하게 구현한 라이브러리인 GSAP의 플러그인들이 무료가 되었다는 소식입니다. 애니메이션을 더 다양하고 쉽게 만들 수 있겠네요.
Unhead v2: The full-stack <head> package for any framework. 🔗<head>태그를 수정할 수 있는 unhead 라이브러리가 2버전에 도달했습니다. 많이 사용하는 라이브러리는 모두 지원하므로, 만약 지금 사용하고 계신 head를 수정하는 라이브러리가 depreacted되었다면 한번 고민해볼만 합니다.
next.js의 기본 배포 방식인 vercel을 사용하지 않고 cloudflare에 배포하는 방식을 opennext를 통해 할 수 있는 템플릿입니다.
- YouTube 🔗React Native에서 ThreeJS, WebGPU… React Native 안 생태계의 GPU를 사용하는 라이브러리들에 대한 여러가지 소개 영상입니다.
Version v8.0.0 | Mantine 🔗리액트 라이브러리인 Mantine 8버전이 등장했습니다.