실용적인 예제
Text Diff 도구가 다양한 시나리오에서 어떻게 사용될 수 있는지 보여주는 실용적인 예제 모음입니다.
코드 개발
JavaScript 함수 업데이트
파일 A (원본):
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
파일 B (개선됨):
function calculateTotal(items) {
if (!items || items.length === 0) {
return 0;
}
return items.reduce((total, item) => {
return total + (item.price || 0);
}, 0);
}
Diff 결과:
+ 2 2 | if (!items || items.length === 0) {
+ 3 3 | return 0;
+ 4 4 | }
+ 5 5 |
- 2 6 | let total = 0;
- 3 7 | for (let i = 0; i < items.length; i++) {
- 4 8 | total += items[i].price;
- 5 9 | }
- 6 10 | return total;
+ 6 7 | return items.reduce((total, item) => {
+ 7 8 | return total + (item.price || 0);
+ 8 9 | }, 0);
React 컴포넌트 리팩토링
파일 A (클래스 컴포넌트):
import React, { Component } from 'react';
class UserProfile extends Component {
constructor(props) {
super(props);
this.state = {
user: null,
loading: true,
};
}
componentDidMount() {
this.fetchUser();
}
fetchUser = async () => {
try {
const response = await fetch(`/api/users/${this.props.userId}`);
const user = await response.json();
this.setState({ user, loading: false });
} catch (error) {
console.error('Error fetching user:', error);
this.setState({ loading: false });
}
};
render() {
const { user, loading } = this.state;
if (loading) return <div>로딩 중...</div>;
if (!user) return <div>사용자를 찾을 수 없습니다</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
}
파일 B (훅을 사용한 함수 컴포넌트):
import React, { useState, useEffect } from 'react';
const UserProfile = ({ userId }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUser = async () => {
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
setUser(userData);
} catch (error) {
console.error('Error fetching user:', error);
} finally {
setLoading(false);
}
};
fetchUser();
}, [userId]);
if (loading) return <div>로딩 중...</div>;
if (!user) return <div>사용자를 찾을 수 없습니다</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
};
설정 관리
Docker Compose 설정
파일 A (개발):
version: '3.8'
services:
web:
build: .
ports:
- '3000:3000'
environment:
- NODE_ENV=development
- DATABASE_URL=postgresql://localhost:5432/myapp_dev
volumes:
- .:/app
- /app/node_modules
database:
image: postgres:13
environment:
- POSTGRES_DB=myapp_dev
- POSTGRES_USER=dev
- POSTGRES_PASSWORD=dev123
ports:
- '5432:5432'
파일 B (프로덕션):
version: '3.8'
services:
web:
build: .
ports:
- '80:3000'
environment:
- NODE_ENV=production
- DATABASE_URL=${DATABASE_URL}
restart: unless-stopped
depends_on:
- database
database:
image: postgres:13
environment:
- POSTGRES_DB=${POSTGRES_DB}
- POSTGRES_USER=${POSTGRES_USER}
- POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
volumes:
- postgres_data:/var/lib/postgresql/data
restart: unless-stopped
volumes:
postgres_data:
Package.json 의존성
파일 A (업데이트 전):
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"axios": "^0.21.1",
"lodash": "^4.17.20"
},
"devDependencies": {
"@types/react": "^17.0.0",
"typescript": "^4.2.3",
"webpack": "^5.24.0"
}
}
파일 B (업데이트 후):
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"axios": "^1.3.0",
"lodash": "^4.17.21"
},
"devDependencies": {
"@types/react": "^18.0.0",
"typescript": "^4.9.0",
"webpack": "^5.75.0",
"vite": "^4.0.0"
}
}
API 개발
OpenAPI 사양
파일 A (버전 1.0):
openapi: 3.0.0
info:
title: User API
version: 1.0.0
description: 사용자 관리를 위한 API
paths:
/users:
get:
summary: 모든 사용자 가져오기
responses:
'200':
description: 사용자 목록
content:
application/json:
schema:
type: array
items:
$ref: '#/components/schemas/User'
components:
schemas:
User:
type: object
properties:
id:
type: integer
name:
type: string
email:
type: string
파일 B (버전 2.0):
openapi: 3.0.0
info:
title: User API
version: 2.0.0
description: 사용자 관리를 위한 향상된 API
paths:
/users:
get:
summary: 모든 사용자 가져오기
parameters:
- name: limit
in: query
schema:
type: integer
default: 10
- name: offset
in: query
schema:
type: integer
default: 0
responses:
'200':
description: 페이지네이션된 사용자 목록
content:
application/json:
schema:
$ref: '#/components/schemas/UserList'
'400':
description: 잘못된 요청
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
/users/{id}:
get:
summary: ID로 사용자 가져오기
parameters:
- name: id
in: path
required: true
schema:
type: integer
responses:
'200':
description: 사용자 세부 정보
content:
application/json:
schema:
$ref: '#/components/schemas/User'
'404':
description: 사용자를 찾을 수 없음
components:
schemas:
User:
type: object
properties:
id:
type: integer
name:
type: string
email:
type: string
createdAt:
type: string
format: date-time
updatedAt:
type: string
format: date-time
UserList:
type: object
properties:
users:
type: array
items:
$ref: '#/components/schemas/User'
total:
type: integer
limit:
type: integer
offset:
type: integer
Error:
type: object
properties:
message:
type: string
code:
type: string
문서화
README Markdown
파일 A (기본 버전):
# 내 프로젝트
React로 구축된 간단한 웹 애플리케이션.
## 설치
```bash
npm install
```
사용법
npm start
기능
- 사용자 인증
- 데이터 시각화
- 반응형 디자인
**파일 B (확장 버전):**
```markdown
# 내 프로젝트
실시간 데이터 시각화와 고급 사용자 관리 기능을 갖춘 React와 TypeScript로 구축된 현대적인 웹 애플리케이션.
## 목차
- [설치](#설치)
- [사용법](#사용법)
- [기능](#기능)
- [API 문서](#api-문서)
- [기여](#기여)
- [라이선스](#라이선스)
## 설치
### 전제 조건
- Node.js 16.0 이상
- npm 8.0 이상
### 설정
```bash
# 저장소 클론
git clone https://github.com/user/my-project.git
cd my-project
# 의존성 설치
npm install
# 환경 변수 설정
cp .env.example .env
사용법
개발
npm run dev
프로덕션
npm run build
npm start
기능
주요 기능
- 사용자 인증: JWT 토큰을 사용한 안전한 로그인
- 데이터 시각화: 대화형 차트와 테이블
- 반응형 디자인: 모바일 우선 접근법
- 실시간 업데이트: WebSocket 통합
- API 통합: GraphQL 지원이 있는 RESTful API
고급 기능
- 다크 모드: 라이트 테마와 다크 테마 전환
- 국제화: 다국어 지원
- 접근성: WCAG 2.1 AA 준수
- 성능: 최적화된 번들 크기와 로딩 시간
API 문서
자세한 API 문서는 API.md를 참조하세요.
기여
- 저장소 포크
- 기능 브랜치 생성
- 변경사항 적용
- 테스트 추가
- 풀 리퀘스트 제출
라이선스
MIT 라이선스 - 자세한 내용은 LICENSE를 참조하세요.
## 데이터 분석
### **JSON 설정**
**파일 A (개발 설정):**
```json
{
"database": {
"host": "localhost",
"port": 5432,
"name": "myapp_dev",
"username": "dev_user",
"password": "dev_password"
},
"redis": {
"host": "localhost",
"port": 6379,
"password": null
},
"logging": {
"level": "debug",
"file": "logs/app.log"
},
"features": {
"enableAnalytics": false,
"enableDebugMode": true,
"enableExperimentalFeatures": true
}
}
파일 B (프로덕션 설정):
{
"database": {
"host": "prod-db.example.com",
"port": 5432,
"name": "myapp_prod",
"username": "prod_user",
"password": "${DB_PASSWORD}",
"ssl": true,
"pool": {
"min": 5,
"max": 20
}
},
"redis": {
"host": "prod-redis.example.com",
"port": 6379,
"password": "${REDIS_PASSWORD}",
"cluster": {
"enabled": true,
"nodes": ["redis-1.example.com:6379", "redis-2.example.com:6379", "redis-3.example.com:6379"]
}
},
"logging": {
"level": "info",
"file": "/var/log/myapp/app.log",
"maxSize": "100MB",
"maxFiles": 5
},
"features": {
"enableAnalytics": true,
"enableDebugMode": false,
"enableExperimentalFeatures": false
},
"monitoring": {
"enabled": true,
"endpoint": "https://monitoring.example.com",
"apiKey": "${MONITORING_API_KEY}"
}
}
모범 사례
효과적인 사용
- 정기적인 비교: 변경사항을 추적하기 위해 파일을 정기적으로 비교
- 설명적인 이름: 파일에 의미 있는 이름 사용
- 기록 활용: 중요한 비교를 기록에 저장
- 옵션 조정: 다양한 비교 옵션 실험
성능 팁
- 파일 크기: 최적의 성능을 위해 10,000줄 미만의 파일 유지
- 브라우저 캐시: 문제가 있을 경우 브라우저 캐시 지우기
- 최신 브라우저: 최신 브라우저 버전 사용
보안 주의사항
- 민감한 데이터: 비밀번호나 API 키 비교 피하기
- 로컬 처리: 모든 처리가 브라우저에서 로컬로 실행
- 기록 정리: 기록을 정기적으로 삭제
이러한 예제는 Text Diff 도구의 다양성과 다양한 애플리케이션 시나리오에서의 위력을 보여줍니다.