선언적 프로그래밍에 대한 착각과 오해

function getUserInfo(userId) {
  const connection = connectDB();
  const userRow = connection.query('SELECT * FROM users WHERE id = ?', userId);
  const permissionRows = connection.query('SELECT * FROM permissions WHERE user_id = ?', userId);
  
  const user = {
    id: userRow.id,
    name: userRow.name,
    email: userRow.email,
    permissions: permissionRows.map(row => row.permission_name)
  };
  
  if (user.name) {
    user.displayName = user.name.toUpperCase();
  }
  
  return user;
}

// 선언적 접근 - 데이터 변환 관계에 집중
const getUserInfo = (userId) => 
  pipe(
    fetchUserFromDB,
    addUserPermissions,
    formatUserData
  )(userId);

// 또는 더 명확하게
const getUserInfo = (userId) => 
  formatUserData(
    addUserPermissions(
      fetchUserFromDB(userId)
    )
  );

// 배열 메소드를 사용했지만 절차적 사고
function processItems(items) {
  return items
    .map(item => {
      let price = item.basePrice;

      if (item.discount) {
        price = price * (1 - item.discount);
      }

      price = price * 1.1;

      return { ...item, finalPrice: Math.round(price * 100) / 100 };
    })
    .filter(item => item.finalPrice > 0);
}

// 진정한 선언적 접근
const processItems = (items) =>
  items
    .map(applyDiscount)
    .map(addTax)
    .map(formatPrice)
    .filter(hasValidPrice);

const applyDiscount = (item) => ({
  ...item,
  price: item.basePrice * (1 - (item.discount || 0))
});

const addTax = (item) => ({
  ...item,
  price: item.price * 1.1
});

const formatPrice = (item) => ({
  ...item,
  finalPrice: Math.round(item.price * 100) / 100
});

const hasValidPrice = (item) => item.finalPrice > 0;

// 절차적 프로그래밍 - 어떻게(How) 할 것인가에 집중
function calculateTotalPrice(items) {
  let total = 0;
  
  // 단계 1: 각 아이템을 순회
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    
    // 단계 2: 유효성 검사
    if (item.quantity > 0) {
      // 단계 3: 기본 가격 계산
      let itemPrice = item.price * item.quantity;
      
      // 단계 4: 할인 적용
      if (item.discount) {
        itemPrice = itemPrice - (itemPrice * item.discount);
      }
      
      // 단계 5: 총합에 누적
      total = total + itemPrice;
    }
  }
  
  return total;
}

// 선언적 프로그래밍 - 무엇을(What) 원하는가에 집중
const calculateTotalPrice = (items) =>
  items
    .filter(hasValidQuantity)
    .map(calculateItemPrice)
    .reduce(sum, 0);

const hasValidQuantity = (item) => item.quantity > 0;
const calculateItemPrice = (item) => 
  item.price * item.quantity * (1 - (item.discount || 0));
const sum = (a, b) => a + b;

function createUserProfile(user) {
  const container = document.createElement('div');
  container.className = 'user-profile';
  
  const nameElement = document.createElement('h2');
  nameElement.textContent = user.name;
  container.appendChild(nameElement);
  
  const emailElement = document.createElement('p');
  emailElement.textContent = user.email;
  container.appendChild(emailElement);
  
  if (user.avatar) {
    const avatarElement = document.createElement('img');
    avatarElement.src = user.avatar;
    avatarElement.alt = `${user.name}의 아바타`;
    container.appendChild(avatarElement);
  }
  
  return container;
}

function UserProfile({ user }) {
  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      {user.avatar && (
        <img src={user.avatar} alt={`${user.name}의 아바타`} />
      )}
    </div>
  );
}

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <TodoItem 
        key={todo.id} 
        text={todo.text} 
        completed={todo.completed} 
      />
    ))}
  </ul>
);

function createTodoList(todos) {
  const ul = document.createElement('ul');
  
  for (let i = 0; i < todos.length; i++) {
    const li = document.createElement('li');
    li.textContent = todos[i].text;
    if (todos[i].completed) {
      li.classList.add('completed');
    }
    ul.appendChild(li);
  }
  
  return ul;
}

