Skip to content

feat: 웹 React Compiler 도입#536

Merged
manNomi merged 2 commits into
mainfrom
feat/web-react-compiler
Jun 2, 2026
Merged

feat: 웹 React Compiler 도입#536
manNomi merged 2 commits into
mainfrom
feat/web-react-compiler

Conversation

@manNomi
Copy link
Copy Markdown
Contributor

@manNomi manNomi commented May 31, 2026

관련 이슈

작업 내용

  • apps/web에 React Compiler를 annotation mode로 도입했습니다.
  • React 18 런타임을 유지하기 위해 react-compiler-runtime을 추가하고 compiler target을 18로 설정했습니다.
  • ChannelBadge에 첫 "use memo" annotation을 적용했습니다.
  • Next 15 compiler config 사용을 위해 apps/web의 Next 관련 패키지를 15.5.18로 올리고, Next 15의 async params/searchParams/cookies() 요구사항을 반영했습니다.
  • Server Component에서 허용되지 않는 dynamic(..., { ssr: false }) 사용을 제거하고, 대상 컴포넌트의 client boundary/SSR 안전성을 REACT_COMPILER.md에 정리했습니다.

검증

  • pnpm --filter @solid-connect/web ci:check
  • pnpm --filter @solid-connect/web build
  • 빌드 산출물에서 react-compiler-runtime 참조 확인
  • 커밋 훅: web/admin CI parity checks 통과
  • 푸시 훅: web/admin CI parity checks 및 build 통과

참고

  • 기존 Sentry onRequestError/instrumentation-client 경고와 metadataBase 경고는 남아 있습니다. 이번 React Compiler 도입과 직접 관련된 실패는 아닙니다.
  • Compiler 적용 범위는 compilationMode: annotation으로 제한했습니다. 전체 컴파일 확대 전에는 React Compiler lint/audit 경로를 먼저 마련하는 것을 권장합니다.

@manNomi manNomi requested review from enunsnv and wibaek as code owners May 31, 2026 15:10
@github-actions github-actions Bot added the web label May 31, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 31, 2026

Review Change Stack

Walkthrough

이 PR은 React Compiler 롤아웃과 Next.js 15 마이그레이션을 핵심으로 하는 종합적인 프레임워크 업그레이드입니다. 다음과 같이 진행됩니다:

  1. 기초 설정 계층: React Compiler 가이드 문서를 추가하고, next.config.mjs에 annotation 기반 컴파일 옵션을 설정합니다. Next.js와 관련 의존성을 14.2.x에서 15.5.18로 업그레이드하며, react-compiler-runtime과 babel-plugin-react-compiler를 프로젝트에 통합합니다. TypeScript 컴파일 타겟도 ES2017로 명시합니다.

  2. 동적 임포트 제거: Next.js 15 Server Component 호환성을 위해 여러 페이지와 컴포넌트에서 next/dynamic을 사용한 SSR 비활성화 패턴을 제거합니다. NewsSection, AppleScriptLoader, LoginContent, ApplyPageContent, ScoreScreen, GpaSubmitForm, LanguageTestSubmitForm, SearchClientContent, GlobalLayout의 컴포넌트들이 정적 import으로 전환됩니다.

  3. 홈 페이지 lazy 로딩 전략: PopularUniversitySection에서 belowFold 대학 카드 렌더링을 Suspense 기반에서 정적 렌더링으로 변경하되, priority, loading, fetchPriority, quality 속성을 명시적으로 전달하여 성능 제어를 유지합니다.

  4. Server Component 패턴 마이그레이션: Next.js 15 규약에 따라 여러 페이지의 params와 searchParams를 Promise 타입으로 변경하고, 컴포넌트를 async로 전환하여 await 패턴으로 파라미터를 처리합니다. PostPage, CommunityPage, MentorDetailPage, ChatDetailPage, UniversityListPage 등이 포함됩니다.

  5. 검증 및 유틸리티 개선: FileList 타입 검증을 타입 가드 기반 z.custom 패턴으로 개선하고, isServerStateLogin 함수를 비동기 함수로 변경합니다. ChannelBadge 컴포넌트에는 "use memo" 지시자를 추가하여 React Compiler 최적화 대상으로 표시합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • wibaek
  • enunsnv
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 'feat: 웹 React Compiler 도입'으로, 이 변경의 주요 내용(React Compiler 도입)을 명확하고 간결하게 요약하고 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed 풀 리퀘스트 설명이 필수 섹션들을 모두 포함하고 있으며, 작업 내용, 검증 방법, 주의사항이 명확하게 기술되어 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/web-react-compiler

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
solid-connect-web-admin Ready Ready Preview, Comment May 31, 2026 3:25pm
solid-connection-web Ready Ready Preview, Comment May 31, 2026 3:25pm

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx (1)

27-27: 💤 Low value

코멘트가 실제 동작과 일치하지 않습니다.

