이온디

🏆 개발 속도 및 난이도 비교

결론: 모듈 컨텍스트 방식이 압도적으로 쉽고 빠름

📊 실전 개발 시간 비교

💡 코드량 비교

모듈 컨텍스트 방식 (qna.blade.php)

@if($document_list) @foreach($document_list as $document)

{{ $document->getTitleText() }}

{{ $document->getSummary(100) }}

{{ $page_navigation }}

@if($grant->write_document) 글쓰기 @endif

작성 코드: 약 50줄 필요한 지식: Blade 문법만 알면 됨 에러 발생률: 거의 없음 (Rhymix가 다 처리)

API 방식 (expert.blade.php)

// 1. API 엔드포인트 호출 (30줄) async function loadDocuments(page = 1) { try { const response = await fetch(/api/boards/expert?page=${page}); if (!response.ok) throw new Error('API 오류'); const data = await response.json();

      if (data.status !== 1) {
          throw new Error(data.message);
      }

      renderDocuments(data.payload.documents);
      renderPagination(data.payload.total_page, page);
  } catch (error) {
      console.error('로딩 실패:', error);
      showError(error.message);
  }

}

// 2. 렌더링 함수 (50줄) function renderDocuments(documents) { const container = document.getElementById('document-list');

  if (!documents || documents.length === 0) {
      container.innerHTML = '
게시글이 없습니다.
';
      return;
  }

  container.innerHTML = documents.map(doc => `
      
          
${escapeHtml(doc.title)}
          
${escapeHtml(doc.content)}
          ${formatDate(doc.regdate)}
      
  `).join('');

}

// 3. 페이징 함수 (40줄) function renderPagination(totalPage, currentPage) { const pagination = document.getElementById('pagination'); let html = '';

  for (let i = 1; i <= totalPage; i++) {
      html += `
               ${i}
               `;
  }

  pagination.innerHTML = html;

}

// 4. 유틸리티 함수 (30줄) function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }

function formatDate(dateString) { const date = new Date(dateString); return date.toLocaleDateString('ko-KR'); }

function showError(message) { alert('오류: ' + message); }

// 5. 글쓰기 폼 (100줄) async function submitDocument(formData) { // CSRF 토큰 추가 const metaToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); if (!metaToken) { alert('보안 토큰이 없습니다.'); return; }

  formData.append('_rx_csrf_token', metaToken);
  formData.append('act', 'procBoardInsertDocument');

  try {
      const response = await fetch('/index.php', {
          method: 'POST',
          body: formData,
          credentials: 'same-origin'
      });

      // procBoardInsertDocument는 JSON이 아닌 HTML 리다이렉트!
      if (response.status === 200) {
          alert('저장되었습니다.');
          // 목록 새로고침
          loadDocuments();
      } else {
          throw new Error('저장 실패');
      }
  } catch (error) {
      alert('오류: ' + error.message);
  }

}

// 6. 권한 체크 (20줄) async function checkWritePermission() { const response = await fetch('/api/boards/expert'); const data = await response.json();

  if (!data.payload.grant.write_document) {
      alert('권한이 없습니다.');
      return false;
  }
  return true;

}

// 7. 초기화 (10줄) document.addEventListener('DOMContentLoaded', () => { loadDocuments(); });

작성 코드: 약 280줄 필요한 지식: JavaScript, async/await, Fetch API, DOM 조작, 에러 핸들링, CSRF 토큰 에러 발생률: 높음 (네트워크, JSON 파싱, CSRF, 권한 등)

😱 API 방식의 실제 함정들

1. procBoard 액션은 JSON이 아님!*

// ❌ 이렇게 하면 에러남 const result = await response.json(); // SyntaxError!

// ✅ 상태 코드로 판단해야 함 if (response.status === 200) { // 성공 }

1. CSRF 토큰 필수

// 이거 없으면 403 Forbidden const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); params.append('_rx_csrf_token', token);

1. 권한 체크 직접 구현

// 모듈 컨텍스트: @if($grant->write_document) - 끝 // API 방식: 별도 API 호출 + 조건 체크 + UI 업데이트

1. 페이징 직접 구현

// 모듈 컨텍스트: {{ $page_navigation }} - 끝 // API 방식: 50줄 JavaScript 코드 작성

🎯 실제 개발 시나리오

시나리오: "게시판 목록 + 글쓰기 + 댓글" 구현

모듈 컨텍스트 (1시간)

1. Blade 파일 생성 (10분)
2. 템플릿 작성 (30분)
3. 스타일링 (20분)
4. 끝!

API 방식 (6-8시간)

1. API 엔드포인트 확인/생성 (1시간)
2. JavaScript 코드 작성 (2시간)
3. CSRF 토큰 처리 (30분)
4. 권한 체크 구현 (1시간)
5. 에러 핸들링 (1시간)
6. 디버깅 (1-2시간)
7. 스타일링 (30분)

📈 학습 곡선

난이도 (1-10)

모듈 컨텍스트: ⭐⭐⭐ (3/10)

• Blade 문법 (Laravel과 유사)
• Rhymix 변수명만 알면 됨

API 방식: ⭐⭐⭐⭐⭐⭐⭐⭐ (8/10)

• JavaScript ES6+
• async/await
• Fetch API
• DOM 조작
• 에러 핸들링
• CSRF 보안
• Rhymix proc* 액션의 특이한 응답 방식

✅ 최종 답변

개발 속도: 모듈 컨텍스트 8배 빠름

• 모듈 컨텍스트: 1시간
• API 방식: 8시간

개발 난이도: 모듈 컨텍스트 훨씬 쉬움

• 모듈 컨텍스트: 초급 개발자도 가능
• API 방식: 중급 이상 필요

언제 API 방식을 써야 하나?

1. React/Vue 같은 프론트엔드 프레임워크 사용 시
2. 모바일 앱 개발 시
3. 실시간 업데이트 필요 시
4. 복잡한 클라이언트 사이드 로직 필요 시

결론:

지금 el_d1 레이아웃 개발하는 상황이면 무조건 모듈 컨텍스트 방식 추천!

• Expert 페이지도 모듈 컨텍스트로 변경하는 게 빠름
• QnA 페이지는 이미 모듈 컨텍스트로 잘 구현됨

둘 다 모듈 컨텍스트로 가면 2-3시간 안에 완성 가능!