전체 글
-
React의 Synthetic Event는 어떻게 작동할까?React 2025. 8. 14. 19:46
React의 이벤트 시스템, 즉 SyntheticEvent는 단순히 개발 편의를 위해 추가된 요소가 아닙니다.이것은 파편화된 브라우저 환경이라는 현실적 제약 속에서 일관되고 예측 가능한 UI 개발을 가능하게 하려는 React의 근본적인 아키텍처 설계의 산물입니다. React가 등장하기 전, 개발자들은 브라우저마다 제각각인 이벤트 모델과 비표준 API 구현 때문에 '크로스 브라우징'이라는 거대한 장벽에 끊임없이 부딪혔습니다.Internet Explorer의 attachEvent와 다른 브라우저의 addEventListener, 이벤트 객체의 속성 차이 등은 개발자에게 끝없는 if/else 분기문과 폴리필(Polyfill)의 늪을 선사했습니다. 이는 jQuery와 같은 라이브러리가 DOM을 직접 조작하며 복..
-
언제까지 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 ..