제25강: 코드 마이그레이션과 리팩토링 도구

React 클래스 컴포넌트 → 함수형 컴포넌트 변환

// tools/ReactMigrationTool.ts
import { CursorAI } from '@cursor/api';
import { Project, SourceFile, SyntaxKind } from 'ts-morph';
import * as babel from '@babel/core';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import * as t from '@babel/types';

export class ReactMigrationTool {
    private cursor: CursorAI;
    private project: Project;
    private migrationStats: MigrationStats;

    constructor(projectPath: string) {
        this.cursor = new CursorAI();
        this.project = new Project({
            tsConfigFilePath: `${projectPath}/tsconfig.json`
        });
        this.migrationStats = {
            totalComponents: 0,
            migratedComponents: 0,
            errors: [],
            warnings: []
        };
    }

    async migrateToFunctionalComponents(): Promise {
        const files = this.project.getSourceFiles('**/*.{tsx,jsx}');
        
        console.log(`🔍 ${files.length}개 파일 분석 중...`);

        for (const file of files) {
            try {
                await this.migrateFile(file);
            } catch (error) {
                this.migrationStats.errors.push({
                    file: file.getFilePath(),
                    error: error.message
                });
            }
        }

        return this.generateReport();
    }

    private async migrateFile(file: SourceFile): Promise {
        const filePath = file.getFilePath();
        const sourceCode = file.getFullText();

        // AST 파싱
        const ast = babel.parse(sourceCode, {
            sourceType: 'module',
            plugins: ['jsx', 'typescript', 'decorators-legacy'],
            filename: filePath
        });

        let hasChanges = false;

        // 클래스 컴포넌트 찾기 및 변환
        traverse(ast, {
            ClassDeclaration: (path) => {
                if (this.isReactComponent(path.node)) {
                    this.migrationStats.totalComponents++;
                    
                    try {
                        const functionalComponent = this.convertToFunctional(path.node);
                        path.replaceWith(functionalComponent);
                        hasChanges = true;
                        this.migrationStats.migratedComponents++;
                    } catch (error) {
                        this.migrationStats.warnings.push({
                            file: filePath,
                            component: path.node.id?.name || 'Anonymous',
                            reason: error.message
                        });
                    }
                }
            }
        });

        if (hasChanges) {
            // 코드 생성 및 저장
            const { code } = generate(ast, {
                retainLines: true,
                decoratorsBeforeExport: true
            });

            // AI로 코드 최적화
            const optimizedCode = await this.optimizeWithAI(code, filePath);
            
            file.replaceWithText(optimizedCode);
            await file.save();
        }
    }

    private isReactComponent(node: t.ClassDeclaration): boolean {
        if (!node.superClass) return false;
        
        if (t.isMemberExpression(node.superClass)) {
            return (
                t.isIdentifier(node.superClass.object, { name: 'React' }) &&
                t.isIdentifier(node.superClass.property, { name: 'Component' })
            );
        }
        
        return t.isIdentifier(node.superClass, { name: 'Component' });
    }

    private convertToFunctional(classNode: t.ClassDeclaration): t.Node {
        const componentName = classNode.id?.name || 'Component';
        const { state, methods, lifecycle, render } = this.analyzeClass(classNode);

        // 함수형 컴포넌트 생성
        const params = [t.identifier('props')];
        const body = [];

        // State를 useState로 변환
        if (state) {
            body.push(...this.convertStateToHooks(state));
        }

        // Lifecycle 메서드를 useEffect로 변환
        if (lifecycle.length > 0) {
            body.push(...this.convertLifecycleToHooks(lifecycle));
        }

        // 메서드를 함수로 변환
        methods.forEach(method => {
            body.push(this.convertMethodToFunction(method));
        });

        // render 메서드의 내용 추가
        if (render) {
            body.push(...this.extractRenderBody(render));
        }

        // 함수형 컴포넌트 생성
        return t.functionDeclaration(
            t.identifier(componentName),
            params,
            t.blockStatement(body)
        );
    }

