Solid 프로젝트 시작하기

개인적으로는 러스트로 프론트엔드까지 해야한다는 입장이지만

시장 상황은 오로지 리액트만 찾는 것이 현실입니다.

저도 현실 순응을 위해 리액트 프로젝트를 오랜만에 시작하려 했더니

새로운 것들이 많이 생겼더라고요.

 

일단 요새 리액트 프로젝트 시작은 Vite 아니면 Next로 하고 있는 것 같습니다.

Svelte를 계속 써왔기 때문에 Vite로 리액트 프로젝트를 만들 수 있는 건 알고 있었는데

이쪽이 대세가 될 줄은 몰랐네요.

 

 

새로운 프로젝트를 시작해보려고 아래의 명령을 실행했습니다.

npm create vite@latest

 

 

프레임워크 선택 화면부터 뭐가 많네요.

 

아는 것 반 모르는 것 반이라 물어봤습니다.

 

각 웹 프레임워크에 대한 설명과 점유율, 성능, 추세를 요약하면 다음과 같습니다.

Vanilla: 순수 자바스크립트로 프레임워크 없이 직접 개발하는 방식입니다. 가장 가볍고 성능이 뛰어나지만 규모가 커질수록 관리가 어려워집니다. 최근에는 코드 단순함과 빠른 초기 로딩 때문에 작고 빠른 앱에 다시 주목받는 추세입니다.

Vue: 가볍고 배우기 쉽고 성능이 좋은 프레임워크로, 컴포넌트 기반 UI 개발에 강점이 있습니다. 커뮤니티와 생태계가 크며, 점유율은 꾸준히 높고 증가 추세입니다. 디렉티브와 반응성 시스템이 뛰어나며 빠른 렌더링을 지원합니다.

React: 가장 인기 있는 프레임워크로, Virtual DOM으로 효율적인 UI 업데이트와 강력한 생태계를 자랑합니다. 점유율은 매우 높지만 규모가 커질수록 퍼포먼스 최적화가 필요합니다. Hooks 도입 이후 개발 경험이 크게 향상되었고, 전체적으로는 안정적인 성장세입니다. Preact: React와 API 호환되면서 크기를 크게 줄인 경량화 버전입니다. 모바일 등 리소스가 한정된 환경에서 성능이 좋고, 점유율은 React 대비 작지만 빠르게 성장하고 있습니다.

Lit: Web Components 표준 기반으로 빠르고 가벼우며, 빌드 없이 바로 작동합니다. React 대비 16-30% 빠른 렌더링 성능이 특징이며 점차 관심이 늘고 있고 성장 중입니다.

Svelte: 컴파일 타임에 대부분 작업을 처리해 가상 DOM 없이 빠른 렌더링을 제공합니다. 번들 크기가 작고 성능이 매우 뛰어나며, 학습 곡선이 완만하고 모바일 최적화에 강점이 있습니다. React 대비 빠르게 성장하는 추세입니다.

Solid: React 스타일의 선언적 UI를 유지하면서도 세밀한 반응성으로 최고의 성능을 자랑합니다. React 대비 훨씬 빠른 실행 속도를 내며 점유율은 낮지만 주목받고 있습니다.

Qwik: 최초 로딩 시 JS를 거의 보내지 않고 필요한 시점에만 JS를 실행하는 혁신적 접근법으로 극초기 로딩 속도가 매우 빠릅니다. 아직 초기 단계지만 퍼포먼스 중심으로 주목받고 있습니다.

Angular: 구글이 지원하는 대형 프레임워크로 양방향 바인딩과 강력한 기능을 제공합니다. 대규모 앱에 적합하지만 무거움과 복잡성 문제로 인해 점유율이 다른 프레임워크 대비 주춤한 상태입니다.

Marko: 서버 사이드 렌더링과 빠른 클라이언트 렌더링에 강점을 가진 프레임워크로, 주로 대형 웹사이트에 사용됩니다. 점유율은 낮지만 신뢰성 높은 성능을 제공합니다[추가 정보는 제한적].

요약하면 React와 Vue는 점유율이 가장 크고 안정적 성장세이며, Svelte와 Solid, Qwik은 최신 퍼포먼스 최적화 추세로 급성장하는 중입니다. Angular는 레거시 대형 프로젝트에 주로 쓰이고 있으며, Preact와 Lit는 경량화와 표준 호환을 무기로 점차 사용자가 늘어나고 있습니다.

 

 

