본문 바로가기

전체 글

 (39)
Astro + React Router v7 마이크로 프론트엔드 아키텍처 구축하기 (2편) MFE 통합, Shell Layout, 그리고 Vercel 배포 전략📌 이전 글 요약1편에서는 프로젝트의 전체 구조, Turborepo 설정, 미들웨어의 역할을 살펴보았습니다. 이번 2편에서는 실제로 MFE 콘텐츠가 어떻게 Shell에 통합되는지, 그리고 Vercel 배포 전략을 상세히 알아보겠습니다.🧩 MFE 콘텐츠 통합 ([...mfe].astro)이 파일은 마이크로 프론트엔드 아키텍처의 핵심입니다. 모든 MFE 요청을 캐치하여 해당 MFE 서버에서 HTML을 가져와 Shell 레이아웃에 통합합니다.통합 프로세스 흐름┌─────────────────────────────────────────────────────────────────────┐│ [...mf..
Astro + React Router v7 마이크로 프론트엔드 아키텍처 구축하기 (1편) Turborepo 모노레포 기반의 SSR 마이크로 프론트엔드 완벽 가이드📌 들어가며마이크로 프론트엔드(Micro Frontend, MFE)는 대규모 프론트엔드 애플리케이션을 독립적으로 개발, 배포, 운영할 수 있는 아키텍처 패턴입니다. 이 글에서는 Astro를 Shell(호스트)로, React Router v7 Framework Mode를 각 MFE 앱으로 사용하여 SSR(Server-Side Rendering) 기반의 마이크로 프론트엔드를 구축하는 방법을 상세히 알아보겠습니다.🎯 이 아키텍처를 선택한 이유왜 Astro를 Shell로?제로 자바스크립트 기본값: Shell은 주로 레이아웃과 네비게이션을 담당하므로 무거운 프레임워크가 필요 없음뛰어난 SSR 지원: Vercel Serverless와 완벽 ..
AI 시대의 검색 최적화: SEO, AEO, GEO 완벽 가이드 ChatGPT, Gemini, Perplexity... AI 검색엔진 시대에 당신의 콘텐츠는 인용되고 있나요?목차GEO란 무엇인가?AEO란 무엇인가?SEO vs AEO vs GEO 비교AI 검색엔진의 작동 원리AEO 최적화 핵심 전략GEO 최적화 7가지 핵심 전략실전 체크리스트무료로 GEO 점수 확인하기GEO란 무엇인가?GEO(Generative Engine Optimization)는 ChatGPT, Google Gemini, Perplexity, Claude 같은 AI 기반 검색엔진에서 콘텐츠가 인용되고 추천될 수 있도록 최적화하는 것을 말합니다.왜 GEO가 중요한가?2026년 현재, 검색 트래픽의 40% 이상이 AI 검색엔진을 통해 발생하고 있습니다. 사용자들은 더 이상 10개의 검색 결과를 클릭하지..
React에서 S3 대용량 파일 다운로드 받기 (multipart donwload) S3를 이용해서 파일을 업로드 / 다운로드 하다보면 대용량 파일(수백 MB~수 GB)을 다룰 때가 있습니다. 이 때 대용량 파일을 한 번에 다루게 된다면 메모리 문제나 타임아웃이 발생할 수 있습니다.이를 해결하기 위해서 AWS에서 업로드는 멀티파트 업로드 API를 제공하지만 다운로드는 별도의 API가 없습니다.하지만 GetObjectCommand에서 Range 옵션을 이용하여 잘게 chunk로 나누어 받은 다음 다시 합치는 방법으로 이를 해결 할 수 있습니다.사전 조건S3의 CORS를 허용해야합니다.[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "..
React 개발자로서 알아야 할 SOLID 원칙 프론트엔드 개발을 하다 보면 컴포넌트가 점점 커지고, 재사용도 어려워지고, 유지보수는 지옥이 되어가는 경험... 한 번쯤 해보셨죠?이럴 때 도움이 되는 게 바로 SOLID 원칙입니다.SOLID는 객체 지향 설계 원칙이지만, 함수형과 컴포넌트 기반 개발에도 충분히 적용할 수 있어요.오늘은 React 코드 예시를 통해 SOLID를 쉽게 풀어보겠습니다!✅ 1. SRP - 단일 책임 원칙 (Single Responsibility Principle)한 컴포넌트는 하나의 일만 해야 한다.❌ 잘못된 예시const UserProfile = ({ user }) => { const [editing, setEditing] = useState(false); const saveUser = async (userData) =>..
AWS Amplify로 Astro 배포하기 Astro 프로젝트와 AWS 계정이 있다면 쉽게 서비스를 호스팅 할 수 있습니다.Astro 프로젝트 만들기yarn create astro@latest my-astro-app한 줄로 손 쉽게 Astro 프로젝트를 생성할 수 있습니다.도구가 다 도와줍니다.생성된 프로젝트에 astro-aws-amplify를 설치해줍니다.astro-aws-amplify는 Server-side Astro를 amplify로 배포할 수 있게 도와주는 어댑터입니다.# Using Yarnyarn add astro-aws-amplifyAstro Config에 어댑터를 추가해줍니다.// astro.config.mjsimport { defineConfig } from "astro/config";import awsAmplify from "as..
Astro.js vs Next.js 및 다른 프론트엔드 프레임워크 비교 Astro.js란?Astro.js는 정적 사이트 생성(SSG)과 멀티 프레임워크 지원을 핵심으로 하는 최신 프론트엔드 프레임워크입니다. HTML 우선 접근 방식과 클라이언트 사이드 JavaScript 최소화를 통해 빠른 성능을 제공하는 것이 특징입니다.Astro.js와 Next.js 비교비교 항목Astro.jsNext.js렌더링 방식정적 사이트 생성(SSG) 중심, 서버 사이드 렌더링(SSR) 가능SSG, SSR, ISR, CSR 지원퍼포먼스HTML 우선 접근 방식으로 JavaScript 로딩 최소화동적인 데이터 처리를 위해 일부 클라이언트 JavaScript 필요멀티 프레임워크 지원React, Vue, Svelte, Solid 등 다양한 UI 라이브러리 지원React 기반코드 스플리팅기본적으로 필요 없..
JavaScript의 for...in과 for...of 반복문 비교하기 JavaScript에는 배열이나 객체를 순회할 때 사용되는 다양한 반복문이 있습니다. 이 중 for...in과 for...of는 각각의 고유한 사용 사례와 특징을 가지고 있습니다. 이번 글에서는 이 두 반복문이 어떻게 다른지, 그리고 언제 사용해야 하는지를 예제와 함께 알아보겠습니다.for...in 반복문for...in 반복문은 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 사용됩니다. 즉, 객체의 키(key)들을 순회합니다.문법:for (key in object) { // 실행할 코드}특징:객체의 속성 이름을 순회합니다.배열에도 사용할 수 있지만, 배열의 인덱스를 순회합니다.프로토타입 체인에 있는 속성도 포함될 수 있습니다.예제:const person = { name..

티스토리툴바