    private analyzeClass(classNode: t.ClassDeclaration) {
        const state = this.extractState(classNode);
        const methods = [];
        const lifecycle = [];
        let render = null;

        classNode.body.body.forEach(member => {
            if (t.isClassMethod(member)) {
                const methodName = (member.key as t.Identifier).name;
                
                if (methodName === 'render') {
                    render = member;
                } else if (this.isLifecycleMethod(methodName)) {
                    lifecycle.push(member);
                } else {
                    methods.push(member);
                }
            }
        });

        return { state, methods, lifecycle, render };
    }

    private convertStateToHooks(state: any): t.Statement[] {
        const statements = [];
        
        Object.entries(state).forEach(([key, value]) => {
            const stateVar = t.identifier(key);
            const setterName = `set${key.charAt(0).toUpperCase()}${key.slice(1)}`;
            const setter = t.identifier(setterName);
            
            // const [state, setState] = useState(initialValue);
            statements.push(
                t.variableDeclaration('const', [
                    t.variableDeclarator(
                        t.arrayPattern([stateVar, setter]),
                        t.callExpression(
                            t.identifier('useState'),
                            [this.valueToAST(value)]
                        )
                    )
                ])
            );
        });

        return statements;
    }

    private convertLifecycleToHooks(lifecycle: t.ClassMethod[]): t.Statement[] {
        const statements = [];

        lifecycle.forEach(method => {
            const methodName = (method.key as t.Identifier).name;
            
            switch (methodName) {
                case 'componentDidMount':
                    statements.push(
                        t.expressionStatement(
                            t.callExpression(t.identifier('useEffect'), [
                                t.arrowFunctionExpression(
                                    [],
                                    method.body
                                ),
                                t.arrayExpression([]) // 빈 의존성 배열
                            ])
                        )
                    );
                    break;
                    
                case 'componentDidUpdate':
                    statements.push(
                        t.expressionStatement(
                            t.callExpression(t.identifier('useEffect'), [
                                t.arrowFunctionExpression(
                                    [],
                                    method.body
                                )
                                // 의존성 배열 없음 - 모든 업데이트에서 실행
                            ])
                        )
                    );
                    break;
                    
                case 'componentWillUnmount':
                    // useEffect cleanup으로 변환
                    statements.push(
                        t.expressionStatement(
                            t.callExpression(t.identifier('useEffect'), [
                                t.arrowFunctionExpression(
                                    [],
                                    t.blockStatement([
                                        t.returnStatement(
                                            t.arrowFunctionExpression(
                                                [],
                                                method.body
                                            )
                                        )
                                    ])
                                ),
                                t.arrayExpression([])
                            ])
                        )
                    );
                    break;
            }
        });

        return statements;
    }

    private async optimizeWithAI(code: string, filePath: string): Promise {
        const prompt = `
React 함수형 컴포넌트로 변환된 코드를 최적화해주세요:

파일: ${filePath}
코드:
\`\`\`typescript
${code}
\`\`\`

다음 사항을 개선해주세요:
1. 불필요한 re-render를 방지하기 위한 useMemo, useCallback 사용
2. 커스텀 훅으로 로직 분리
3. TypeScript 타입 개선
4. 코드 가독성 향상
5. React 최신 패턴 적용
`;

        const optimizedCode = await this.cursor.ai.generateCode(prompt);
        return optimizedCode;
    }

    private generateReport(): MigrationReport {
        return {
            summary: {
                totalComponents: this.migrationStats.totalComponents,
                migratedComponents: this.migrationStats.migratedComponents,
                failedComponents: this.migrationStats.totalComponents - this.migrationStats.migratedComponents,
                successRate: (this.migrationStats.migratedComponents / this.migrationStats.totalComponents * 100).toFixed(2) + '%'
            },
            errors: this.migrationStats.errors,
            warnings: this.migrationStats.warnings,
            recommendations: this.generateRecommendations()
        };
    }

    private generateRecommendations(): string[] {
        const recommendations = [];
        
        if (this.migrationStats.warnings.length > 0) {
            recommendations.push(
                '일부 컴포넌트는 수동 검토가 필요합니다. 특히 복잡한 생명주기 로직이나 HOC를 사용하는 경우입니다.'
            );
        }
        
        recommendations.push(
            'React.memo()를 사용하여 성능 최적화를 고려하세요.',
            '커스텀 훅을 만들어 로직을 재사용하세요.',
            'Suspense와 Error Boundaries를 도입하여 에러 처리를 개선하세요.'
        );
        
        return recommendations;
    }
}

