전체 글
-
언제까지 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 표시와 상호작용이 많아서, 작은 단위까지 테스트를 작성하는 노력이 꼭 효율적이지 않을 때도 있습니다. 스토리북 같은 디자인 시스템을 도입하지 않는다면 프론트엔드 단위 테스트는 불필요하다는..
-
Javascript ES16(ECMAScript 2025) 문법정리JS & TS 2025. 7. 9. 16:32
ES2024에 대해 정리한 게 얼마 전 같은데 벌써 ES2025에 대한 글을 작성하고 있네요.이번 업데이트는 개인적으로 JS 개발자들이 자주 겪던 불편함을 개선하는데 초점을 맞춘 업데이트라고 느끼고 있습니다.특히 정규 표현식 업데이트들은 개인적으로 정말 유용하게 사용할 수 있을 것 같습니다.1. JSON 모듈 및 Import Attributes이제 ES2025에서는 JSON 파일을 자바스크립트에서 직접 모듈 형태로 불러올 수 있습니다.Import Attributes를 통해 파일의 타입을 명시적으로 지정할 수 있습니다.이전에도 사용할 수 있지 않았나 하시는 분들은 Webpack이나 Vite 등의 번들러를 통해 제공된 기능을 이용한 것이고, 실제 Node, 브라우저 환경에서 정식 지원은 이번에 추가되었습니다..
-
Next.js App Router(5) - 성능 최적화, 실전 팁Next.js 2025. 7. 2. 10:09
Next.js App Router 드디어 마지막 편인 성능 최적화와 실전 팁입니다.이번 편에서는 이전 편들의 총집 편이며, 실전적으로 바로 활용할 수 있는 방법들을 모아 봤습니다.1. 서버 우선 아키텍처 설계 설계: 번들 최소화를 위한 근본 접근 모든 UI는 기본적으로 Server Component로 구현하여 JS 번들에서 제외, 클라이언트 렌더링 부하 제거클라이언트 코드가 꼭 필요할 때만, 그리고 작은 단위로 분리해 use client 선언Next.js의 자동 코드 분할 덕분에 페이지 단위 JS 추출이 기본 제공2. 코드 분할 & lazy loading: 다음 단계 지연 로딩 next/dynamic과 React.lazy + Suspense 조합으로 대형 UI(모달, 차트 등)는 사용 시점에 로딩SSR ..
-
Next.js App Router(4) - 데이터 패칭 전략Next.js 2025. 6. 30. 10:05
이번 글에서는 Next.js App Router에서는 데이터 패칭에 대하여 알아보겠습니다.1. 왜 기본 fetch인가?Next.js는 fetch 최적화를 전제로 설계되어 있습니다.그래서 기본 fetch에 다음과 같은 기능이 붙어 있습니다. 서버 캐싱 (Data Cache)Revalidate 옵션 (ISR)Streaming & Suspense와 자연스러운 통합중복 요청 자동 방지 (Request Memoization) 반면 axios나 ky 등의 외부 라이브러리는 이러한 기능과 연결되지 않아, "Next.js가 제공하는 캐싱/스트리밍을 제대로 안 쓰는 것"과 같습니다.결국 기본 fetch를 사용하면 의존성도 줄고, 성능 최적화도 그대로 가져갈 수 있습니다.2. fetch의 기본 동작 방식: auto no-..