이 중에서는 Svelte, Sveltekit의 열렬한 지지자이기는 한데 최근에 운영중인 서비스를 React에서 Solid로 전환한다는 이야기를 본적이 있어서 Solid에 관심이 가더라고요. 비슷하기도 하고, 이쪽으로 전환하는 수요도 생기지 않을까 싶은 생각이들어 한 번 시작이라도 해보기로 했습니다.

 

다음 단계에서 언어를 선택하나 싶었는데 또 뭔가 새로운게 보입니다.

 

 

"TanStack Router"는 React와 같은 자바스크립트 프레임워크에서 사용하는 최신 라우팅 라이브러리입니다. 타입스크립트 기반으로 강력한 타입 안전성을 제공하며, 파일 기반 라우팅(File-based Routing)을 지원해 파일을 생성하면 자동으로 URL 경로가 매핑되는 구조로 개발 효율성을 높이는 게 장점입니다. 또한 코드 분할, 중첩 레이아웃, 효율적 데이터 로딩 같은 고급 기능도 갖추고 있어 대규모 애플리케이션에도 적합합니다.

명령어 "npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive"는 pnpm이나 npm을 이용해 TanStack Router 기반의 최신 샘플 프로젝트를 Solid 프레임워크를 사용하여 생성하는 방법입니다.

- "npm create"는 최신 패키지 기반 템플릿 프로젝트를 생성하는 명령어입니다.
- "tsrouter-app@latest"는 TanStack Router 관련 템플릿(보통 TypeScript 기반)을 지정합니다.
- "TARGET_DIR"는 생성할 프로젝트 폴더 이름(경로)입니다.
- "--framework Solid"는 React 대신 Solid라는 UI 프레임워크를 사용하겠다는 옵션입니다.
- "--interactive"는 선택사항을 대화형으로 받아 설정할 수 있게 합니다.

즉, 이 명령어는 Solid 프레임워크용 TanStack Router 기본 앱을 자동으로 설정하는 스크립트라 볼 수 있습니다. Solid 개발 환경에서 TanStack Router를 쉽게 시작할 때 사용합니다.

 

뭐든 라우팅을 사용할 예정이니 선택해봅니다.

 

다음 선택은 파일 라우터와 코드 라우터입니다.

Sveltekit을 사용하면서 파일 라우팅에 길들여진 몸이라 File Router를 선택했습니다.

 

테일윈드는 쓰지 않는 것으로 결정했습니다.

한참 열심히 쓰던 때가 있었는데 요즘은 AI가 CSS를 잘 만들어주기도 하고

프로젝트가 점점 커지다보면  테일윈드로 작성한 스타일이 관리가 안되는 시점이 오는데

그 때 가서 고치기에는 너무 늦습니다. 

디자인 시스템이 있는 환경에서는 오히려 방해가 되는 것 같더라고요.

요즘엔 되도록 순정으로 가려고 하고 있습니다.

그런 의미에선 Lit을 쓰는 것이 제 방향성과 맞기는 한데요.

요거는 나중에 한 번 시도해보겠습니다.

 

또 새로운 것이 나왔습니다.

 

위의 툴체인 선택 화면은 개발 환경에서 코드 품질과 스타일 검사를 위해 선택할 수 있는 도구 목록입니다. 각 항목에 대해 설명드리면 다음과 같습니다.

- None: 별도의 코드 스타일이나 검사 도구를 사용하지 않음을 의미합니다.
- Biome: 코드 포맷팅과 정적 분석 기능을 제공하는 도구로, JavaScript 및 TypeScript 코드의 스타일과 품질을 관리합니다. ESLint와 비슷한 역할을 수행하지만 좀 더 통합된 환경을 제공합니다.
- ESLint: 가장 널리 사용되는 JavaScript/TypeScript 정적 코드 분석 도구입니다. 코드의 문법 오류, 스타일 문제, 버그 가능성 등을 검사하여 개발자가 더 안정적이고 일관성 있는 코드를 작성하도록 돕습니다.

즉, 이 툴체인 선택은 Solid 같은 프레임워크 프로젝트를 만들 때 사용할 코드 스타일 검사 및 정적 분석 도구를 결정하는 단계입니다.

 

