웹 서비스는 클라이언트와 서버 간의 상호작용으로 동작합니다.클라이언트에서 특정 기능을 서버에 요청(request)하면,서버는 요청을 처리해서 그 결과를 클라이언트에게 다시 반환(Response)합니다. 이 요청이 단순한 작업이면 큰 문제가 없지만, 복잡한 작업이 될 수록 문제가 생기게 됩니다.클라이언트가 하나의 작업을 요청하면 서버에 요청을 보내는 시간, 서버가 작업을 처리하는 시간, 그리고 결과를 다시 반환하는 시간까지 합쳐저 상당히 긴 시간을 소모하게 되기 때문입니다.  만약 클라이언트가 매번 응답을 기다린다면, 클라이언트는 응답을 받을 때까지 아무 것도 하지 않고 기다리기만 할 것입니다. 수백 번의 계산을 할 수 있는 시간을 낭비하는 것을 매우 비효율적이겠죠. 이 문제를 해결하기 위해 컴퓨터는 조금..

Solid Start는 Vinxi를 사용하는 SolidJS기반의 오픈소스 프레임워크입니다. Solid Start는 다양한 종류의 템플릿을 제공하기 때문에, 사용자의 용도(SSR, CSR, SSG 등)에 따라 적절한 도구를 불러와 사용할 수 있습니다. ※ Vinxi : 풀스택 JS SDK의 한 종류 Solid Start에 대한 자세한 가이드는 아래에서 확인할 수 있습니다.https://docs.solidjs.com/solid-start/getting-started Getting started - SolidDocs? Which template do you want to use? › - Use arrow-keys. Return to submit.docs.solidjs.com

SolidJS 환경에서 Macaron js를 설치해서 사용하는 방법입니다.자세한 내용은 공식 사이트에서 확인할 수 있습니다.https://macaron.js.org/docs/installation macaron — Colocated CSS-in-JS with zero-runtimeTypesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.macaron.js.org 1. 라이브러리 설치설치를 원하는 프로젝트 폴더에서 다음 명령어를 실행합니다.# npmnpm install @macaron-css/core ..

Macaron은 타입 안정성을 가지는 CSS-in-JS 컴파일 타임 라이브러리입니다. 자세한 설명은 아래 Github 링크에서 확인할 수 있습니다. https://github.com/macaron-css/macaron GitHub - macaron-css/macaron: Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productiviCompiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity - macaron-css/macarongithub.com ※ CSS-in-JS : J..

on( )과 untrack( )은 특정 Signal또는 Store의 반응성을 제어하는데 사용하는 함수이며, 서로 반대의 기능을 수행합니다.아래의 두 가지 예제는 Increment A 버튼을 누르면 변경된 A, B값이 출력되지만 Increment B 버튼을 누르면 변경된 값이 출력되지 않는 코드 입니다.1. on()특정 Signal & Store가 변경될 때의 반응성을 설정합니다. 모든 Signal & Store 에 대해 반응하는 effect와 달리, on은 특정 값에 대해서만 반응성을 설정한다는 차이가 있습니다. on( ) 함수는 첫 번째 인자로 Signal & Store를 받으며, 두 번째 인자로 신호가 변경될 때 실행할 함수를 받습니다. 추가로 on은 defer 옵션을 제공하는데, 이를 사용하면 계산..

한 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 하지만 props는 자신 바로 위 컴포넌트의 값만 전달 받을 수 있다는 제약이 있어, 한 단계 더 위의 컴포넌트로부터 값을 받으려면 중간 컴포넌트가 props을 전달해주어야 합니다. 이때문에 컴포넌트 계층이 길어질수록 중간 컴포넌트들은 자신은 사용하지도 않는 props를 받아야 하는 문제가 있습니다.Context API를 사용한다면, props의 명시 없이도 자손 컴포넌트들에게 props를 전달해줄 수 있습니다. Context API에는 크게 두 가지 함수가 있습니다. createContext( ) : context 객체를 생성하여 반환합니다.useContext(context) : context 객체를 사용하여 provider ..

※ Signal과 Store를 살펴보고 오면 도움이 됩니다. SolidJS는 기본적으로 반응형 Signal을 사용하지만,때로는 Signal을 불변값(immutable)으로 다루는 것이 더 편리할 수 있습니다.produce() 함수는 Signal이나 Store를 불변성으로 다루기 위해 사용됩니다.불변성(Immutability) 프로그램을 실행하는데 있어 어떤 값들은 변경되면 치명적인 영향을 끼치는 경우도 있습니다. 때문에 다른 사람들과 협업할 때 함부로 값을 바꾸지 못하게 할 필요가 있으며, 이때 불변성을 통해 값이 변경될 수 없도록 보호할 수 있습니다. 불변 객체는 내부 상태를 제공하는 메소드를 제공하지 않거나, 방어적 복사(defensive-copy)를 통해서만 제공합니다. 대표적인 불변 객체의 예로 ..

VScode 기준으로 설명하겠습니다.node.js가 필요합니다. 자세한 설명은 공식 홈페이지에서 확인할 수 있습니다.여기서는 Vite라는 프로그램의 템플릿을 이용해 Solid를 설치하는 법을 설명해줍니다.https://www.solidjs.com/guides/getting-started https://www.solidjs.com/guides/getting-started www.solidjs.com1. 패키지 초기화 & 생성프로젝트를 시작하고자하는 경로로 들어가 아래 명령어를 실행합니다.이는 my-app이라는 이름의 solidjs 템플릿을 생성하는 명령어입니다.// JavaScript를 사용할 때npx degit solidjs/templates/js my-app// TypeScript를 사용할 때 npx ..