클린 코드의 중요한 원칙 중 하나는 "좋은 이름 짓기"입니다.

이번 활동에서는 좋은 이름의 중요성을 배우고, 코드에서의 적용 방법을 체험해보는 시간을 가지려 합니다.

interface UserDetailData {
    fullName: string;
  age: number;
    activeStatusFlag: boolean;
    value: string;
    detailsString: string;
}

function getUserValue(input: string | number) { 
    return input === 'admin' ? { role: 'admin', permissions: ['read', 'write'] } : null;
}

function handleUserInfo(userData: UserDetailData): void {
    console.log(`User: ${userData.fullName}, Status: ${userData.activeStatusFlag ? 'Active' : 'Inactive'}`);
}

function transformUserData(data: any): object {
    return { transformedData: data, timestamp: new Date() };
}

interface ProductInfoObject {
    productName: string;
    productCost: number;
    inStock: boolean;
    configData: Record<string, string>;
    identifier: number | string;
}

function handleProductInfo(config: object) {
    console.log('Product configuration:', config);
}

function mapProductData(item: ProductInfoObject): string {
    return `Product: ${item.productName} - Cost: ${item.productCost}`;
}

function calculatePricing(details: any): number {
    return details.basePrice ? details.basePrice * 1.1 : 0;
}

interface OrderInfo {
    orderId: string;
    totalAmount: number;
    isCompleted: boolean;
    misc: string;
    orderDataArray: Array<OrderInfo>;
}

function processOrderItems(items: Array) {
    items.forEach(item => console.log(`Processing item: ${item}`));
}

function verifyOrderCompletion(order: OrderInfo): boolean {
    return order.isCompleted && order.totalAmount > 0;
}

function handleOrderData(data: any): void {
    console.log('Order Data:', data);
}

const UserProfileCard = ({ userProfile }: { userProfile: UserDetailData }) => (
    <div className="user-profile-card">
        <h3>{userProfile.fullName}</h3>
        <p>{userProfile.activeStatusFlag ? 'Active' : 'Inactive'}</p>
        <span>Additional Info: {userProfile.value}</span>
    </div>
);

const ProductInfoDisplay = ({ product }: { product: ProductInfoObject }) => (
    <div className="product-info-display">
        <h3>{product.productName}</h3>
        <p>Price: ${product.productCost}</p>
        <p>Config: {JSON.stringify(product.configData)}</p>
        <span>ID: {product.identifier}</span>
    </div>
);

const OrderSummary = ({ orderData }: { orderData: OrderInfo }) => (
    <div className="order-summary">
        <h3>Order ID: {orderData.orderId}</h3>
        <p>Total Amount: ${orderData.totalAmount}</p>
        <p>Status: {orderData.isCompleted ? 'Completed' : 'Pending'}</p>
        <span>Miscellaneous: {JSON.stringify(orderData.misc)}</span>
    </div>
);

1. 코드 분석 및 문제점 파악

제시된 코드를 함께 살펴보면서 변수, 함수, 인터페이스 등에서 이름이 모호하거나 일관되지 않은 부분을 찾아보세요. 각자 문제점을 파악하고, 그것이 왜 나쁜 코드인지 고민해 보세요.

2. 개인적으로 개선 코드 만들어보기

각자가 파악한 문제점을 바탕으로 개인적으로 코드를 개선해 보세요. 이름을 더 명확하고 의미 있게 수정하고 근거를 고민해보세요.

(충분히 각자 말 없이 개인적으로 5~10분간 충분히 고민을 한 다음 적어두세요. 그리고 돌아가면서 이야기 할 거에요.)

3. 개선 의견 나누기

이제, 각자 만든 개선 코드를 팀원들과 공유하세요. "이 이름이 왜 나쁜지", "어떻게 개선했는지"를 설명하면서 서로의 개선 방향과 아이디어를 나누어 보세요. 다른 팀원들의 의견을 듣고 비교하며, 서로의 코드를 평가해보는 시간을 가져보세요.

4. 최종 합의 및 컨벤션 만들기

모든 의견이 나온 후에는, 팀원들이 가장 합리적이라고 생각하는 개선 방향에 대해 합의하는 과정을 거치세요. 합의된 내용을 바탕으로, 좋은 이름을 짓기 위한 규칙과 컨벤션을 만들어 보세요. 이 규칙은 앞으로의 프로젝트에서도 일관성을 유지할 수 있는 좋은 기준이 될 것입니다.