써본 적은 없지만 Biome을 선택했습니다.

 

뭐가 이렇게 고를 것이 많나요.

Clerk, Chadcn, MCP, Sentry를 빼고는 뭔지 잘 모르겠습니다.

 

각 애드온(add-on)의 설명과 필요한지 여부는 다음과 같습니다:

Clerk: 사용자 인증(로그인, 회원가입, 세션 관리 등)을 쉽게 추가할 수 있는 도구입니다. 인증 기능이 필요하면 꼭 선택하세요.
Convex: 현재 정보에서는 구체적 정의가 없지만, 일반적으로 Convex는 볼록 최적화 관련 용어이며, 애드온 맥락에선 특정 서비스일 수 있어 추가 확인 필요합니다.
DB: 데이터베이스 관련 기능(저장, 조회)을 추가합니다. 애플리케이션에서 데이터 저장이 필요하면 선택합니다.
Form: 폼 관리 기능을 제공합니다. 사용자 입력 폼이 필요한 경우 유용합니다.
MCP: 대규모 언어 모델(AI)과 외부 데이터/시스템 연결을 위한 표준 프로토콜입니다. AI 모델과 연결할 때 필요합니다.
Neon: 서버리스(Postgres) 데이터베이스 서비스로, 서버리스 환경의 안정적인 DB가 필요할 때 선택합니다.
Netlify: 배포 및 서버리스 백엔드 서비스입니다. 정적 사이트나 웹앱을 쉽게 배포하려면 선택합니다.
oRPC: 타입 안전한 API 개발 도구로, 타입스크립트 기반에서 안전하게 API를 구축하려면 선택합니다.
Sentry: 오류 추적 및 성능 모니터링 도구로, 앱 안정성 확보가 필요하면 필수입니다.
Shadcn: UI 컴포넌트 라이브러리일 가능성이 큽니다. UI 개발을 빠르게 하려면 도움이 됩니다.
Start: 프로젝트 초기 설정 및 구동에 관련된 애드온일 가능성이 높습니다.
Store: 상태 관리 라이브러리입니다. 애플리케이션 상태를 관리할 때 필요합니다.
T3Env: 환경변수 관리 도구로, 여러 환경에서 앱 실행 시 환경변수를 쉽게 관리합니다.
tRPC: 타입 안전한 원격 프로시저 호출(RPC) 라이브러리로, 프론트엔드와 백엔드 간 타입 안전 API 통신에 유용합니다.
Table: 데이터 테이블 컴포넌트 또는 기능을 추가합니다. 테이블 UI가 필요할 때 선택합니다.
Query: 데이터 쿼리 및 캐싱 기능을 제공하는 라이브러리로, 서버 상태 관리에 쓰입니다.

필요한 애드온은 프로젝트 목적에 따라 다릅니다. 예를 들어, 인증이 필요하면 Clerk, 데이터 저장이 필요하면 DB/Neon, 에러 모니터링은 Sentry, 타입 안전 API는 oRPC 또는 tRPC, UI 컴포넌트는 Shadcn, 상태 관리는 Store에 선택하면 됩니다. 배포는 Netlify가 편리합니다. 폼 입력이 많다면 Form을 고려하세요.

 

저만 모르는 것은 아니네요. 퍼플렉시티도 모르다니.

여기에선 아무것도 선택하지 않고 넘어가겠습니다.

 

 

Solid를 어떻게 사용하는지 참고하려고 선택했습니다.

물론 완전히 새로운 프로젝트를 만들 예정이라면 선택하지 않아야겠죠.

 

 

프로젝트 생성의 전체 과정입니다.

 

프로젝트 폴더로 이동해서 README.md 파일을 보니 .env 파일에 ANTHROPIC_API_KEY를 넣으라고 합니다.

요 부분은 무시하고 일단 빌드와 실행을 해보겠습니다.

 

혹시 pnpm을 설치하지 않으셨다면 먼저 설치해주시기 바랍니다.

 

npm install -g pnpm

 

 

실행에 필요한 의존성을 설치합니다.

 

pnpm install

 

 

 

프로젝트를 실행해봅니다.

 

pnpm run dev

 

 

 

