onMount & onCleanup은 컴포넌트가 생성 & 소멸할 때 한 번 호출되는 특별한 effect 호출입니다.1. onMount()아래는 photos signal에 저장된 이미지 파일들을 For 컴포넌트를 이용해 하나씩 불러오는 코드입니다.import { render } from "solid-js/web";import { createSignal, onMount, For } from "solid-js";import "./styles.css";function App() { const [photos, setPhotos] = createSignal([]); // 각 이미지파일들을 비동기적으로 불러와 photos signal 배열에 추가합니다. const fetchPhotos = async () =>..

JSX에서는 자바스크립트를 사용해 control flow를 제어할 수 있습니다. 그러나 Solid와 같은 가상 DOM을 사용하지 않는 반응형 라이브러리의 경우, control flow를 업데이트할 때마다 모든 DOM 요소들을 버리고 새로 생성해야 하는 부담이 생기게 됩니다. 때문에 Solid에서는 헬퍼를 컴포넌트 형태로 사용하여 control flow를 제어합니다.1. Showif - else 문에 해당됩니다. when에서 조건(condition)을 받은 뒤, 참이면 태그 안 내용(return_elem_true)을 반환하고 거짓이면 fallback 안 내용(return_elem_false)을 호출합니다.import { Show } from 'solid-js'; return_elem_true2. ForF..

Memo는 effect와 같이 signal의 값에 따라 반응하지만, 읽기 전용인 signal입니다. Memo는 signal값이 변경되면서 함께 업데이트되지만, 다음 업데이트 전 까지는 여러번 호출되어도 한 번만 실행됩니다. 이를 통해 중복 계산을 줄이는 캐시로서 사용할 수 있습니다. Memo는 createMemo( ) 함수를 통해 사용할 수 있습니다.// createMemo를 사용하기 위해 먼저 불러와야 합니다.import { createMemo } from 'solid-js';// signal이 바뀔 때마다 prop으로 받은 함수를 실행한 뒤 반환값을 저장합니다.const f = createMemo(function); 아래 예시는 피보나치 수열의 n번째 수를 10×5 배열로 출력하는 코드입니다. Mem..

Effect는 signal의 값이 바뀔때 마다 실행하는 동작을 구현합니다.createEffect( )함수를 통해 사용할 수 있습니다.// createEffect를 사용하기 위해 먼저 불러와야 합니다.import { createEffect } from 'solid-js';// signal값이 변할 때마다 prop으로 받은 함수를 실행합니다.createEffect( function );아래 예시는 버튼을 누를 때 마다 누른 횟수를 출력해주는 코드입니다.import { createSignal, createEffect } from 'solid-js';function App() { // count signal을 선언합니다. const [count, setCount] = createSignal(0); //..

Solid에서 Signal은 React에서의 State와 유사한 역할을 합니다.Solid에서 Signal은 createSignal() 함수를 통해 사용할 수 있습니다.// createSignal을 사용하기 위해 먼저 불러와야 합니다.import { createSignal } from "solid-js";// useState를 호출하면, getter 함수와 setter 함수를 반환합니다.const [getter, setter] = createSignal(0);createSignal( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.    - getter : 현재 signal을 반환하는 함수    - setter : signal 값을 변경하는 함수(물론, 이 두 반환값의 이름은 임의로 지을..

SolidJS(또는 Solid)는 사용자 인터페이스를 손쉽게 만들기 위해 개발된 JavaScript 라이브러리입니다. Solid가 React와 다른 점이 있다면, 가상 DOM을 사용하지 않고 직접 DOM에 랜더링을 한다는 것입니다. 때문에 랜더링 빈도가 낮은 환경일 경우 속도가 훨씬 빠르다는 장점이 있습니다. 기본적인 Solid 구문은 다음과 같습니다.import { render } from "solid-js/web";function App() { return ( // JSX contents );}render(() => , document.getElementById("app"));

작성한 React 코드를 배포하기 위해서는 웹 서버가 문제 없이 사용할 수 있도록 알맞은 형식으로 빌드해야 합니다.1. 프로젝트 빌드하기아래 명령어를 입력하면 빌드가 진행됩니다.npm run build빌드가 정상적으로 완료되면 아래와 같은 문구를 볼 수 있습니다.빌드가 완료되면 프로젝트 폴더 내에 build 폴더가 새로 생성됩니다.이 build 폴더는 프로젝트에서 작성한 코드(CSS, JS, HTML 등)들과 사용된 자원(이미지, 영상 등)들이 포함되어 있습니다.2. 로컬환경에서 실행하기빌드한 프로젝트를 배포하기 전에, 코드가 잘 동작하는지 로컬환경에서 웹서버를 실행해볼 수 있습니다.아래 명령어는 npm 저장소에서 serve라는 프로그램을 내려받고, build라는 폴더에서 serve를 실행합니다.npx ..

일반적인 CSS에서는 url 속성을 다음과 같이 설정합니다..SomeStyle { background-image: url('./directory/to/the/image.svg');} 이를 React에서 사용하기 위한 JSX 형식으로 바꾸면 이렇게 될텐데요,const SomeStyle = { backgroundImage: "url('./directory/to/the/image.svg')"}; 실제로 이를 실행하면 정상적으로 동작하지 않습니다. 이는 React가 실행되는 방식과 관계가 있습니다. 우리가 작성한 JSX 코드는 프로젝트를 실행할 때 실행 가능한 JS 코드 형태로 변환됩니다.이 과정에서 파일의 위치 또한 달라질 수 있는데, 파일 경로 자체가 수정되거나 용량이 작은 파일인 경우 JS 코드에 포함..