solid

Solid는 사용자 인터페이스 구축을 위한 오픈 소스 JavaScript 라이브러리입니다. 이 라이브러리의 핵심적인 설계 결정은 가상 DOM의 배제입니다. 템플릿은 실제 DOM 노드로 컴파일되며, 업데이트는 세분화된 반응형 리액션을 통해 적용됩니다. 따라서 상태의 일부가 변경되면 이에 의존하는 코드만 다시 실행됩니다. 반응형 모델 개발자는 createSignal과 같은 원시를 사용하여 상태를 선언하는데, 이는 접근자(accessor)와 설정자(setter)를 반환합니다. 파생 값은 접근자를 호출하는 일반 함수로 표현되며, 의존성 추적은 자동으로 이루어집니다. 반응형 상태를 읽으면 주변 계산이 해당 상태에 구독됩니다. 컴포넌트는 뷰를 설정하기 위해 한 번만 실행되는 일반 함수로, README에서는 이를 '한 번 렌더링(render-once)'이라는 멘탈 모델로 설명합니다. 문서에서는 컴파일러가 정적 HTML을 템플릿으로 추출하고 동적 표현식을 삽입하여 부모 요소를 다시 렌더링하지 않고도 단일 텍스트 노드를 업데이트하는 방법을 보여줍니다. 프레임워크 기능 이 라이브러리는 JSX, 프래그먼트, Context, Portals, Suspense, 스트리밍 서버 측 렌더링, 점진적 하이드레이션, Error Boundaries 및 동시 렌더링을 제공합니다. 내장 상태 관리는 Context와 Stores를 통해 지원되며, Resources를 통해 서버에서 로드한 데이터를 다른 반응형 상태처럼 취급하고 Suspense 및 동시 렌더링을 사용하여 반응형으로 렌더링할 수 있습니다. README는 스트리밍 및 점진적 하이드레이션을 포함한 SSR 및 서버리스 지원을 언급합니다. 호환성 및 확장성 Solid는 동형(isomorphic, 클라이언트 및 서버 렌더링) 및 유니버설한 것으로 설명되며, 다른 환경에서 사용할 수 있도록 커스텀 렌더러를 제공합니다. 웹 컴포넌트 친화적이며 커스텀 요소를 작성할 수 있고, 동반 패키지인 solid-element를 제공합니다. JSX 및 TypeScript, 그리고 Vite 생태계와 통합됩니다. JavaScript 및 TypeScript용 공식 템플릿은 degit을 통해 스캐폴딩할 수 있으며, Babel 프리셋(babel-preset-solid)과 solid-js 의존성이 권장 설정입니다. TypeScript의 경우 jsx: "preserve" 및 jsxImportSource: "solid-js"가 필요합니다. 프로젝트 사이트에서는 인터랙티브 플레이그라운드와 튜토리얼 워크스루를 제공합니다. 목표 README는 JS Framework Benchmark 및 번들 크기 비교를 참조하여 작고 트리 셰이킹 가능한 번들 및 최적화된 바닐라 JavaScript에 가까운 성능을 주장합니다. 단순성, 컴포지션 및 최소한의 숨겨진 규칙을 강조하며 선언적 코드와 읽기-쓰기 분리를 장려합니다. 추상화가 최소한이므로 D3와 같은 네이티브 JavaScript 라이브러리를 직접 사용할 수 있다고 언급합니다. 커뮤니티 및 지원 지원 대상은 데스크톱 및 모바일의 최신 Firefox, Safari, Chrome, Edge의 지난 2년 버전이며, 서버에서는 Node LTS와 최신 Deno 및 Cloudflare Worker 런타임을 지원합니다. IE 및 유사한 단종된 브라우저는 명시적으로 지원되지 않습니다. 테스트는 SauceLabs를 통해 지원됩니다. 이 프로젝트는 Discord 및 Reddit 커뮤니티, 기여자 기반, Open Collective 자금 지원 페이지, 그리고 커뮤니티 원시, 컴포넌트 라이브러리 및 빌드 타임 유틸리티의 확장되는 생태계를 유지합니다.