CI4 백엔드 연동 — PHP API → Next.js 프론트엔드 통합
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js 클라이언트 컴포넌트에서 CI4 API를 직접 호출했을 때 발생하는 가장 흔한 문제와 해결책은?
💡 브라우저에서 다른 출처(origin)의 API를 직접 호출하면 CORS 정책에 의해 차단됩니다. Next.js API Route를 BFF(Backend for Frontend) 프록시로 사용하면 브라우저→Next.js(같은 출처)→CI4 형태로 요청이 이루어져 CORS 문제가 해결됩니다.
Q2. Next.js 서버 컴포넌트에서 CI4 API를 호출할 때 `next: { revalidate: 60 }` 옵션의 의미는?
💡 `next: { revalidate: 60 }`은 ISR의 Time-based Revalidation입니다. 60초 동안은 캐시된 응답을 반환하고, 60초 후 첫 요청 시 백그라운드에서 CI4 API를 다시 호출해 캐시를 갱신합니다.
Q3. Server Action에서 CI4 API를 호출한 후 `revalidateTag("posts")`를 호출하는 이유는?
💡 게시글을 생성/수정/삭제하면 기존 캐시된 목록이 구식이 됩니다. `revalidateTag("posts")`는 `fetch` 시 `next: { tags: ["posts"] }`로 표시된 캐시 항목을 무효화하여 다음 요청 시 CI4에서 최신 데이터를 가져옵니다.
Q4. CI4 API에서 반환하는 Bearer 토큰을 Next.js에서 관리하는 가장 적절한 방법은?
💡 localStorage는 XSS 공격에 취약하고 서버 컴포넌트에서 접근 불가합니다. NextAuth.js JWT 콜백에서 `token.ci4Token`으로 저장하면 HttpOnly 쿠키로 보안 처리되며, 서버 컴포넌트/Server Action에서 `session.ci4Token`으로 안전하게 접근할 수 있습니다.
Q5. BFF(Backend for Frontend) 패턴에서 `app/api/ci4/[...path]/route.ts`가 하는 역할은?
💡 BFF API Route는 클라이언트(브라우저)에서 `/api/ci4/posts` 같은 같은-출처 URL로 요청하면, 서버에서 실제 CI4 API(`http://ci4-server/api/v1/posts`)로 요청을 전달(프록시)하고 응답을 반환합니다. CORS를 완전히 해결하면서 인증 토큰도 안전하게 관리합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.