Written with AI assistance from the source video. The video is the authority.
9:15Better Stack
Log in to leave a comment
No posts yet
Solid 2.0이 정식 배포되면서 기존 메타 프레임워크 패키지인 solid-start가 완전히 퇴역했습니다. 대규모 상용 애플리케이션을 운영하는 프론트엔드 팀이라면 지금 당장 의존성 구조를 들어내야 합니다. 프로젝트에서 solid-start와 플랫폼 어댑터를 완전히 제거하고, 웹 표준 Fetch API 기반의 단일 계약 함수인 handleRequest(request: Request)를 익스포트하도록 서버 진입점을 수정하십시오. 기존 onMount 훅은 비동기 반응성 트리가 완전히 해결된 시점에 클린업 함수를 반환하는 onSettled 훅으로 통합되었습니다.
마이그레이션을 안전하게 수행하려면 패키지 의존성을 격리하고 진입점을 수동으로 교체해야 합니다. 첫째, package.json에서 solid-start를 제거하고 @solidjs/vite-plugin 버전을 2.0.0-rc.1 이상으로 업데이트합니다. 둘째, vite.config.ts 파일을 생성하여 plugins: [solid({ start: true, ssr: true, router: { type: 'filesystem', dir: 'src/routes' } })] 설정을 구성합니다. 셋째, 서버 진입점 파일인 entry-server.tsx에서 렌더링 핸들러를 웹 표준 handleRequest(request: Request) 인터페이스로 변경합니다. 이 과정을 거치면 초기 빌드 실패율을 80퍼센트 이상 줄이고 툴체인 호환성 문제를 해결할 수 있습니다.
Solid 2.0 반응형 엔진은 비동기 작업인 Promise를 반응형 그래프의 1급 시그널 값으로 승격시켰으며, 기존 데이터 페칭 프리미티브인 createResource를 완전히 제거했습니다. 개발자는 컴포넌트 내부에서 일반 createMemo를 선언하고 비동기 함수를 직접 반환함으로써 별도의 수동 방어 로직 없이 해결된 값을 다룰 수 있습니다. 누적 레이아웃 시프트 현상을 방지하기 위해 상위 props 변경으로 새로운 비동기 조회가 트리거될 때 <Loading> 바운더리는 이전 UI 상태를 유지하며 isPending(user) 함수로 투명도를 조절합니다.
비동기 페칭 로직을 리팩토링하려면 일반 메모 구조와 바운더리를 결합해야 합니다. 첫째, 데이터 페칭 로직을 품은 일반 createMemo(() => fetchUser(props.userId))를 작성합니다. 둘째, JSX 템플릿 최상단에 <Errored> 바운더리를 배치하여 네트워크 5xx 에러나 거부된 Promise를 포착하고 로컬 복구 버튼을 제공합니다. 셋째, 내부 콘텐츠를 <Loading fallback="{<ProfileSkeleton"/>}>으로 감싸고 class={{ 'opacity-50': isPending(user) }} 조건부 스타일링을 적용합니다. 이 절차를 통해 네트워크 지연 상황에서 데이터 무결성을 보장하고 사용자 경험 저하를 방지할 수 있습니다.
Solid 2.0 툴체인은 기존 JavaScript 및 Babel 기반 트랜스파일러를 축출하고 Rust 기반의 Oxc 및 Rolldown 컴파일러 엔진을 통합 채택하여 20배에서 최대 355배의 컴파일 속도 향상을 제공합니다. 그러나 빌드 파이프라인 중간에 Node.js V8 런타임 기반의 레거시 플러그인이 포함되면 NAPI 직렬화 오버헤드가 발생하여 Rust 컴파일러의 성능 이점이 상쇄되고 파싱 오류가 유발됩니다. 따라서 호환되지 않는 레거시 빌드 플러그인을 정제하는 자동화 스크립트 실행이 필수적입니다.
레거시 플러그인 충돌을 해소하려면 검사 및 정제 절차를 거쳐야 합니다. 첫째, 프로젝트 루트에 scripts/check-legacy-plugins.js 파일을 생성하고 babel-plugin-transform-async-to-generator 및 @babel/plugin-proposal-decorators 등 충돌 대상 플러그인 목록을 정의합니다. 둘째, 파일 시스템 모듈을 이용해 vite.config.ts 내용을 동적으로 읽어들여 호환되지 않는 플러그인 문자열 포함 여부를 검사하는 진단 함수를 실행합니다. 셋째, 터미널에서 node scripts/check-legacy-plugins.js 명령어를 실행하여 감지된 이슈를 정제하고, 로컬 개발 환경에서 rm -rf node_modules/.vite .oxc_cache 명령어로 캐시를 소거합니다. 이 과정을 통해 마이그레이션 초기 빌드 오류를 차단하고 개발 서버 HMR 속도를 회복할 수 있습니다.
Solid 2.0 코어는 액션과 낙관적 스토어 프리미티브를 기본 탑재하여 비동기 상태 변이 처리를 간소화합니다. 기존 스토어 패러다임과 달리 낙관적 업데이트는 확정된 백그라운드 스토어 데이터 위에 임시 변경사항을 계층 형태로 덧씌우는 반응형 오버레이 메커니즘으로 동작합니다. action 내부에서 트랜잭션 시퀀스를 관리하거나 요청을 직렬화하면 복수의 컴포넌트가 동일한 스토어를 구독할 때 발생하는 경쟁 상태를 원천 차단할 수 있습니다.
낙관적 트랜잭션과 수동 롤백 미들웨어를 구축하려면 데이터 관리 구조를 변경해야 합니다. 첫째, snapshot(store) 함수를 호출하여 비동기 요청 직전의 포인트 인 타임 데이터를 캡처합니다. 둘째, setStore 콜백을 활용해 draft 객체에 낙관적 상태를 즉시 기록하여 UI에 선제적으로 반영합니다. 셋째, 서버 비동기 함수 수행 중 예외가 발생할 경우 캐치 블록 내부에서 setStore(() => previousSnapshot) 구문을 실행해 이전 상태로 강제 복원합니다. 이를 통해 네트워크 응답 지연이나 타임아웃 상황에서도 폼 데이터 유실 없는 안정적인 상태 관리를 달성할 수 있습니다.
Solid 2.0 및 Vite 8 빌드 환경에서는 Rust 아티팩트와 Oxc 컴파일러 빌드 캐시를 효율적으로 관리해야 CI/CD 빌드 시간을 단축하고 서버 유지비를 절감할 수 있습니다. Oxc 컴파일러의 데이터 병렬 처리 중 CI 환경에서 메모리 부족 오류로 빌드가 중단되는 현상을 방지하려면 힙 메모리 한도와 Rayon 워커 스레드 수치를 환경 변수로 명시해야 합니다. 또한 SSR 서버 런타임에서는 각 HTTP 요청에 할당된 비동기 반응형 리액티비티 트리 컨텍스트가 정상적으로 해제되는지 추적해야 합니다.
파이프라인 최적화와 메모리 모니터링을 적용하려면 설정 파일을 수정해야 합니다. 첫째, GitHub Actions 워크플로우 YAML 파일 내부에 path: ~/.cargo/registry, path: .oxc_cache, path: node_modules/.vite 경로를 포함하는 캐시 액션을 구성합니다. 둘째, 빌드 명령어 실행 환경 변수에 NODE_OPTIONS="--max-old-space-size=8192", RAYON_NUM_THREADS="4", UV_THREADPOOL_SIZE="8"을 선언하여 힙 메모리를 8GB로 확장하고 스레드 병목을 해제합니다. 셋째, 서버 진입점에 process.memoryUsage().heapUsed 기반의 모니터링 래퍼 함수를 작성하여 메모리 증가량이 10MB를 초과할 경우 경고 로그를 출력하도록 설정합니다. 이 절차를 완료하면 프로덕션 환경의 빌드 소요 시간을 단축하고 런타임 메모리 누수를 안정적으로 방지할 수 있습니다.