// 대규모 리팩토링 도구
export class LargeScaleRefactoringTool {
    private cursor: CursorAI;
    private project: Project;
    private refactoringPlan: RefactoringPlan;

    constructor(projectPath: string) {
        this.cursor = new CursorAI();
        this.project = new Project({
            tsConfigFilePath: `${projectPath}/tsconfig.json`
        });
    }

    async planRefactoring(goals: RefactoringGoals): Promise {
        // AI로 리팩토링 계획 생성
        const prompt = `
프로젝트 리팩토링 계획을 수립해주세요:

목표:
${JSON.stringify(goals, null, 2)}

프로젝트 구조:
${this.getProjectStructure()}

다음을 포함한 상세한 계획을 작성해주세요:
1. 리팩토링 단계별 순서
2. 각 단계의 위험도 평가
3. 롤백 전략
4. 테스트 계획
5. 예상 소요 시간
`;

        const planResponse = await this.cursor.ai.generateCode(prompt);
        this.refactoringPlan = JSON.parse(planResponse);
        
        return this.refactoringPlan;
    }

    async executeRefactoring(dryRun: boolean = true): Promise {
        const results: RefactoringResult = {
            stages: [],
            totalChanges: 0,
            success: true,
            rollbackPoints: []
        };

        for (const stage of this.refactoringPlan.stages) {
            console.log(`🔧 ${stage.name} 실행 중...`);
            
            // 롤백 포인트 생성
            if (!dryRun) {
                const rollbackPoint = await this.createRollbackPoint(stage.name);
                results.rollbackPoints.push(rollbackPoint);
            }

            try {
                const stageResult = await this.executeStage(stage, dryRun);
                results.stages.push(stageResult);
                results.totalChanges += stageResult.changedFiles;
                
                // 테스트 실행
                if (!dryRun && stage.runTests) {
                    const testResult = await this.runTests();
                    if (!testResult.success) {
                        throw new Error(`테스트 실패: ${testResult.failedTests.join(', ')}`);
                    }
                }
            } catch (error) {
                results.success = false;
                if (!dryRun) {
                    await this.rollback(results.rollbackPoints[results.rollbackPoints.length - 1]);
                }
                throw error;
            }
        }

        return results;
    }

    private async executeStage(stage: RefactoringStage, dryRun: boolean): Promise {
        const result: StageResult = {
            name: stage.name,
            changedFiles: 0,
            changes: [],
            duration: 0
        };

        const startTime = Date.now();

        switch (stage.type) {
            case 'rename':
                result.changes = await this.executeRename(stage.config, dryRun);
                break;
                
            case 'extract':
                result.changes = await this.executeExtraction(stage.config, dryRun);
                break;
                
            case 'move':
                result.changes = await this.executeMove(stage.config, dryRun);
                break;
                
            case 'pattern-replace':
                result.changes = await this.executePatternReplace(stage.config, dryRun);
                break;
                
            case 'architecture-change':
                result.changes = await this.executeArchitectureChange(stage.config, dryRun);
                break;
        }

        result.changedFiles = result.changes.length;
        result.duration = Date.now() - startTime;

        return result;
    }

    private async executeRename(config: RenameConfig, dryRun: boolean): Promise {
        const changes: Change[] = [];
        
        // 심볼 찾기
        const sourceFiles = this.project.getSourceFiles();
        
        for (const file of sourceFiles) {
            const symbols = file.getDescendantsOfKind(SyntaxKind.Identifier)
                .filter(id => id.getText() === config.oldName);
                
            for (const symbol of symbols) {
                const references = symbol.findReferences();
                
                for (const ref of references) {
                    for (const refEntry of ref.getReferences()) {
                        changes.push({
                            file: refEntry.getSourceFile().getFilePath(),
                            position: refEntry.getTextSpan().getStart(),
                            oldText: config.oldName,
                            newText: config.newName,
                            type: 'rename'
                        });
                        
                        if (!dryRun) {
                            refEntry.getNode().replaceWithText(config.newName);
                        }
                    }
                }
            }
        }
        
        return changes;
    }

