일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- CSS
- sqlite
- html
- js
- CV
- vscode
- figma
- frontend
- ps
- ts
- PyTorch
- react
- nodejs
- PRISMA
- backend
- Express
- Three
- SOLID
- postgresql
- mongo
- ML
- API
- GAN
- DB
- python
- Git
- UI
- review
- C++
- Linux
- Today
- Total
목록SOLID (20)
아카이브
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"));