Tip
-
언제까지 MSW? MirageJS 알아보기Tip 2025. 8. 8. 19:10
실무에서 프론트엔드 개발을 하다 보면 생각보다 백엔드 개발이 늦어지는 경우가 많습니다.이전에 MSW에 대해 소개했었는데요.2024.11.30 - [Tip] - 실무에서 유용한 MSW(Mock Service Worker) 활용 가이드 실무에서 유용한 MSW(Mock Service Worker) 활용 가이드프런트엔드 개발을 하다 보면 백엔드 API가 완성되지 않은 상태에서 작업해야 하는 API 의존성 문제는 항상 개발 속도와 품질에 큰 영향을 미칩니다.이런 상황에서 모킹(Mocking)은 필수적이지만,kir93.co.kr이번 글에서는 최근 괜찮다고 생각되는 MirageJS를 MSW와 비교하며 소개해보겠습니다.MirageJS란?MirageJS는 브라우저 내에 가상의 API 서버를 생성하여 프론트엔드 코드와 함..
-
이제는 TipTap? 아직도 CKEditor?Tip 2025. 8. 1. 19:56
최근 편집기에 대해 조사하던 중 많이 변했다는 것을 체감했습니다.Quill 주로 사용하고 좀 더 많은 기능이 필요하다면 CKEditor를 사용하는 게 일반적이었는데, Tiptap과 같은 새로운 Editor가 나와 오늘은 Tiptap과 CKEditor, Quill에 대해 비교해 보겠습니다.ProseMirror와 TipTap – 모던 에디터의 탄탄한 기반먼저 TipTap을 이야기하기 전에, 그 기반 기술인 ProseMirror를 짚고 넘어가야 합니다.ProseMirror는 CodeMirror를 만든 Marijn Haverbeke가 설계한 문서 편집 엔진으로, 수년간 다양한 에디터에서 활용되며 안정성을 검증받은 배틀 테스트된(editor) 라이브러리입니다.ProseMirror는 문서 모델(schema)과 편집..
-
웹 애니메이션 성능을 끌어올리는 requestAnimationFrame(rAF) 활용법Tip 2025. 7. 24. 19:24
웹페이지를 구현할 때 가장 난감한 순간 중 하나는 애니메이션을 구현할 때인 것 같습니다.CSS만으로 구현할 수 있는 애니메이션이라면 다행이지만, JS로 스타일을 변화시켜야 되는 경우에는 생각보다 성능이 안 나오는 문제가 있습니다.(특히 모바일에서)이런 상황에서 최적화할 수 있는 API인 requestAnimationFrame(rAF)에 대해 알아보겠습니다.requestAnimationFrame은 무엇인가?requestAnimationFrame()은 쉽게 말해 브라우저에게 "다음 repaint 이전에 이 함수를 실행해 줘"라고 요청하는 API입니다. 콜백으로 전달된 함수는 브라우저 다음 프레임의 repaint 직전에 호출되며, 일반적으로 초당 60회(60 FPS) 호출됩니다.다만 실제 호출 빈도는 디스플레..
-
Module Federation을 활용한 마이크로 프론트엔드 구현Tip 2025. 7. 14. 20:02
이번 글에서는 Webpack 5에서 추가된 Module Federation은 여러 독립적인 프론트엔드 애플리케이션이 런타임에 모듈을 동적으로 공유할 수 있게 하는 기술입니다.이를 통해 최근, 아니 이제는 보편화된 마이크로 프론트엔드 아키텍처와 Module Federation을 함께 사용하고 설정하는 방법에 대해 알아보겠습니다.1. Module Federation이란?Module Federation은 서로 별도의 빌드 프로세스를 가진 애플리케이션 간에 코드(모듈)를 동적으로 공유할 수 있게 합니다. 다시 말해, 여러 개의 별도 빌드된 자바스크립트 애플리케이션들이 런타임에 모듈을 공유하고 불러올 수 있도록 해주는 기술입니다.기존 방식은 공통 라이브러리를 NPM 패키지로 배포하여 각 앱이 개별적으로 설치하는 ..
-
과연 언제부터 프론트엔드에 테스트가 필요할까?Tip 2025. 7. 11. 11:56
요즘 프론트엔드에서도 테스트는 필수인 것처럼 보입니다.많은 회사에서 테스트코드 작성 경험을 우대 사항이나 필수 사항에 넣고 있으니까요.하지만 제가 생각하기에 생각보다 많은 회사들은 프론트엔드에서의 테스트 도입을 못하고 있고, 안 하고 있다는 것을 많이 느낍니다.이번 글에서 프론트엔드 관점에서 언제 테스트를 시작하면 좋을지에 대한 생각을 공유해 보겠습니다.프론트엔드 단위 테스트: 언제 필요할까?프론트엔드 분야에서 단위 테스트(Unit Test)의 필요성에 대해선 다양한 견해가 있습니다.백엔드 로직과 달리 프론트엔드는 UI 표시와 상호작용이 많아서, 작은 단위까지 테스트를 작성하는 노력이 꼭 효율적이지 않을 때도 있습니다. 스토리북 같은 디자인 시스템을 도입하지 않는다면 프론트엔드 단위 테스트는 불필요하다는..
-
Portal만 쓰시나요? HTML 표준 Dialog, Popover API 알아보기Tip 2025. 6. 7. 19:51
React를 개발하다 보면 대부분 Portal을 사용해서 모달이나 팝업을 구현합니다.오늘은 Portal이 아닌 HTML의 표준 요소인 Dialog, Popover API를 알아보고 Portal이 아니라 Dialog나 Popover를 사용하는 경우에 대해서도 알아보도록 하겠습니다.1. PortalPortal은 컴포넌트 트리 바깥으로 DOM 요소를 렌더링 할 수 있게 하는 기술입니다.React에서는 ReactDOM.createPortal로 구현합니다.주로 모달이나 팝업처럼 현재 DOM 계층과 독립적인 UI 레이어를 만들고 싶을 때 많이 사용합니다.z-index 이슈가 복잡한 경우모달이 부모 컴포넌트의 overflow나 transform 등에 영향을 받지 않게 하고 싶을 때레이아웃과 별도로 레이어 UI를 관리..
-
AI 크롤러 차단해서 요금 폭탄 방지하기Tip 2025. 5. 25. 19:48
최근 사내에서 Vercel의 요금이 평소보다 많이 나오는 문제가 발생해 알아보니 meta-externalagent이 범인이었습니다.meta-externalagent는 Meta의 AI 크롤러로 무분별한 크롤링으로 대용량의 트래픽을 발생시켜 요금 폭탄을 유발한 것이었습니다. 이 글에서는 Meta의 meta-externalagent 뿐만 아니라 OpenAI의 GPTBot, Anthropic의 ClaudeBot, Google의 Google-Extended 등 다양한 Bot들을 차단할 전략을 다루겠습니다. 우리의 경우 다행히 아웃바운딩 요금 폭탄만 발생했지만, Vercel 이미지 최적화를 사용하거나 할 경우 더 끔찍할 수도 있습니다!만약 차단을 안 해두셨다면 얼른 차단을 통해 서버 비용 폭증을 막기를 권장드립니..
-
PandaCSS vs Tailwind CSS vs Vanilla Extract 비교 분석Tip 2025. 5. 11. 19:45
RSC(React Server Component)의 출시와 Next.js의 App Router 전환 뒤 전통적인 CSS-in-JS 방식의 한계로 더욱 각광받고 있는 Tailwind CSS, Vanilla Extract, PandaCSS를 비교해 보겠습니다.1. CSS-in-JS의 한계와 새로운 접근법의 필요성과거에는 styled-components나 Emotion과 같은 CSS-in-JS 런타임 스타일 생성 방식은 런타임에 JS로 스타일을 생성·주입하는 과정은 성능 오버헤드로 이어지고, SSR(서버사이드 렌더링) 환경에서는 추가 설정이 필요하거나 FOUC 문제가 발생하는 등의 단점이 명확했지만, 편리함이라는 장점이 너무 컸기에 폭넓게 사용되었습니다. 하지만 Next.js 13의 App Router 도입 ..