[Solid] SolidJS 프로젝트 시작하기

VScode 기준으로 설명하겠습니다.

node.js가 필요합니다.

 

자세한 설명은 공식 홈페이지에서 확인할 수 있습니다.

여기서는 Vite라는 프로그램의 템플릿을 이용해 Solid를 설치하는 법을 설명해줍니다.

https://www.solidjs.com/guides/getting-started

https://www.solidjs.com/guides/getting-started

1. 패키지 초기화 & 생성

프로젝트를 시작하고자하는 경로로 들어가 아래 명령어를 실행합니다.

이는 my-app이라는 이름의 solidjs 템플릿을 생성하는 명령어입니다.

// JavaScript를 사용할 때
npx degit solidjs/templates/js my-app

// TypeScript를 사용할 때
 npx degit solidjs/templates/ts my-app

y를 누르면 solidjs/template의 템플릿 파일 설치가 진행됩니다

설치가 완료된 후, 만들어진 my-app에 들어가 pacakge.json에 명시된 의존관계를 설치해줍니다.

cd my-app
npm i

의존관계를 설치합니다

Solid를 Jsx와 함께 사용하기 위해서는 solid-js 라이브러리와 JS 컴파일러인 Babel의 플러그인을 설치해주어야 합니다.

npm install solid-js babel-preset-solid

TS를 사용하는 경우, tsconfig.json 파일의 compilerOptions 항목이 아래와 같이 설정되었는지 확인해주어야 합니다.

"compilerOptions": {
  // ...
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
  // ...
}

2. 초기 구성

설치가 완료되면, 다음과 같은 파일들이 설치되어 있는 것을 볼 수 있습니다.

src 폴더 |  프로젝트를 실행하면 브라우저에 기본적으로 출력되는 예제

.gitignore |  github에 pull할 때 무시해도 되는 파일 목록들 [.gitignore 참고]

index.html |  예제 html 파일

package.json |  프로젝트의 이름, 버전, 원작자명, 라이센스등의 정보를 담은 메타데이터

3. 실행

다음 명령어를 통해 Solid 프로젝트를 실행해볼 수 있습니다.

npm run dev

예제 코드를 실행하면 다음과 같은 화면이 나옵니다.

solidJS 아이콘이 돌아갑니다

코드가 실행되는 동안에 터미널은 다음과 같이 종료되지 않고 지속되는데, 이 동안은 코드를 수정할 때마다 웹 브라우저에 수정사항이 즉각 반영되어 달라진 점을 쉽게 확인할 수 있습니다. Ctrl+C로 종료할 수 있습니다.

이 상태로 계속 실행되고 있습니다