리믹스 첫 모습

React 생태계 블록의 새로운 아이인 리믹스에 대해 들어 보셨을 것입니다.

이 프레임워크는 React 세계의 유명 인사들에게서 나옵니다. React에 대한 많은 교육을 제공하고 사람들이 웹사이트 구축을 볼 수 있도록 도와준 후, 그들은 웹사이트를 위한 하나의 새로운 다리를 만들기로 결정했습니다.

동적 프런트 엔드 및 백엔드 처리에 중점을 둡니다.
다음 네 가지 사항을 주요 초점으로 합니다.

높은 서버/클라이언트 모델: 그들의 전제는 우리(개발자)가 빠른 서버를 선택할 수 있지만 최종 사용자 네트워크를 빠르게 만들 수는 없다는 것입니다. 따라서 해당 부분을 고도로 최적화해야 합니다

.

웹 표준 신뢰: HTML 기본값을 사용합니다. 요즘은 너무 좋아서 응용 프로그램을 향상시키는 데 사용해야 합니다

.

점진적 향상: 여기에서 그들이 집중하는 주요 부분은 JavaScript를 사용하거나 사용하지 않고 웹이 작동하도록 만드는 것이지만 JavaScript를 추가할 수 있는 방법은 부담이 아닌 향상에 중점을 둡니다.

너무 추상화하지 마세요. 기본 웹 기능에 매우 가깝기 때문에 Remix에서 능숙해진다는 것은 웹용 빌드에 능숙해진다는 것을 의미합니다. 많은 API가 직접적인 기본 기능을 활용합니다.

그렇다면 이 네 가지의 공통점은 무엇일까요?

이를 통해 Remix의 슬로건인 더 나은 웹사이트를 만들 수 있습니다. 저는 이 전제를 좋아합니다.

리믹스 시작하기

기본 스타터를 좋아하지 않는 사람은 누구입니까? 저에게는 Remix를 탐색하고 시험해 볼 수 있는 좋은 방법입니다.

Remix는 기본적으로 몇 가지 기본 템플릿과 함께 제공되며 작성 당시에는 다음과 같습니다.

블루스 스택: 크고 빠른 프로덕션 앱을 위한 에지의 Postgres

인디 스택: 블로그, 콘텐츠 및 MVP와 같은 동적 데이터에 적합한 SQLite.

그런지 스택: 서버리스 기능, DynamoDB, AWS에서 호스팅되는 프로덕션 시스템용

이러한 스택을 사용하도록 제한되지는 않지만 시작할 때 쉽게 선택할 수 있습니다.

Note: You can always change/upgrade the stack

인디 스택에 remix-website라는 새 리믹스 프로젝트를 생성하여 시작합니다.

npx create-remix --template remix-run/indie-stack remix-website

설치가 완료되면 다음 명령으로 앱을 실행할 수 있습니다.

npm run dev

이제 http://localhost:3000를 방문하면 다음과 같이 표시됩니다.



이제 완전히 작동하므로 첫 번째 경로를 추가하겠습니다.

그 전에 우리 홈페이지에 대한 링크를 추가하여 정보 페이지로 이동하겠습니다.

색인은 app/routes/index.tsx에서 찾을 수 있습니다.

<div className="mx-auto mt-16 max-w-7xl text-center">
  <Link
    to="/about"
    className="text-xl text-blue-600 underline"
  >
    About
  </Link>
</div>

Note: Good to note Remix comes with Tailwind by default in this stack

이제 route 디렉토리 내에 이 페이지를 생성하고 호출할 수 있습니다 about.tsx .

export default function About() {
  return (
    <main>
      <h1>About page</h1>
    </main>
  );
}

이제 응용 프로그램을 새로 고치면 정보 링크를 클릭하고 이 새 페이지를 볼 수 있습니다.

코드는 GitHub에서 언제든지 찾을 수 있습니다.

다음 단계

이제 가장 기본적인 설정이 완료되었으므로 다음을 살펴보겠습니다.

공유 레이아웃

동적 페이지

로컬 데이터베이스

양식

기타

이것들은 다가오는 기사들 사이에서 공유될 것이므로 저와 함께 Remix를 배우고 싶다면 눈을 떼지 마세요 🤘.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나