[React] Day_68 데일리 정리

 

어헝헝 ㅠㅡㅠ

 

PR... 하고나니 갑자기 불어난 내.. 과제덜...

마이페이지.. 우당탕.. 해야겠다 아하하하하 ^-^;;;

오늘도 챌린지 정리 가보자구yo

le go.

 

 

챌린지반 강의정리 - 패키지매니저 & 모노레포

npm, yarn 말고 더 있다구요????

 

갑자기 생각나는 yarn과 npm의 충돌... (으악!)

 

 

패키지 매니저

 

소프트웨어 개발에서 라이브러리(패키지)를 설치, 업데이트, 관리하는 도구

 

- 필요한 이유

• 의존성 관리 – 프로젝트에서 필요한 외부 라이브러리를 쉽게 설치 및 관리 가능
• 버전 제어 – 특정 라이브러리 버전을 고정, 팀원 모두가 동일한 환경에서 개발 가능
• 프로젝트 초기화 – 빠르게 필요한 환경을 구성 및 복잡한 설치 과정을 단순화

 

JS 패키지 매니저의 역사

 

- 주요 패키지 매니저

• npm (Node Package Manager)
• yarn
• Pnpm (오, 이건 처음들어본다!)

 

패키지 매니저 비교 (Pnpm vs Yarn Berry)

 

- Pnpm (Performant NPM)

• 디스크 공간 절약 (중복 파일 제거)
• 빠른 설치 속도
• 모노레포에 적합

 

- Yarn Berry (Yarn 2.0)

• Zero Install로 네트워크 없이도 패키지 관리 가능
• 플러그인 확장성
• 효율적인 의존성 해결

∴ 모노레포 관리가 필요하다면 Pnpm으로, 플러그인 기반 커스터마이징을 선호한다? Yarn Berry으로!

 

 

모노레포란

 

여러 프로젝트(프론트엔드, 백엔드, 라이브러리 등)를 하나의 저장소에서 관리하는 방식

 

- 사용하는 이유

• 코드 재사용성 – 중복 코드를 줄이고, 공통 컴포넌트 및 유틸리티를 쉽게 공유
• 의존성 관리 – 프로젝트 간 일관된 패키지 버전 유지
• 팀 협업 강화 – 단일 저장소에서 코드 리뷰와 변경 사항 추적이 쉬움
• 빌드 최적화 – 변경된 부분만 빌드하거나 테스트 가능

 

- 모노레포 프로젝트 예시 (E-commerce)

ecommerce-project/
├── apps/
│   ├── web/               # React 기반 웹 프론트엔드 (React)
│   ├── mobile/            # 모바일 앱 (React Native로 제작)
│   ├── admin-dashboard/   # 관리자 대시보드
│   ├── backend/           # Node.js 기반 API 서버
├── packages/
│   ├── shared-ui/         # 공통 UI 컴포넌트 (React, React Native에서 사용)
│   ├── utils/             # 공통 유틸리티 함수 (API 요청, 데이터 변환 등의 공통 로직)
│   ├── types/             # 모든 프로젝트에서 사용되는 공통 TypeScript 타입 정의
├── package.json           # 공통 의존성 관리
├── pnpm-workspace.yaml    # pnpm 모노레포 설정 파일
└── tsconfig.json          # TypeScript 설정

 

 

 모노레포 설정

 

1. pnpm 설정

//pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

 

2. 공통 의존성 관리

{
  "dependencies": {
    "react": "^18.0.0",
    "react-native": "^0.72.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "eslint": "^8.0.0"
  }
}

 

3. 빌드 스크립트 (package.json)

"scripts": {
  "build:web": "pnpm --filter @ecommerce/web build",
  "build:mobile": "pnpm --filter @ecommerce/mobile build",
  "build:backend": "pnpm --filter @ecommerce/backend build",
  "build:all": "pnpm run build:web && pnpm run build:mobile && pnpm run build:backend"
}

 

 

NPM 패키지 배포

 

1. 프로젝트 초기 설정

mkdir react-use-tabs-ts
cd react-use-tabs-ts
npm init -y

 

- 필수 패키지 설치

npm install react react-dom
npm install -D typescript vite vite-plugin-dts @types/react @types/react-dom

 

2. 프로젝트 구조

react-use-tabs-ts/
  ├── src/
  │   └── index.ts
  ├── package.json
  ├── tsconfig.json
  ├── vite.config.ts
  └── .npmignore

 

3. TypeScript 설정 (tsconfig.json)

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "es6",
    "jsx": "react-jsx",
    "declaration": true,
    "strict": true
  },
  "include": ["src"]
}

 

4. Vite 설정 (vite.config.ts)

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import path from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'react-use-tabs-ts',
      fileName: 'index'
    }
  },
  plugins: [dts()]
});

 

5. NPM 배포

npm run build
npm login
npm publish --access public

 

6. 배포 후 사용 예시 (README.md)

import React from 'react';
import { useTabs, Tabs, Tab } from 'react-use-tabs-ts';

function App() {
  const { currentTab, selectTab } = useTabs('tab1');
  return (
    <Tabs>
      <Tab name="tab1" currentTab={currentTab}>Tab 1 Content</Tab>
    </Tabs>
  );
}

 

 

마무리 - 멜2 클이수마수🎄🎄🎄

 

 

 

 

오늘 그래도 클스 이브 이벤트 야무지게 하구

이제 본가 내려가야징 ^0^)b

내일.. 코딩.. 해야겠지? ㅠㅡㅠ

🎄멜이 클2스마수🎄

 

 

오늘의 KPT 회고

 

Keep: 크리스마스 이브 이벤트로 더 Up된 팀 분위기~🎄

Problem: 이제 마이뻬이지.. 우다다 해야겠지?

Try: 메리 솔로스마스~