    private async executePatternReplace(config: PatternReplaceConfig, dryRun: boolean): Promise {
        const changes: Change[] = [];
        
        // AI로 패턴 매칭 및 변환
        const prompt = `
다음 코드 패턴을 찾아서 변환해주세요:

찾을 패턴:
${config.searchPattern}

변환할 패턴:
${config.replacePattern}

예시:
${config.examples?.map(ex => `
이전: ${ex.before}
이후: ${ex.after}
`).join('\n')}

AST 변환 코드를 생성해주세요.
`;

        const transformCode = await this.cursor.ai.generateCode(prompt);
        
        // 생성된 변환 코드 실행
        const transform = eval(transformCode);
        
        const files = this.project.getSourceFiles(config.filePattern || '**/*.{ts,tsx}');
        
        for (const file of files) {
            const ast = file.compilerNode;
            const transformedAst = transform(ast);
            
            if (transformedAst !== ast) {
                changes.push({
                    file: file.getFilePath(),
                    type: 'pattern-replace',
                    description: `패턴 "${config.searchPattern}" → "${config.replacePattern}"`
                });
                
                if (!dryRun) {
                    file.replaceWithText(transformedAst.getFullText());
                }
            }
        }
        
        return changes;
    }

    private async executeArchitectureChange(config: ArchitectureChangeConfig, dryRun: boolean): Promise {
        const changes: Change[] = [];
        
        // 아키텍처 변경은 복잡하므로 AI의 도움을 받아 계획 수립
        const prompt = `
다음 아키텍처 변경을 수행하는 코드를 생성해주세요:

현재 아키텍처: ${config.from}
목표 아키텍처: ${config.to}

변경 사항:
${config.changes.map(c => `- ${c}`).join('\n')}

다음을 포함해주세요:
1. 파일 이동 계획
2. 인터페이스 변경
3. 의존성 업데이트
4. 점진적 마이그레이션 코드
`;

        const migrationPlan = await this.cursor.ai.generateCode(prompt);
        
        // 계획 실행
        const plan = JSON.parse(migrationPlan);
        
        // 1. 새로운 구조 생성
        if (!dryRun) {
            for (const dir of plan.newDirectories) {
                await this.project.createDirectory(dir);
            }
        }
        
        // 2. 파일 이동 및 변환
        for (const fileMove of plan.fileMoves) {
            const sourceFile = this.project.getSourceFile(fileMove.from);
            if (sourceFile) {
                changes.push({
                    file: fileMove.from,
                    type: 'move',
                    description: `${fileMove.from} → ${fileMove.to}`
                });
                
                if (!dryRun) {
                    // 내용 변환
                    const transformedContent = await this.transformFileForNewArchitecture(
                        sourceFile.getFullText(),
                        fileMove.transformations
                    );
                    
                    // 새 위치에 파일 생성
                    this.project.createSourceFile(fileMove.to, transformedContent);
                    
                    // 기존 파일 삭제
                    sourceFile.delete();
                }
            }
        }
        
        // 3. 의존성 업데이트
        await this.updateDependencies(plan.dependencies, dryRun);
        
        return changes;
    }

    private async transformFileForNewArchitecture(content: string, transformations: any[]): Promise {
        let transformedContent = content;
        
        for (const transformation of transformations) {
            const prompt = `
다음 코드를 ${transformation.description}에 맞게 변환해주세요:

\`\`\`typescript
${transformedContent}
\`\`\`

변환 규칙:
${JSON.stringify(transformation.rules, null, 2)}
`;

            transformedContent = await this.cursor.ai.generateCode(prompt);
        }
        
        return transformedContent;
    }

    private async createRollbackPoint(name: string): Promise {
        // Git stash 또는 브랜치 생성
        const timestamp = new Date().toISOString();
        const rollbackId = `rollback_${name}_${timestamp}`;
        
        // 현재 상태 저장
        await this.executeCommand(`git stash save "${rollbackId}"`);
        
        return {
            id: rollbackId,
            name,
            timestamp,
            files: await this.getModifiedFiles()
        };
    }

