웹 프레임워크 스킬 그룹

Next.js, Turborepo, RemixIcon을 사용하여 현대적인 풀스택 웹 애플리케이션을 구축하기 위한 종합 가이드

개요

이 스킬 그룹은 웹 개발을 위한 세 가지 강력한 도구를 결합합니다:

Next.js - SSR, SSG, RSC 및 최적화 기능을 갖춘 React 프레임워크 Turborepo - JavaScript/TypeScript를 위한 고성능 모노레포 빌드 시스템 RemixIcon - 3,100개 이상의 개요 및 채우기 스타일 아이콘을 제공하는 아이콘 라이브러리

이 스킬 그룹을 사용하는 경우

현대적인 React로 새로운 풀스택 웹 애플리케이션 구축
여러 앱과 공유 패키지로 모노레포 설정
서버 사이드 렌더링 및 정적 생성 구현
지능형 캐싱으로 빌드 성능 최적화
전문적인 아이콘으로 일관된 UI 생성
여러 프로젝트에서 워크스페이스 종속성 관리
적절한 최적화로 프로덕션 준비 애플리케이션 배포

스택 선택 가이드

단일 애플리케이션: Next.js + RemixIcon

독립 실행형 애플리케이션을 구축할 때 사용:

전자상거래 사이트
마케팅 웹사이트
SaaS 애플리케이션
문서 사이트
블로그 및 콘텐츠 플랫폼

설정:

npx create-next-app@latest my-app
cd my-app
npm install remixicon

모노레포: Next.js + Turborepo + RemixIcon

공유 코드로 여러 애플리케이션을 구축할 때 사용:

마이크로프론트엔드
멀티 테넌트 플랫폼
공유 컴포넌트 라이브러리가 있는 내부 도구
로직을 공유하는 여러 앱(웹, 관리자, 모바일 웹)
문서 사이트가 있는 디자인 시스템

설정:

npx create-turbo@latest my-monorepo
# 그런 다음 apps/ 디렉토리에서 Next.js 앱 구성
# 공유 UI 패키지에 remixicon 설치

프레임워크 기능 비교

기능	Next.js	Turborepo	RemixIcon
주요 용도	웹 프레임워크	빌드 시스템	UI 아이콘
최적 대상	SSR/SSG 앱	모노레포	일관된 아이콘 사용
성능	내장 최적화	캐싱 및 병렬 작업	경량 폰트/SVG
TypeScript	완벽 지원	완벽 지원	타입 정의 제공

빠른 시작

Next.js 애플리케이션

# 새 프로젝트 생성
npx create-next-app@latest my-app
cd my-app

# RemixIcon 설치
npm install remixicon

# 레이아웃에 임포트
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# 개발 서버 시작
npm run dev

Turborepo 모노레포

# 모노레포 생성
npx create-turbo@latest my-monorepo
cd my-monorepo

# 구조:
# apps/web/          - Next.js 애플리케이션
# apps/docs/         - 문서 사이트
# packages/ui/       - RemixIcon을 사용한 공유 컴포넌트
# packages/config/   - 공유 설정
# turbo.json         - 파이프라인 설정

# 모든 앱 실행
npm run dev

# 모든 패키지 빌드
npm run build

RemixIcon 통합

// 웹폰트 (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// React 컴포넌트
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

참조 탐색

Next.js 참조:

앱 라우터 아키텍처 - 라우팅, 레이아웃, 페이지, 병렬 라우트
서버 컴포넌트 - RSC 패턴, 클라이언트 vs 서버, 스트리밍
데이터 페칭 - fetch API, 캐싱, 재검증, 로딩 상태
최적화 - 이미지, 폰트, 스크립트, 번들 분석, PPR

Turborepo 참조:

설정 및 구성 - 설치, 워크스페이스 설정, 패키지 구조
작업 파이프라인 - 종속성, 병렬 실행, 작업 순서
캐싱 전략 - 로컬 캐시, 원격 캐시, 캐시 무효화

RemixIcon 참조:

통합 가이드 - 설치, 사용법, 사용자 정의, 접근성

일반적인 패턴 및 워크플로우

패턴 1: 풀스택 모노레포

my-monorepo/
├── apps/
│   ├── web/              # 고객 대상 Next.js 앱
│   ├── admin/            # 관리자 대시보드 Next.js 앱
│   └── docs/             # 문서 사이트
├── packages/
│   ├── ui/               # RemixIcon을 사용한 공유 UI
│   ├── api-client/       # API 클라이언트 라이브러리
│   ├── config/           # ESLint, TypeScript 설정
│   └── types/            # 공유 TypeScript 타입
└── turbo.json            # 빌드 파이프라인

turbo.json:

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

패턴 2: 공유 컴포넌트 라이브러리

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react";

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  );
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button";
import { RiHomeLine } from "@remixicon/react";

export default function Page() {
  return <Button icon={<RiHomeLine />}>홈</Button>;
}

패턴 3: 최적화된 데이터 페칭

// app/posts/[slug]/page.tsx
import { notFound } from "next/navigation";

// 빌드 타임에 정적 생성
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// 1시간마다 재검증
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 },
  });
  if (!res.ok) return null;
  return res.json();
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return <article>{post.content}</article>;
}

패턴 4: 모노레포 CI/CD 파이프라인

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

유틸리티 스크립트

scripts/ 디렉토리의 Python 유틸리티:

nextjs_init.py - 모범 사례로 Next.js 프로젝트 초기화 turborepo_migrate.py - 기존 모노레포를 Turborepo로 변환

사용 예시:

# TypeScript 및 앱 라우터로 새 Next.js 앱 초기화
python scripts/nextjs_init.py --name my-app --typescript --app-router

# 기존 모노레포를 dry-run으로 Turborepo로 마이그레이션
python scripts/turborepo_migrate.py --path ./my-monorepo --dry-run

# 테스트 실행
cd scripts/tests
pytest

모범 사례

Next.js:

기본적으로 서버 컴포넌트를 사용하고, 필요한 경우에만 클라이언트 컴포넌트 사용
적절한 로딩 및 오류 상태 구현
자동 최적화를 위한 Image 컴포넌트 사용
SEO를 위한 적절한 메타데이터 설정
캐싱 전략 활용 (force-cache, revalidate, no-store)
안정적인 Next.js 보안 릴리스를 카나리 프레임워크 드리프트와 별도로 추적하세요. 프로덕션 앱은 패치된 안정적인 릴리스 라인을 유지하고, 특정 업스트림 문제를 테스트하지 않는 한 카나리 전용 핀을 피해야 합니다.

Turborepo:

명확한 분리로 모노레포 구조화 (apps/, packages/)
작업 종속성 올바르게 정의 (위상적 순서를 위해 ^build)
적절한 캐싱을 위한 outputs 설정
팀 협업을 위한 원격 캐싱 활성화
변경된 패키지에서만 작업을 실행하도록 필터 사용

RemixIcon:

미니멀한 인터페이스에는 라인 스타일, 강조에는 채우기 스타일 사용
선명한 렌더링을 위해 24x24 그리드 정렬 유지
접근성을 위해 aria-labels 제공
유연한 테마를 위해 currentColor 사용
여러 아이콘에는 웹폰트, 단일 아이콘에는 SVG 선호

리소스

Next.js: https://nextjs.org/docs/llms.txt
Turborepo: https://turbo.build/repo/docs
RemixIcon: https://remixicon.com

구현 체크리스트

이 스택으로 구축하기:

Web 프레임워크 스킬 그룹