아카이브

Tailwindcss의 theme은 사용자가 직접 색상, 글꼴, 크기 등을 지정하여 변수처럼 사용할 수 있게 하는 기능입니다. 이렇게 정의된 변수를 theme variable이라고 합니다. Theme은 기본적으로 css 파일(보통 최상단인 index.css에 작성합니다)에서 다음과 같이 선언함으로서 사용할 수 있습니다.@theme { --[분류]-[variable 이름]: [variable 값];} 분류에는 색상, 글꼴 등 스타일의 종류가 들어가며, 이름은 자유롭게 설정이 가능합니다. 예를 들어 다음과 같이 설정할 수 있습니다.@theme { --color-main: #3a4578; // 색상 : main = #3a4578 --text-size-title: 7...

Zustand는 프레임워크 독립적인 상태관리 라이브러리중 하나입니다. Store라는 개념을 이용하여 불필요한 props전달을 최소화합니다. 다음과 같이 설치합니다.npm install zustand ※ Zustand는 현재 프레임워크 독립 라이브러리이나, 처음에는 React 전용 라이브러리로 개발되었습니다. 따라서 아래는 React를 기준으로 서술하였습니다.create( )Store를 생성하는 함수입니다. 속성값과 메소드를 포함한 객체를 반환하며, Store 안에서 속성값은 State, 메소드는 Action이라고 표현합니다. 기본적으로 set과 get 두 가지 매개변수를 받습니다. get 함수는 자기 자신 Store 객체를 반환합니다. set 함수는 Store의 값을 설정할 수 있습니다. 만약 인수로 콜..

Prop Drilling일반적으로 애플리케이션을 구성할 때는 다음과 같이 최상단의 App 컴포넌트부터 시작해 하위 컴포넌트를 포함시키는 구조를 사용합니다. 그런데 만약 최상단의 App 컴포넌트와 최하단의 Comp3 컴포넌트가 같은 상태값을 공유하여 사용해야 한다면, Comp1를 통해 해당 값은 props로 전달해주어야 합니다. 이 과정에서 Comp1은 불필요한 props가 늘어나게 됩니다. 하위 컴포넌트인 Comp3과 Comp5가 상태값을 공유하는 경우에도 동일하게 불필요한 props 전달이 이루어집니다. 이렇게 컴포넌트 간 공유해야 하는 상태값이 많아질수록, 자신은 사용하지 않으면서 넘겨주어야 하는 props의 수가 많아지게 됩니다. 이렇게 불필요한 props가 많아지는 현상을 Prop Drilling..

Tailwind CSS는 CSS-in-JS 프레임워크의 일종으로, CSS 대신 클래스명을 제공하여 간단한 문자열 만으로도 HTML 스타일이 구현되는 유틸리티 우선 CSS 프레임워크(utiliy-first-css framework)입니다. Tailwind CSS의 장점이라고 하면 기존의 많은 분량을 차지하는 CSS 스타일을 극단적으로 줄여 코드를 가볍게 만들 수 있다는 것입니다. this is css style this is tailwind style 단점은, 스타일이 커질수록 가독성이 떨어진다는 것입니다.const inputLineStyle = ` border-b border-gray bg-transparent text-2xl text-gray w-full h-16 p..

Solid-Meta와 Solid-Router를 사용합니다.App.tsximport Pages from './pages';const App: Component = () => { return ( );};/Pages/index.tsxconst Pages = () => { return ( {/* ... */} )}export default Pagesindex.tsx 파일이 있다면 다른 곳에서 Pages 폴더만 호출해도 index.tsx가 기본 파일로 호출되기 때문에, Pages 컴포넌트를 불러올 수 있습니다.

Solid-Router는 React Router를 기반으로 한 패키지로, DOM 구조에서 URL 주소를 기반으로 한 페이지 전환을 위해 설계된 패키지입니다. 이를 통해 Solid에서 여러 개의 페이지를 가진 DOM 구조를 구현할 수 있습니다. Solid-Router의 컴포넌트들은 아래와 같이 호출할 수 있습니다.import { A, HashRouter, MemoryRouter, Navigate, Route, Router } from "@solidjs/router";1. Router & HashRouter라우팅을 구성하는 최상단 컴포넌트입니다. Route들을 포함하는 wrapper역할을 합니다. {/* routes */}만약 URL에 해시값이 포함되어 있다면, HashRouter를 사용합니다. {/* ro..

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는 두 번째 값을 추가로 반환할 ..