    private async rollback(rollbackPoint: RollbackPoint): Promise {
        console.log(`⏪ ${rollbackPoint.name}으로 롤백 중...`);
        await this.executeCommand(`git stash pop`);
    }

    private async runTests(): Promise {
        // 프로젝트의 테스트 명령 실행
        try {
            const output = await this.executeCommand('npm test');
            return {
                success: true,
                output,
                failedTests: []
            };
        } catch (error) {
            return {
                success: false,
                output: error.message,
                failedTests: this.parseFailedTests(error.message)
            };
        }
    }

    private async executeCommand(command: string): Promise {
        const { exec } = require('child_process');
        const { promisify } = require('util');
        const execAsync = promisify(exec);
        
        const { stdout } = await execAsync(command);
        return stdout;
    }
}

// 마이그레이션 전략 생성기
export class MigrationStrategyGenerator {
    private cursor: CursorAI;

    constructor() {
        this.cursor = new CursorAI();
    }

    async generateStrategy(config: MigrationConfig): Promise {
        const prompt = `
다음 마이그레이션을 위한 상세한 전략을 수립해주세요:

현재 상태:
- 기술 스택: ${config.currentStack.join(', ')}
- 코드베이스 크기: ${config.codebaseSize}
- 팀 규모: ${config.teamSize}
- 일일 활성 사용자: ${config.dailyActiveUsers}

목표 상태:
- 기술 스택: ${config.targetStack.join(', ')}
- 목표 기한: ${config.deadline}

제약 사항:
${config.constraints.map(c => `- ${c}`).join('\n')}

다음을 포함한 전략을 제시해주세요:
1. 단계별 마이그레이션 계획
2. 각 단계의 리스크 평가
3. 병렬 실행 vs 점진적 실행 전략
4. 기능 플래그 사용 계획
5. 롤백 계획
6. 모니터링 및 검증 방법
`;

        const strategyResponse = await this.cursor.ai.generateCode(prompt);
        const strategy = JSON.parse(strategyResponse);

        // 전략 검증
        strategy.validationReport = await this.validateStrategy(strategy, config);
        
        return strategy;
    }

    private async validateStrategy(strategy: MigrationStrategy, config: MigrationConfig): Promise {
        const report: ValidationReport = {
            feasible: true,
            risks: [],
            recommendations: []
        };

        // 기한 실현 가능성 검증
        const estimatedDuration = this.estimateDuration(strategy);
        if (estimatedDuration > config.deadline) {
            report.feasible = false;
            report.risks.push({
                level: 'high',
                description: `예상 소요 시간(${estimatedDuration}일)이 목표 기한을 초과합니다.`
            });
        }

        // 리소스 검증
        const requiredResources = this.calculateRequiredResources(strategy);
        if (requiredResources.developers > config.teamSize) {
            report.risks.push({
                level: 'medium',
                description: `필요한 개발자 수(${requiredResources.developers})가 현재 팀 규모를 초과합니다.`
            });
        }

        // 다운타임 리스크 평가
        if (strategy.requiresDowntime && config.dailyActiveUsers > 10000) {
            report.risks.push({
                level: 'high',
                description: '높은 사용자 수로 인해 다운타임이 비즈니스에 큰 영향을 줄 수 있습니다.'
            });
            report.recommendations.push('블루-그린 배포 또는 카나리 배포 전략을 고려하세요.');
        }

        return report;
    }

    private estimateDuration(strategy: MigrationStrategy): number {
        return strategy.phases.reduce((total, phase) => {
            return total + phase.estimatedDays;
        }, 0);
    }

    private calculateRequiredResources(strategy: MigrationStrategy): RequiredResources {
        const maxConcurrentTasks = Math.max(...strategy.phases.map(p => p.tasks.length));
        
        return {
            developers: Math.ceil(maxConcurrentTasks / 2), // 2 tasks per developer
            qaEngineers: Math.ceil(maxConcurrentTasks / 4), // 4 tasks per QA
            devOpsEngineers: strategy.phases.some(p => p.requiresInfraChange) ? 2 : 1
        };
    }
}