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는 두 번째 값을 추가로 반환할 ..

React에서 제공하는 StrictMode는 애플리케이션에서 발생할 수 있는 문제를 자체적으로 검사하는 기능입니다. StrictMode를 활성화 하면, React는 의도적으로 컴포넌트를 두 번씩 렌더링하여 발생할 수 있는 side effect를 확인합니다.  React는 렌더링과 커밋 두 단계로 동작합니다. 렌더링 단계에서는 DOM과 같은 특정 환경에 어떤 변화가 일어나야 하는 지 결정합니다. 이 때 React는 이전 렌더와 현재 렌더의 결과값을 비교합니다.커밋 단계는 위의 변경 사항을 실제로 반영하는 단계입니다. 일반적으로 커밋단계는 렌더링 단계보다 훨씬 빠릅니다. 때문에 렌더링 단계가 병목이 되어 브라우저가 멈출 수 있는데, 이를 위해 렌더링 단계를 작은 단위로 나누어 각 단계를 중지했다가 재개하는 ..

방법1. npm 사용※ node.js가 필요합니다.Three.js를 사용하고자 하는 프로젝트 경로에 들어가 아래 명령어를 이용해 설치합니다.npm install --save three만약 추가적인 빌드 툴이 없다면, 함께 설치할 수 있습니다. (예시 - vite)npm install --save-dev vite방법2. CDN 사용npm과 빌드 툴을 이용해 패키지를 설치하는 대신, html 파일에 직접 어디서 패키지를 가져올 것인지 명시해주는 방법입니다.html 파일의 태그 바로 다음에 아래 태그를 추가합니다.코드 작성하기Three.js의 코드는 요소 안에서 작성합니다. 위치 설정을 용이하게 하기 위해 위치 설정은 absolute, left-0, top-0으로 합니다.이후 Three.js가 작성될 객체..

Three.js는 웹 환경에서 3차원 그래픽을 표현할 수 있게 해주는 자바스크립트 라이브러리중 하나입니다. 현재 오픈 소스 프로젝트로 깃허브에서 공개되어 있으며, 블렌더 등의 모델링 도구를 통해 만든 파일 또한 불러와 적용할 수 있습니다. Three.js에 대한 문서 및 예제들은 아래 링크에서 확인할 수 있습니다.https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js docs threejs.org

https://www.papaparse.com/ Papa Parse - Powerful CSV Parser for JavaScriptEpiML is an agent-based mathematical model for the web, still in its early stages of development. "Papa makes it so easy to use CSV, which is good for scientists."www.papaparse.comPapaparse는 JS 환경에서 csv 파일을 읽고 파싱할 수 있게 해주는 패키지입니다. Response로 응답받은 csv파일을 csvText라고 할 때, papaparse의 사용법은 아래와 같습니다.Data() signal에는 각 속성에 대한 값이 저장됩..