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

해당 패키지를 설치한 후에도 Could not find a declaration file for module '패키지 이름'. 해당 오류가 발생한다면, 다음과 같이 타입이 정의된 패키지로 설치해야 합니다.npm install @types/[패키지 이름] --save-dev

긴 시간이 필요한 작업들을 비동기 함수 안에서 처리하면 그 작업들이 실행되는 동안 비동기 함수 바깥의 다른 일들을 수행할 수 있습니다.하지만 비동기 함수 내의 작업들이 많아질수록 비동기 함수의 처리 시간 자체가 길어져 병목이 될 우려가 있습니다. 예를 들어 비동기 함수 asyncFunc( )에서 fetch 함수를 10번 반복해서 실행하는 코드를 봅시다.const asyncFunc = async () => { for (let i=0; i이를 풀어서 다시 쓰면 다음과 같이 나타낼 수 있습니다.const asyncFunc = async () => { const res = await fetch(`http://.../0`) // 대기 console.log(res) const res = await..