Solid-Meta와 Solid-Router를 사용합니다.App.tsximport Pages from './pages';const App: Component = () => { return ( );};/Pages/index.tsxconst Pages = () => { return ( {/* ... */} )}export default Pagesindex.tsx 파일이 있다면 다른 곳에서 Pages 폴더만 호출해도 index.tsx가 기본 파일로 호출되기 때문에, Pages 컴포넌트를 불러올 수 있습니다.

Solid-Router는 React Router를 기반으로 한 패키지로, DOM 구조에서 URL 주소를 기반으로 한 페이지 전환을 위해 설계된 패키지입니다. 이를 통해 Solid에서 여러 개의 페이지를 가진 DOM 구조를 구현할 수 있습니다. Solid-Router의 컴포넌트들은 아래와 같이 호출할 수 있습니다.import { A, HashRouter, MemoryRouter, Navigate, Route, Router } from "@solidjs/router";1. Router & HashRouter라우팅을 구성하는 최상단 컴포넌트입니다. Route들을 포함하는 wrapper역할을 합니다. {/* routes */}만약 URL에 해시값이 포함되어 있다면, HashRouter를 사용합니다. {/* ro..

Solid-Meta는 React head를 기반으로 한 패키지로, DOM 구조에서 메타데이터를 쉽게 설정하고 호출하기 위해 설계된 패키지입니다. 이를 통해 설정한 메타데이터들은 프로젝트가 실행될 때 html 파일의 태그 안에 들어가게 됩니다. Solid-Meta의 컴포넌트들은 아래와 같이 호출할 수 있습니다.import { MetaProvider, Base, Title, Link, Meta, Style } from "@solidjs/meta";1. MetaProvider다른 solid-meta 컴포넌트들을 포함할 wrapper의 역할을 합니다. Router와 같이 메타데이터를 나타낼 수 있는 다른 컴포넌트들도 사용할 수 있습니다.const App = () => ( {/* 아래 요소는 태그 안에 ..

Resource는 Solid에서 비동기 처리를 할 때 사용합니다. createResource( ) 함수를 이용해 사용할 수 있습니다.// createResource를 사용하기 위해 먼저 불러와야 합니다.import { createResource } from "solid-js";// 비동기 함수인 asyncFunction을 실행한뒤 그 결과값을 반환합니다.const [resource] = createResource(asyncFunction);// flagSignal의 값이 변경되면, asyncFunction을 실행한뒤 그 결과값을 반환합니다.const [resource] = createResource(flagSignal, asyncFunction); createResouce는 두 번째 값을 추가로 반환할 ..

Solid Start는 Vinxi를 사용하는 SolidJS기반의 오픈소스 프레임워크입니다. Solid Start는 다양한 종류의 템플릿을 제공하기 때문에, 사용자의 용도(SSR, CSR, SSG 등)에 따라 적절한 도구를 불러와 사용할 수 있습니다. ※ Vinxi : 풀스택 JS SDK의 한 종류 Solid Start에 대한 자세한 가이드는 아래에서 확인할 수 있습니다.https://docs.solidjs.com/solid-start/getting-started Getting started - SolidDocs? Which template do you want to use? › - Use arrow-keys. Return to submit.docs.solidjs.com

SolidJS 환경에서 Macaron js를 설치해서 사용하는 방법입니다.자세한 내용은 공식 사이트에서 확인할 수 있습니다.https://macaron.js.org/docs/installation macaron — Colocated CSS-in-JS with zero-runtimeTypesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.macaron.js.org 1. 라이브러리 설치설치를 원하는 프로젝트 폴더에서 다음 명령어를 실행합니다.# npmnpm install @macaron-css/core ..

on( )과 untrack( )은 특정 Signal또는 Store의 반응성을 제어하는데 사용하는 함수이며, 서로 반대의 기능을 수행합니다.아래의 두 가지 예제는 Increment A 버튼을 누르면 변경된 A, B값이 출력되지만 Increment B 버튼을 누르면 변경된 값이 출력되지 않는 코드 입니다.1. on()특정 Signal & Store가 변경될 때의 반응성을 설정합니다. 모든 Signal & Store 에 대해 반응하는 effect와 달리, on은 특정 값에 대해서만 반응성을 설정한다는 차이가 있습니다. on( ) 함수는 첫 번째 인자로 Signal & Store를 받으며, 두 번째 인자로 신호가 변경될 때 실행할 함수를 받습니다. 추가로 on은 defer 옵션을 제공하는데, 이를 사용하면 계산..

한 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 하지만 props는 자신 바로 위 컴포넌트의 값만 전달 받을 수 있다는 제약이 있어, 한 단계 더 위의 컴포넌트로부터 값을 받으려면 중간 컴포넌트가 props을 전달해주어야 합니다. 이때문에 컴포넌트 계층이 길어질수록 중간 컴포넌트들은 자신은 사용하지도 않는 props를 받아야 하는 문제가 있습니다.Context API를 사용한다면, props의 명시 없이도 자손 컴포넌트들에게 props를 전달해줄 수 있습니다. Context API에는 크게 두 가지 함수가 있습니다. createContext( ) : context 객체를 생성하여 반환합니다.useContext(context) : context 객체를 사용하여 provider ..