// 구조적 관계의 선언
const UserCard = ({ user }) => (
  <div className="user-card">
    <Avatar src={user.avatar} />
    <UserInfo name={user.name} email={user.email} />
  </div>
);

// 애플리케이션 레벨 - 선언적
function useUserData(userId) {
  return useQuery(['user', userId], () => fetchUser(userId));
}

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useUserData(userId);
  
  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  
  return <div>{user.name}</div>;
}

// 비즈니스 로직 레벨 - 선언적
async function processOrder(order) {
  const validatedOrder = await validateOrder(order);
  const payment = await processPayment(validatedOrder);
  const shipment = await scheduleShipment(validatedOrder);
  
  return createOrderConfirmation(validatedOrder, payment, shipment);
}

// 인프라 레벨 - 절차적
async function processPayment(order) {
  const paymentGateway = new PaymentGateway(process.env.PAYMENT_API_KEY);
  
  try {
    const paymentRequest = {
      amount: order.total,
      currency: order.currency,
      source: order.paymentMethod
    };
    
    const response = await paymentGateway.charge(paymentRequest);
    
    if (response.status === 'succeeded') {
      await database.payments.create({
        orderId: order.id,
        paymentId: response.id,
        amount: response.amount,
        status: 'completed'
      });
      
      return { success: true, paymentId: response.id };
    } else {
      throw new PaymentError(response.error);
    }
  } catch (error) {
    await logger.error('Payment processing failed', { orderId: order.id, error });
    throw error;
  }
}

// 좋은 예: 명확한 레벨 분리

// 비즈니스 레벨 - 선언적
const ShoppingCart = ({ items, onCheckout }) => (
  <div className="shopping-cart">
    <ItemList items={items} />
    <TotalPrice items={items} />
    <CheckoutButton onClick={() => onCheckout(items)} />
  </div>
);

// 프레젠테이션 레벨 - 선언적
const ItemList = ({ items }) => (
  <ul className="item-list">
    {items.map(item => (
      <ItemCard key={item.id} item={item} />
    ))}
  </ul>
);

// 인프라 레벨 - 절차적이어도 OK
function calculateTotalWithTax(items, taxRate) {
  let subtotal = 0;
  
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }
  
  const tax = subtotal * taxRate;
  return subtotal + tax;
}

// 절차적 접근 - 상태가 어떻게 변하는지에 집중
function useAsyncData<T>(fetcher: () => Promise<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 1단계: 로딩 상태로 전환
    setLoading(true);
    setError(null);
    setData(null);

    fetcher()
      .then(result => {
        // 2단계: 성공 상태로 전환
        setData(result);
        setLoading(false);
      })
      .catch(err => {
        // 3단계: 에러 상태로 전환
        setError(err.message);
        setLoading(false);
        setData(null);
      });
  }, [fetcher]);

  return { data, loading, error };
}

// 선언적 접근 - 가능한 상태가 무엇인지에 집중
type AsyncDataState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function useAsyncData<T>(fetcher: () => Promise<T>): AsyncDataState<T> {
  const [state, setState] = useState<AsyncDataState<T>>({ status: 'idle' });

  useEffect(() => {
    setState({ status: 'loading' });
    
    fetcher()
      .then(data => setState({ status: 'success', data }))
      .catch(error => setState({ status: 'error', error: error.message }));
  }, [fetcher]);

  return state;
}

// TypeScript가 컴파일 타임에 강제하는 안전성
function handleAsyncState<T>(state: AsyncDataState<T>) {
  switch (state.status) {
    case 'idle':
      return "아직 시작하지 않음";
    
    case 'loading':
      return "로딩 중...";
      // 여기서 state.data나 state.error 접근 시 컴파일 에러
    
    case 'success':
      return `데이터: ${state.data}`;
      // 여기서는 state.data가 확실히 존재
      // state.error 접근 시 컴파일 에러
    
    case 'error':
      return `에러: ${state.error}`;
      // 여기서는 state.error가 확실히 존재
      // state.data 접근 시 컴파일 에러
    
    default:
      // TypeScript가 모든 case를 다뤘는지 검증
      const exhaustiveCheck: never = state;
      return exhaustiveCheck;
  }
}