"동적 렌더링으로 위임"이라는 주석이 있지만, 이제 next/dynamic이 제거되어 정적 렌더링으로 변경되었습니다. 주석을 현재 동작에 맞게 수정하시는 것이 좋겠습니다.

✏️ 주석 수정 제안
-        {/* 나머지는 동적 렌더링으로 위임 */}
+        {/* 나머지는 lazy loading으로 처리 */}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/app/`(home)/_ui/PopularUniversitySection/index.tsx at line 27,
The inline comment in PopularUniversitySection (index.tsx) saying "나머지는 동적 렌더링으로
위임" is outdated because next/dynamic was removed and the component now renders
statically; update that comment in the PopularUniversitySection file to
accurately state that the component is statically rendered (or remove the
comment) so the comment matches the current behavior of the
PopularUniversitySection component.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/src/app/university/score/submit/language-test/_lib/schema.ts`:
- Around line 17-20: The validation error message for file type in the refine
chain (in the schema using isFileList, ACCEPTED_FILE_TYPES and MAX_FILE_SIZE) is
out of sync with allowed MIME types: update the string passed to the last
.refine(...) so it lists the actual accepted types (including .webp) to match
ACCEPTED_FILE_TYPES (e.g., ".jpeg, .png, .webp, .pdf 파일만 지원합니다."). Ensure you
edit the message in the same refine call that checks ACCEPTED_FILE_TYPES.

---

Nitpick comments:
In `@apps/web/src/app/`(home)/_ui/PopularUniversitySection/index.tsx:
- Line 27: The inline comment in PopularUniversitySection (index.tsx) saying
"나머지는 동적 렌더링으로 위임" is outdated because next/dynamic was removed and the
component now renders statically; update that comment in the
PopularUniversitySection file to accurately state that the component is
statically rendered (or remove the comment) so the comment matches the current
behavior of the PopularUniversitySection component.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7b61a6e6-fd5e-4e3b-9f45-49604dbde6f4

📥 Commits

Reviewing files that changed from the base of the PR and between 63e5a9a and 7c25011.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (25)
  • apps/web/REACT_COMPILER.md
  • apps/web/next.config.mjs
  • apps/web/package.json
  • apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
  • apps/web/src/app/(home)/page.tsx
  • apps/web/src/app/community/[boardCode]/[postId]/modify/page.tsx
  • apps/web/src/app/community/[boardCode]/[postId]/page.tsx
  • apps/web/src/app/community/[boardCode]/create/page.tsx
  • apps/web/src/app/community/[boardCode]/page.tsx
  • apps/web/src/app/layout.tsx
  • apps/web/src/app/login/page.tsx
  • apps/web/src/app/mentor/[id]/page.tsx
  • apps/web/src/app/mentor/chat/[chatId]/page.tsx
  • apps/web/src/app/university/[homeUniversity]/page.tsx
  • apps/web/src/app/university/application/apply/page.tsx
  • apps/web/src/app/university/score/page.tsx
  • apps/web/src/app/university/score/submit/gpa/_lib/schema.ts
  • apps/web/src/app/university/score/submit/gpa/page.tsx
  • apps/web/src/app/university/score/submit/language-test/_lib/schema.ts
  • apps/web/src/app/university/score/submit/language-test/page.tsx
  • apps/web/src/app/university/search/page.tsx
  • apps/web/src/components/layout/GlobalLayout/index.tsx
  • apps/web/src/components/ui/ChannelBadge.tsx
  • apps/web/src/utils/isServerStateLogin.ts
  • apps/web/tsconfig.json

Comment on lines +17 to 20
.custom<FileList>(isFileList, "증명서 파일을 첨부해주세요.")
.refine((files) => files?.length === 1, "증명서 파일을 첨부해주세요.")
.refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, `파일 크기는 5MB를 초과할 수 없습니다.`)
.refine((files) => ACCEPTED_FILE_TYPES.includes(files?.[0]?.type), ".jpeg, .png, .pdf 파일만 지원합니다."),
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

1) 파일 타입 안내 문구를 실제 허용 타입과 맞춰주세요.

- Line 20 에러 메시지에서 `.webp`가 누락되어 있습니다. 현재 검증은 `image/webp`를 허용하므로 문구를 일치시키는 게 좋습니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/app/university/score/submit/language-test/_lib/schema.ts` around
lines 17 - 20, The validation error message for file type in the refine chain
(in the schema using isFileList, ACCEPTED_FILE_TYPES and MAX_FILE_SIZE) is out
of sync with allowed MIME types: update the string passed to the last
.refine(...) so it lists the actual accepted types (including .webp) to match
ACCEPTED_FILE_TYPES (e.g., ".jpeg, .png, .webp, .pdf 파일만 지원합니다."). Ensure you
edit the message in the same refine call that checks ACCEPTED_FILE_TYPES.

@manNomi
Copy link
Copy Markdown
Contributor Author

manNomi commented May 31, 2026

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. What shall we delve into next?

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@manNomi manNomi merged commit 626a3e3 into main Jun 2, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

리액트 컴파일러 도입

1 participant