웹브라우저 주소창에 아래의 주소를 입력해서 들어가봅니다.

 

http://localhost:3000/

 

 

 

 

프로젝트를 열어보니 역시 생김새는 React와 비슷한 느낌이네요.

 

 

example에서 TanStack Chat을 선택하면서 그 전의 선택들이 무색하게 되어버렸네요.

 

실행 화면을 보니 뭔가 백엔드가 포함된 느낌이라 찾아보니 TanStack Start가 풀스택 프레임워크를 만들어준다고 합니다.

Next 대신 사용하면 될 것 같기도 한데 개인적으로 Next든 Sveltekit이든 SSR 용도까지는 괜찮다고 생각해도

이걸로 DB에 접근하거나 본격적으로 백엔드로 사용하는 건 좀 불안한 면이 있다고 생각합니다.

(ASP.NET을 했던 입장으로 할 말이 아닌거 같기는 하지만;)

 

라이브러리의 불안전한 부분에서 발생하건 사용자의 실수로 발생하건 API 키를 노출하게 되거나 다른 문제들을 유발할 수 있다고 생각해서 개인적으로는 프론트와 백엔드는 분리되어야 한다고 생각하고 있습니다.

 

 

예제 프로젝트에서 쓰인 TanStack이 무엇인지 궁금해서 자료를 더 찾아봤습니다.

 

https://tanstack.com/

TanStack | High Quality Open-Source Software for Web Developers

 

 

TanStack 라이브러리 생태계
TanStack은 웹 개발을 위한 강력한 오픈소스 라이브러리 모음집으로, 헤드리스하고 타입 안전한 유틸리티들을 제공합니다. 각 라이브러리는 특정 도메인에 특화되어 있으며, 높은 성능과 개발자 경험을 중시하여 개발되었습니다.


TanStack Query (구 React Query)

용도
서버 상태 관리를 위한 라이브러리로, 웹 애플리케이션에서 서버 데이터 가져오기, 캐싱, 동기화, 업데이트를 간편하게 처리합니다.

주요 기능
- 데이터 캐싱 및 재사용: 동일한 queryKey로 요청된 데이터를 캐시에서 재사용
- 자동 백그라운드 갱신: 데이터가 stale 상태가 되면 자동으로 서버에서 새 데이터를 가져옴
- 간편한 상태 관리: isLoading, isPending, isError 등의 상태를 자동으로 관리
- 무한 스크롤: useInfiniteQuery 훅으로 무한 스크롤 구현 지원
- 쿼리 재시도: 요청 실패 시 기본적으로 3번 재시도

장점
- 반복적인 데이터 fetching 코드 감소
- 서버와 클라이언트 간 데이터 동기화 최적화
- 캐싱을 통한 불필요한 API 호출 방지
- 무한 스크롤, 쿼리 취소, 오프라인 mutation 지원

단점
- SWR(4.2kB)에 비해 번들 크기가 큰 편(11.4kB)
- 기능이 많아 초기 학습 곡선이 있을 수 있음


TanStack Router

용도
타입 안전한 파일 시스템 기반 라우팅을 제공하는 React 라우터 라이브러리.

주요 기능
- 파일 기반 라우팅: Next.js처럼 직관적인 디렉토리 구조 기반 라우팅
- 타입 안전성: TypeScript와 완벽 통합되어 런타임 오류 방지
- 자동 코드 분할: Critical과 Non-Critical 라우트 구분으로 성능 최적화
- 자동 완성: Link 컴포넌트의 to 속성에서 경로 자동 완성 지원

장점
- 컴파일 시점에 라우팅 오류 감지
- 초기 로딩 시 필요한 리소스만 로드하여 성능 개선
- React Router보다 간편하고 빠른 개발
- 중첩 라우팅과 레이아웃 관리 용이

단점
- 상대적으로 새로운 라이브러리로 커뮤니티 생태계가 작음
- 기존 React Router 코드 마이그레이션 비용


TanStack Table

용도
강력한 테이블과 데이터그리드 생성을 위한 헤드리스 라이브러리.

주요 기능
- 컬럼 관리: 정렬, 필터링, 그룹화, 순서 변경, 크기 조절
- 행 관리: 선택, 확장/축소, 페이지네이션, 고정
- 전역 기능: 전체 테이블 검색, 필터링
- 가상화 지원: TanStack Virtual과 연동하여 대용량 데이터 처리

