아카이브

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 코드에 포함..

JSX 문법을 사용해 CSS를 적용하는 방식은 HTML에서 CSS를 적용하는 방식과 유사합니다. 역시 다른 점이라고 한다면, JSX 문법으로 인해 생기는 HTML과의 차이점 정도라고 할 수 있겠습니다. [JSX에 대해서] JSX에서 style은 객체 형태로 넘겨줄 수 있어, style을 먼저 변수로 선언한 뒤 {중괄호}로 불러올 수 있습니다.CamelCase를 사용합니다(e.g. background-color → backgroundColor).스프레드 문법({..., })을 사용하면 클래스 상속과 같이 다른 스타일의 요소들을 사용할 수 있습니다.아래는 버튼에 스타일을 적용하는 코드입니다. 버튼의 공통된 스타일은 baseButtonStyle에, 색과 관련된 코드는 blueButtonStyle과 redBut..

특정 매커니즘(FSM)에서 상태를 표시할 변수가 필요할 때 state를 사용할 수 있습니다.리액트에서 state는 useState( ) 함수를 통해 사용할 수 있습니다.// useState를 사용하기 위해 먼저 불러와야 합니다.import { useState } from 'react';// useState를 호출하면, num 변수와 setNum 함수를 반환합니다.const [num, setNum] = useState(1);useState( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.num : 현재 상태 값setNum : num의 값을 변경하는 함수(물론, 이 두 반환값의 이름은 임의로 지을 수 있습니다) 아래 예시는 무작위 값을 num으로 하여 setNum()함수를 이용해 상태값을..