KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #open-source #ai #claude-code #codex #developer-tools #dsh-plugin #ai-agent #mcp #deepseek-harness

solid

★ 35,844 Open GitHub ↗

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![SolidJS](https://assets.solidjs.com/banner?project=Library&type=core)

[![Build Status](https://img.shields.io/github/actions/workflow/status/solidjs/solid/main-ci.yml?branch=main&logo=github&style=for-the-badge)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
[![Coverage Status](https://img.shields.io/coveralls/github/solidjs/solid.svg?style=for-the-badge)](https://coveralls.io/github/solidjs/solid?branch=main)
[![NPM Version](https://img.shields.io/npm/v/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js)
[![](https://img.shields.io/npm/dm/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js)
[![Discord](https://img.shields.io/discord/722131463138705510?style=for-the-badge)](https://discord.com/invite/solidjs)
[![Subreddit subscribers](https://img.shields.io/reddit/subreddit-subscribers/solidjs?style=for-the-badge)](https://www.reddit.com/r/solidjs/)
\*\*[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction\_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)\*\*

Solid는 사용자 인터페이스를 만들기 위한 선언형 JavaScript 라이브러리입니다. Virtual DOM을 사용하는 대신, 템플릿을 실제 DOM 노드로 컴파일하고 세밀한(fine-grained) 반응성을 통해 업데이트합니다. 상태를 선언하고 앱 전반에서 사용하면, 상태의 특정 부분이 변경될 때 그 상태에 의존하는 코드만 다시 실행됩니다.

## 한눈에 보기

```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() \* 2;

console.log("The body of the function runs once...");

return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {doubleCount()}
      </button>
    </>
  );
}

render(Counter, document.getElementById("app")!);
```

[Playground](https://playground.solidjs.com/anonymous/0c88df54-91b0-4c88-bd20-e962bde49725)에서 이 코드를 직접 테스트해 보세요!

설명해 드릴게요!

```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";

// 컴포넌트는 DOM 노드를 반환하는 함수일 뿐입니다.
function Counter() {
  // 반응형 상태를 생성하여 접근자(accessor) count()와 설정자(setter) setCount()를 얻습니다.
  const [count, setCount] = createSignal(0);

// 파생된(derived) 상태를 생성하려면 표현식을 함수로 감싸기만 하면 됩니다.
  const doubleCount = () => count() \* 2;

console.log("The body of the function runs once...");

// JSX를 사용하면 JavaScript 함수 내에서 HTML을 작성하고 { } 구문을 사용하여 동적 표현식을 포함할 수 있습니다.
  // 이 중에서 다시 렌더링되는 부분은 오직 doubleCount() 텍스트뿐입니다.
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        Increment: {doubleCount()}
      </button>
    </>
  );
}

// render 함수는 페이지에 컴포넌트를 마운트합니다.
render(Counter, document.getElementById("app")!);
```

Solid는 JSX를 효율적인 실제 DOM 업데이트로 컴파일합니다. 런타임에는 동일한 반응형 프리미티브(`createSignal`)를 사용하면서도 가능한 한 불필요한 리렌더링이 발생하지 않도록 합니다. 이 예시가 어떻게 변환되는지 확인해 보세요:

```js
import { template as \_$template } from "solid-js/web";
import { delegateEvents as \_$delegateEvents } from "solid-js/web";
import { insert as \_$insert } from "solid-js/web";

// 컴파일러는 정적 HTML을 분리해 냅니다.
const \_tmpl$ = /\*#\_\_PURE\_\_\*/\_$template(`<div><button>Increment: </button></div>`);

import { createSignal, createEffect } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() \* 2;

console.log("The body of the function runs once...");

return (() => {
    //\_el$는

실제 DOM 노드입니다!
const \_el$ = \_tmpl$();
\_el$.$$click = () => setCount(c => c + 1);
// 이것은 전체 버튼을 다시 렌더링하지 않고도 count가 업데이트될 수 있는 방식으로 count를 버튼의 자식으로 삽입합니다.
\_$insert(\_el$, doubleCount);
return \_el$;
})();
}
render(Counter, document.getElementById("app"));
\_$delegateEvents(["click"]);
```
## 주요 특징
- 실제 DOM에 대한 세밀한(fine-grained) 업데이트
- 선언적 데이터: 반응형 프리미티브를 갖춘 시스템으로 상태 모델링
- 1회 렌더링 멘탈 모델: 컴포넌트는 뷰를 설정하기 위해 한 번 실행되는 일반 JavaScript 함수입니다.
- 자동 의존성 추적: 반응형 상태에 접근하면 자동으로 구독됩니다.
- [작고](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) [빠름](https://krausest.github.io/js-framework-benchmark/current.html)
- 간단함: 재사용하고, 조합하고, 확장할 수 있는 몇 가지 강력한 개념 학습
- JSX, 프래그먼트(fragments), Context, 포털(Portals), Suspense, 스트리밍 SSR, 점진적 하이드레이션(progressive hydration), Error Boundaries, 동시성 렌더링(concurrent rendering)과 같은 최신 프레임워크 기능 제공.
- 자연스러운 디버깅 가능: `

`은 실제 div이므로 브라우저의 devtools를 사용하여 렌더링을 검사할 수 있습니다.
- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme)하며 커스텀 엘리먼트를 작성할 수 있습니다.
- 동형(Isomorphic): 클라이언트와 서버 모두에서 컴포넌트를 렌더링합니다.
- 범용적(Universal): 어디서나 Solid를 사용할 수 있도록 [커스텀 렌더러](https://github.com/solidjs/solid/releases/tag/v1.2.0)를 작성할 수 있습니다.
- 활발한 코어 팀의 지원을 받는 성장하는 커뮤니티와 생태계
빠른 시작
터미널에서 다음 명령어를 실행하여 간단한 앱을 시작할 수 있습니다:
```sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
또는 TypeScript의 경우:
```sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
이렇게 하면 [Vite](https://vitejs.dev/) 기반의 최소한의 클라이언트 렌더링 애플리케이션이 생성됩니다.
또는 직접 설정에 의존성을 설치할 수도 있습니다. JSX와 함께 Solid를 사용하려면(\_권장\_), 다음을 실행하세요:
```sh
> npm i -D babel-preset-solid
> npm i solid-js
```
설정하는 가장 쉬운 방법은 `.babelrc`, webpack용 babel 설정, 또는 rollup 설정에 `babel-preset-solid`를 추가하는 것입니다:
```js
"presets": ["solid"]
```
TypeScript가 작동하도록 하려면 `.tsconfig`에서 Solid의 JSX를 처리하도록 설정해야 합니다:
```js
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js",
}
```
## 왜 Solid인가요?
### 고성능
성능을 위해 세심하게 설계되었고 5년간의 연구를 바탕으로 만들어진 Solid의 성능은 최적화된 바닐라 JavaScript와 거의 구별할 수 없습니다 ([JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)에서 Solid 참고). Solid는 [가볍고](https://bundlephobia.com/package/solid-js@1.3.15) 완전히 트리 셰이킹이 가능하며, 서버에서 렌더링할 때도 [빠릅니다](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6). 완전한 클라이언트 렌더링 SPA를 작성하든 서버 렌더링 앱을 작성하든 사용자는 그 어느 때보다 빠르게 화면을 볼 수 있습니다. (라이브러리 크리에이터가 작성한 [Solid의 성능에 대한 자세한 내용](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37)을 읽어보세요.)
### 강력함
Solid는 현대적인 프레임워크에서 기대할 수 있는 모든 기능을 갖추고 있습니다. Context와 Stores를 통해 고성능 상태 관리가 기본으로 내장되어 있습니다: 전역 상태를 관리하기 위해 (원하지 않는다면) 서드파티 라이브러리를 찾을 필요가 없습니다. Resources를 사용하면 서버에서 로드된 데이터를 다른 상태 조각처럼 사용하여 Suspense와 동시성 렌더링 덕분에 반응형 UI를 구축할 수 있습니다. 서버로 전환할 준비가 되면 Solid는 완전한 SSR 및 서버리스를 지원하며, 스트리밍과 점진적 하이드레이션을 통해 가능한 가장 빠른 시간에 상호작용이 가능하게 만듭니다. (전체 [인터랙티브 기능 가이드](https://www.solidjs.com/tutorial/introduction\_basics)를 확인해 보세요.)
### 실용적임
더 적은 코드로 더 많은 일을 하세요: 숨겨진 규칙이나 예외 없이 간단하고 조합 가능한 프리미티브를 사용하세요. Solid에서 컴포넌트는 단지 함수일 뿐이며, 렌더링은 순전히 상태가 어떻게 사용되는지에 따라 결정되므로 원하는 방식으로 코드를 자유롭게 구성할 수 있고 새로운 렌더링 시스템을 배울 필요가 없습니다. Solid는 프로젝트를 유지 관리하기 쉽게 도와주는 선언형 코드 및 읽기-쓰기 분리와 같은 패턴을 권장하지만, 개발을 방해할 정도로 까다롭지 않습니다.
### 생산적임
Solid는 JSX 및 TypeScript와 같은 검증된 도구를 기반으로 구축되었으며 Vite 생태계와 통합됩니다. Solid의 베어메탈, 최소한의 추상화를 통해 DOM에 직접 접근할 수 있으므로 D3와 같은 선호하는 네이티브 JavaScript 라이브러리를 쉽게 사용할 수 있습니다. 또한 Solid 생태계는 [커스텀 프리미티브](https://github.com/solidjs-community/solid-primitives), [컴포넌트 라이브러리](https://kobalte.dev), 그리고 [새로운 방식으로 Solid 코드를 작성할 수 있게 해주는](https://github.com/LXSMNSYC/solid-labels) 빌드 타임 유틸리티와 함께 빠르게 성장하고 있습니다.
## 더 보기
공식 [문서](https://docs.solidjs.com)를 확인하거나 브라우저

몇 가지 [예시](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)
## 브라우저 지원
SolidJS Core는 Firefox, Safari, Chrome, Edge를 포함하여 (데스크톱 및 모바일 기기 기준) 최근 2년 동안 출시된 모던 브라우저를 지원하기 위해 노력하고 있습니다. IE나 이와 유사한 지원이 종료된 브라우저는 지원하지 않습니다. 서버 환경의 경우 Node LTS와 최신 Deno 및 Cloudflare Worker 런타임을 지원합니다.
![Testing Powered By SauceLabs](https://saucelabs.github.io/images/opensauce/powered-by-saucelabs-badge-gray.svg?sanitize=true)
## 커뮤니티
[Discord](https://discord.com/invite/solidjs)에서 저희와 함께 이야기를 나누어 보세요! Solid의 창시자와 코어 팀원들이 이곳에서 활발히 활동하고 있으며, 언제나 기여(Contribution)를 환영합니다.
### 기여자
[![](https://contrib.rocks/image?repo=solidjs/solid)](https://github.com/solidjs/solid/graphs/contributors)
### Open Collective
기부로 저희를 지원하고 활동을 이어갈 수 있도록 도와주세요. [[기여하기](https://opencollective.com/solid)]
[![](https://opencollective.com/solid/backer/0/avatar.svg)](https://opencollective.com/solid/backer/0/website)
[![](https://opencollective.com/solid/backer/1/avatar.svg)](https://opencollective.com/solid/backer/1/website)
[![](https://opencollective.com/solid/backer/2/avatar.svg)](https://opencollective.com/solid/backer/2/website)
[![](https://opencollective.com/solid/backer/3/avatar.svg)](https://opencollective.com/solid/backer/3/website)
[![](https://opencollective.com/solid/backer/4/avatar.svg)](https://opencollective.com/solid/backer/4/website)
[![](https://opencollective.com/solid/backer/5/avatar.svg)](https://opencollective.com/solid/backer/5/website)
[![](https://opencollective.com/solid/backer/6/avatar.svg)](https://opencollective.com/solid/backer/6/website)
[![](https://opencollective.com/solid/backer/7/avatar.svg)](https://opencollective.com/solid/backer/7/website)
[![](https://opencollective.com/solid/backer/8/avatar.svg)](https://opencollective.com/solid/backer/8/website)
[![](https://opencollective.com/solid/backer/9/avatar.svg)](https://opencollective.com/solid/backer/9/website)
[![](https://opencollective.com/solid/backer/10/avatar.svg)](https://opencollective.com/solid/backer/10/website)
### 스폰서
스폰서가 되어 GitHub의 README에 로고를 올리고 사이트 링크를 추가해 보세요. [[스폰서 되기](https://opencollective.com/solid#sponsor)]
[![](https://opencollective.com/solid/sponsor/0/avatar.svg)](https://opencollective.com/solid/sponsor/0/website)
[![](https://opencollective.com/solid/sponsor/1/avatar.svg)](https://opencollective.com/solid/sponsor/1/website)
[![](https://opencollective.com/solid/sponsor/2/avatar.svg)](https://opencollective.com/solid/sponsor/2/website)
[![](https://opencollective.com/solid/sponsor/3/avatar.svg)](https://opencollective.com/solid/sponsor/3/website)
[![](https://opencollective.com/solid/sponsor/4/avatar.svg)](https://opencollective.com/solid/sponsor/4/website)
[![](https://opencollective.com/solid/sponsor/5/avatar.svg)](https://opencollective.com/solid/sponsor/5/website)
[![](https://opencollective.com/solid/sponsor/6/avatar.svg)](https://opencollective.com/solid/sponsor/6/website)
[![](https://opencollective.com/solid/sponsor/7/avatar.svg)](https://opencollective.com/solid/sponsor/7/website)
[![](https://opencollective.com/solid/sponsor/8/avatar.svg)](https://opencollective.com/solid/sponsor/8/website)
[![](https://opencollective.com/solid/sponsor/9/avatar.svg)](https://opencollective.com/solid/sponsor/9/website)
[![](https://opencollective.com/solid/sponsor/10/avatar.svg)](https://opencollective.com/solid/sponsor/10/website)
[![](https://opencollective.com/solid/sponsor/11/avatar.svg)](https://opencollective.com/solid/sponsor/11/website)
[![](https://opencollective.com/solid/sponsor/12/avatar.svg)](https://opencollective.com/solid/sponsor/12/website)

solid

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README