장점
거의 모든 형태의 테이블 구현 가능
- 헤드리스 설계로 자유로운 스타일링
- 높은 성능과 개발자 경험 중시
- React, Vue, Solid 등 다양한 프레임워크 지원

단점
- 문서화가 완벽하지 않아 학습에 시간 소요
- 데이터나 컬럼 참조 변경 시 무한 렌더링 주의 필요


TanStack Virtual

용도
대용량 리스트의 가상 스크롤링을 통한 성능 최적화 라이브러리.

주요 기능
가상화: 화면에 보이는 요소만 렌더링하여 DOM 수 최소화
동적 높이: 각기 다른 높이를 가진 리스트 아이템 지원
스크롤 제어: scrollToOffset, scrollToIndex 함수 제공

장점
- 수만 개 아이템도 원활한 성능 보장
- 동적 높이 지원으로 유연한 레이아웃 구현
- 메모리 사용량 최소화

단점
- 구현 복잡도가 높아 초기 설정 시간 소요
- 기존 라이브러리 대비 생태계가 작음


TanStack Form

용도
타입 안전한 폼 상태 관리 라이브러리.

주요 기능
- 제어된 입력: 모든 폼 필드를 제어 상태로 관리
- 유효성 검사: 고급 유효성 검사 기능과 비동기 검증 지원
- 타입 안전성: TypeScript와 완벽 통합

장점
- React Hook Form 대비 더 깔끔한 상태 관리
- 예측 가능한 제어된 입력 방식
- 복잡한 폼 요구사항 충족 가능

단점
- React Hook Form에 비해 상대적으로 새로운 라이브러리
- 제어된 입력만 지원하여 비제어 폼 방식 사용 불가


TanStack Start

용도
TanStack Router 기반의 풀스택 React 프레임워크 (현재 베타).

주요 기능
- 서버 사이드 렌더링: 완전한 문서 SSR과 스트리밍
- 서버 함수: 서버 측 로직 실행 지원
- 번들링: Vite, Nitro 등 통합

장점
- 타입 안전한 풀스택 개발 환경
- Next.js의 대안으로 부상
- TanStack 생태계와의 완벽한 통합

단점
- 아직 베타 버전으로 프로덕션 사용에 제한
- Next.js 대비 생태계와 커뮤니티가 작음


TanStack Store

용도
외부 스토어 상태 관리를 위한 경량 라이브러리.

주요 기능
- 간단한 상태 관리: 전통적인 액션이나 리듀서 없이 useState처럼 사용
- 함수형 업데이트: 함수 업데이트만으로 상태 변경

장점
- 매우 간단한 API로 쉬운 학습
- 작은 번들 크기
- Redux나 Zustand의 대안

단점
- 상대적으로 새로운 라이브러리로 검증 부족
- 복잡한 상태 관리에는 제한적일 수 있음


TanStack 생태계는 각 도메인별로 특화된 강력한 도구들을 제공하며, 모든 라이브러리가 타입 안전성과 성능을 중시하여 개발되었습니다. 특히 헤드리스 설계를 통해 높은 자유도를 제공하며, 현대적인 웹 개발 트렌드에 부합하는 솔루션들을 제공합니다.

 

 

요 몇 년간 웹 프론트엔드를 하면서 느끼는건데

정말 어제와 오늘이 다르네요.

폭발적인 생태계가 계속 폭발을 거듭하는 느낌입니다.

다만 별똥별처럼 반짝 빛나고 사라지는 것들도 많네요.

 

요즈음에 느끼는건데

웹으로 먹고 살려면 일단 자바 스프링, 리액트는 해놓고 다른 것도 해보자는 생각이 듭니다.

엔지니어의 특성상 기술적으로 우위에 있다고 느끼는 것을 선택하고 싶지만

한국 시장 안에서는 대중적이지 않으면 선택받기가 쉽지 않네요.

(어디까지나 프리랜서와 외주 업무를 수행하는 관점에서 입니다.)

일단 자바 스프링과 리액트로 프로젝트를 하나 진행해보고

리액트 프론트엔드를 솔리드로 다시 만들어 보려고 생각하고 있습니다.

 

 

이번 게시물은 여기까지입니다.

감사합니다.