아카이브

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에는 각 속성에 대한 값이 저장됩..

https://docs.superstructjs.org/ Introduction | SuperstructIntroduction Superstruct makes it easy to define interfaces and then validate JavaScript data against them. Its type annotation API was inspired by TypeScript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API. But Superstruct is desigdocs.superstructjs.org Superstruct는 특정 데이터가 의도된 형식으로 작성되어 있는지 확인하는 유효성 검사를 도와주는 패키지입..

.all()은 여러 개의 Promise를 일괄적으로 처리할 때 사용합니다..all의 인자로는 Promise 객체의 배열 등을 넘겨줄 수 있습니다.const promises = []const asyncFunc = async (i) => { const res = await fetch(`http://.../${i}`) console.log(res)}for (let i=0; iPromise.all()은 배열의 모든 Promise가 fufiled 상태가 될 때 fulfiled 상태가 됩니다.만약 하나 이상의 요소가 rejected 상태가 된다면, Promise.all() 역시 rejected가 됩니다.