전체 글
-
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-..
-
Next.js App Router(3) - 폴더 구조와 파일 역할Next.js 2025. 6. 27. 10:59
이번 편에서는 Next.js App Router의 page 파일 이외에 새롭게 추가된 파일들의 역할을 알아보고 효율적인 폴더 구조를 구성하는 방법에 대하여 알아보겠습니다. 1편에서 App Router에서 추가된 주요 파일들에 소개했는데요.다시 간단하게 작성해 보자면 다음과 같습니다.page.tsx: 각 경로의 메인 컴포넌트입니다. 서버 컴포넌트가 기본이며, 클라이언트 컴포넌트로 사용하려면 상단에 'use client'를 추가합니다.layout.tsx: 특정 경로 그룹에서 공통으로 사용되는 레이아웃을 정의합니다. 페이지 전환 시에도 상태가 유지됩니다.template.tsx: 페이지 전환마다 새 인스턴스로 생성됩니다. 상태를 초기화하고 싶을 때 사용됩니다.loading.tsx / error.tsx: 로딩 상..
-
Next.js App Router(2) - 서버 vs 클라이언트 컴포넌트Next.js 2025. 6. 25. 10:25
Next.js App Router에서 가장 큰 변화점은 기본적으로 모든 컴포넌트는 Server Component(서버 컴포넌트)라는 것입니다.이번 글에서는 Server Component와 Client Component에 대해 알아보겠습니다.1. Server Component의 장점과 역할서버 환경(Node.js)에서 렌더링DB 쿼리, 외부 API 호출, 비밀 키·토큰 활용 등 브라우저에서 노출되면 안 되는 모든 작업을 안전하게 처리할 수 있습니다.예시: 서버 컴포넌트 내에서 직접 DB에 접근하여 데이터를 가져오고, 이를 UI에 반영HTML 렌더링 및 전송서버에서 렌더링 된 HTML이 브라우저로 전달되어, JS 번들 없이도 빠르게 콘텐츠가 보임React의 클라이언트 훅, 브라우저 API 미사용useStat..
-
Next.js App Router(1) - Next.js의 새로운 패러다임 이해하기Next.js 2025. 6. 23. 14:13
Next.js가 App Router를 도입 한 13 버전 이후 벌써 15 버전이 되었습니다.기존에 Page Router를 사용하던 곳들도 이제는 App Router 도입을 고민하고 또 도입하고 있습니다.이번 글에서는 Next.js App Router가 등장한 배경, 철학, 그리고 Pages Router와의 차이점에 대해 알아보겠습니다.1. Next.js App Router의 등장 배경Next.js는 React를 기반으로 한 프레임워크로서 항상 React의 변화를 빠르게 도입하는 프레임워크입니다.React 18에서 도입된 Concurrent Rendering과 React Server Components(RSC) 지원은 기존 SPA 한계를 극복하기 위한 도전이었습니다.Next.js도 SPA의 한계를 깨고 더..