// 첫 번째 방식 - 모든 조합을 수동으로 처리
function DataDisplay<T>({ fetcher, render }: { 
  fetcher: () => Promise<T>; 
  render: (data: T) => React.ReactNode; 
}) {
  const { data, loading, error } = useAsyncData(fetcher);

  // 개발자가 모든 경우의 수를 수동으로 고려해야 함
  if (loading && !error && !data) return <LoadingSpinner />;
  if (error && !loading) return <ErrorMessage error={error} />;
  if (data && !loading && !error) return render(data);
  
  // 예상치 못한 상태 조합들은 어떻게 처리할까?
  // { loading: true, data: someData, error: null } 같은 경우는?
  return <div>알 수 없는 상태</div>;
}

// 두 번째 방식 - 타입이 모든 경우를 보장
function DataDisplay<T>({ fetcher, render }: { 
  fetcher: () => Promise<T>; 
  render: (data: T) => React.ReactNode; 
}) {
  const state = useAsyncData(fetcher);

  // TypeScript가 모든 case를 처리했는지 검증
  switch (state.status) {
    case 'idle':
      return <div>준비 중...</div>;
      
    case 'loading':
      return <LoadingSpinner />;
      
    case 'success':
      // state.data가 확실히 T 타입으로 존재
      return render(state.data);
      
    case 'error':
      // state.error가 확실히 존재
      return <ErrorMessage error={state.error} />;
      
    // TypeScript가 모든 case를 다뤘는지 컴파일 타임에 검증
    // 새로운 상태가 추가되면 컴파일 에러로 알려줌
  }
}

// 첫 번째 방식 - 여러 변수를 모두 수정해야 함
const [retrying, setRetrying] = useState(false);
const [stale, setStale] = useState(false);

// 각 상태 변화마다 다른 모든 상태들과의 조합을 고려해야 함
// 16가지 boolean 조합 중 논리적으로 말이 되는 것은 몇 개일까?

// 두 번째 방식 - 타입 정의만 확장
type AsyncDataState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'retrying'; previousError: string; attempt: number }
  | { status: 'success'; data: T; stale?: boolean }
  | { status: 'error'; error: string };

// TypeScript가 모든 사용처에서 새로운 case 처리를 강제
// 컴파일 에러를 통해 놓친 부분을 알려줌

// 앞서 다룬 AsyncDataState 예시 재활용
type AsyncDataState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

// JSX 예시 재활용 - 구조적 관계를 명확히 선언
const UserProfile = ({ user }) => (
  <div className="user-profile">
    <h2>{user.name}</h2>
    <p>{user.email}</p>
    {user.avatar && <img src={user.avatar} alt={`${user.name}의 아바타`} />}
  </div>
);

// 변환 관계를 명확히 선언
const processUserData = (rawUsers: RawUser[]) =>
  rawUsers
    .filter(isActiveUser)
    .map(normalizeUserData)
    .map(addComputedFields)
    .sort(byLastLoginDate);

// 앞서 다룬 계산 로직 예시 재활용
function calculateTotalWithTax(items, taxRate) {
  let subtotal = 0;
  
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }
  
  const tax = subtotal * taxRate;
  return subtotal + tax;
}

// 복잡한 에러 처리와 재시도 로직
async function retryWithBackoff<T>(
  operation: () => Promise<T>,
  maxAttempts: number = 3
): Promise<T> {
  let lastError: Error;
  
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await operation();
    } catch (error) {
      lastError = error as Error;
      
      if (attempt === maxAttempts) {
        throw lastError;
      }
      
      const delay = Math.pow(2, attempt - 1) * 1000;
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
  
  throw lastError!;
}