Remix(프레임워크)

이 문서는 토막글입니다.

토막글 규정을 유의하시기 바랍니다.

웹 프레임워크 및 기술
{{{#!wiki style="margin:0 -10px" {{{#!folding [ 펼치기 / 접기 ] {{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"	^$ 유료 포함 • ~~취소선~~ 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드	<colbgcolor=#fcfcfd,#272935> CSS	Bootstrap • Tailwind CSS • Bulma • Foundation • Skeleton • Pico
	JSX	React • SolidJS • Astro • Preact • Gatsby • Remix • Inferno • Qwik
	JS	Angular • Svelte • Backbone.js • jQuery • Astro • htmx • Ember.js • Lit • 11ty • Marko • VanJS • Alpine.js
	Vue	Vue.js • VuePress • Gridsome • Quasar • Astro
	Python	Reflex
백엔드	Java	Spring • Struts • GWT • Grails • Jooby • Play! Framework^Scala
	Kotlin	Ktor
	JS	Express • NestJS • koa • Hono • fastify
	.NET	ASP.NET^$
	PHP	Laravel • Codeigniter • Reasonable • phalcon • Symfony • zend • CakePHP • FuelPHP • Yii • Slim • PHPixe
	Python	Django • Flask • FastAPI
	Ruby	Ruby on Rails • Sinatra
	Go	Gin • echo • Fiber
풀스택	JSX	Next.js • Astro • SolidStart • Remix • Qwik City
	JS	SvelteKit • Fresh • Astro • Marko
	Vue	Nuxt.js • Astro
	Java	Vaadin^$
	Python	Streamlit • Reflex
	Rust	Rocket • Actix • Leptos • Axum
하이브리드	.NET	Blazor
	Dart	Flutter
	Kotlin	Kotlin Multiplatform

}}}}}}}}} ||

<colcolor=#fff> Remix

종류	<colbgcolor=#fff,#000>프레임워크
라이선스	MIT 라이선스
언어	TypeScript
지원 문법	JSX
링크

1. 개요2. 상세

2.1. 라우팅2.2. 프로젝트 시작

3. Remix를 사용하는 기업이나 서비스4. 관련 문서

1. 개요

React Router를 기반으로 구축된 오픈소스 react 프레임워크.

2. 상세

Next.js 와 같이 풀스택 프레임워크이며, React 의 기능을 최대한 존중한다는 모토를 가지고 출발한 프레임워크이다.
React 18 출시 당시에는 업데이트가 느렸던 Next.js 와는 달리 버전업 만으로 바로 React 18 버전에 대응하여 주목받기도 했으며, OpenAI 에서 다른 프레임워크 대비 클라이언트 컴포넌트 구현의 편리하다는 이점을 이유로 Next.js 에서 이 프레임워크로 변경하여 또한번 주목받았다.

2.1. 라우팅

React 에서 SPA 어플리케이션 구축 시 사용하는 라우팅 모듈을 여기서 만들었기 때문에 라우팅 방식은 SPA 어플리케이션 구축 경험이 있다면 어렵지 않게 접근이 가능하지만, Next.js 등 여느 라우팅 지원 프레임워크와는 사뭇 다른 방식의 파일 라우팅 방식을 사용하고 있는데, 보통의 프레임워크에서는 하위 폴더의 파일을 라우팅으로 지정하면 완전히 다른 페이지로 취급하지만, Remix 에서는 상위 페이지 및 컴포넌트의 하위 컴포넌트로 취급한다.
예를 들면,

board._index.tsx: 게시물 목록
board.$boardSeq.tsx: 게시물 상세 (게시물 번호는 받는 동적 라우팅)

board.$boardSeq.comments.tsx: 게시물의 전체 댓글 목록

이렇게 라우팅을 구성하면, 게시물의 댓글 컴포넌트를 라우팅용 children 속성에 대응하는 컴포넌트인 <Outlet /> 을 통해 게시물 폴더에 있는 컴포넌트 안에 주입하여 댓글 컴포넌트를 표현할 수 있다.

물론 페이지 단위 및 현재 폴더의 단계 컴포넌트를 유지하면서 하위 라우팅을 사용하고 싶다면, 파일명 중간에 .을 사용하여 구분하도록 할 수 있다.
상기한 게시판 라우팅을 연장하여 예를 들면,

board.$boardSeq.edit.tsx: 게시물 수정 컴포넌트, 브라우저 상에서 접근 시 board.$boardSeq.edit 경로로 접근하지만, 게시물 폴더와 같은 레벨, 즉, 게시물 상세와 같은 레벨의 컴포넌트로 취급한다.

2.2. 프로젝트 시작

#!syntax sh
npx create-remix

3. Remix를 사용하는 기업이나 서비스

OpenAI : 원래 Next.js 를 주력으로 써왔으나, 2024년 9월 7일 이 Remix 로 프레임워크를 변경하여 주목을 받았다.

4. 관련 문서

React(라이브러리)