실전 프로젝트 - CI4 View에 완성형 React 컴포넌트 통합
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. CI4 PHP View 파일에 React를 CDN으로 통합할 때 script 태그에 반드시 설정해야 하는 type 속성은?
💡 CDN 방식으로 React를 사용할 때 JSX 문법을 사용하려면 Babel Standalone CDN을 포함하고, 스크립트 태그에 type="text/babel"을 설정해야 합니다. 이 설정이 없으면 브라우저가 JSX 문법을 파싱하지 못합니다.
Q2. CI4 PHP View에서 PHP 데이터를 JavaScript로 안전하게 전달하는 올바른 방법은?
💡 json_encode()에 JSON_HEX_TAG, JSON_HEX_APOS, JSON_HEX_QUOT, JSON_HEX_AMP 플래그를 사용하면 특수 문자가 안전하게 이스케이프되어 XSS 공격을 방지할 수 있습니다.
Q3. CI4 백엔드 API를 React에서 호출할 때 CI4의 CSRF 보호를 통과하기 위해 설정해야 하는 HTTP 헤더는?
💡 CI4는 기본적으로 CSRF 보호가 활성화되어 있어 POST/PUT/DELETE 요청 시 CSRF 토큰이 필요합니다. React에서 API를 호출할 때 X-CSRF-TOKEN 헤더에 CI4의 csrf_hash() 값을 포함해야 합니다.
Q4. CI4 View에 삽입된 React 컴포넌트에서 에러가 발생할 때, PHP로 렌더링된 헤더/푸터가 깨지지 않도록 보호하는 가장 좋은 방법은?
💡 React 컴포넌트를 ErrorBoundary로 감싸면, 내부에서 에러가 발생해도 Fallback UI만 표시되고 CI4가 서버사이드로 렌더링한 헤더/푸터 등 나머지 페이지는 정상적으로 유지됩니다.
Q5. CDN 방식 React 통합의 주요 단점과 이를 해결하기 위한 다음 단계는?
💡 Babel Standalone을 사용한 런타임 JSX 변환은 초기 로딩 시 추가 작업이 발생합니다. 프로덕션에서는 Vite나 webpack으로 사전 컴파일된 번들을 CI4 View에서 include하여 성능을 최적화하는 것이 권장됩니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.