JAMstack 철학을 좋아하지만 데이터베이스 기반 웹 앱이 필요하십니까? 

훌륭한 개발자 경험과 쉬운 확장을 원하십니까? 레드 우드가 여기 있습니다! 

React, GraphQL 및 Prisma를 기반으로 하는 Redwood는 좋아하는 구성 요소 및 개발 워크 플로와 함께 작동하지만 간단한 규칙 및 도우미를 통해보다 나은 환경을 만들 수 있습니다.

https://redwoodjs.com/ 

구성 방법 

레드 우드는 프론트 엔드와 백엔드 코드를 모두 단일 모노 레포에 배치합니다.

/web에는 프론트 엔드가 포함되어 있으며 CDN을 통해 정적 파일로 제공됩니다 (자동으로 코드 분할).

/api에는 동적 데이터가 필요할 때 프런트 엔드가 호출하는 백엔드 서버리스 기능 (기본적으로 GraphQL API)이 포함되어 있습니다.

Routing 

Redwood는 종종 간과 되는 (그러나 중요한) 앱 부분에 놀라운 혁신을 가져 오는 자체 라우터를 갖추고 있습니다. 

명명 된 경로를 사용하면 정의한 이름으로 경로를 참조 할 수 있으며 경로 매개 변수 유형은 데이터 유형 또는 사용자 정의 함수 등을 기반으로 값을 강제 처리합니다.

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {

  return (

    <Router>

      <Route path="/" page={HomePage} name="home" />

      <Route path="/users/{type}" page={UsersPage} name="users" />

    </Router>

  )

}

// web/src/components/Admin/Admin.js

import { Link, routes } from '@redwoodjs/router'

const Admin = () => {

  return (

    <h1><Link to={routes.home()}>My CRM</Link></h1>

    <Link to={routes.users({type: "admin"})}>View Admins</Link>

  )

}

Cells 

API에서 데이터를 검색하고 로딩 자리 표시자를 표시 한 다음 결과를 표시하는 순서가 너무 일반적이므로 Redwood는 이를 선언적 코드 패턴으로 코드화하여 간단하고 읽기 쉬운 코드를 생성합니다! 

셀이라고 부르며 GraphQL 쿼리,로드, 비어 있음, 오류 및 성공 상태를 포함합니다. 각 상태는 셀의 상태에 따라 자동으로 렌더링 됩니다.

export const QUERY = gql`

  query USERS {

    users {

      id

      name

    }

  }

`

export const Loading = () => <div>Loading users...</div>

export const Empty = () => <div>No users yet!</div>

export const Failure = ({ message }) => <div>Error: {message}</div>

export const Success = ({ users }) => {

  return (

    <ul>

      { users.map(user => (

        <li>{user.id} | {user.name}</li>

      ))}

    </ul>

  )

}

Services 

레드 우드는 모든 비즈니스 로직을 서비스 한 곳에 두었습니다. 

GraphQL API 또는 백엔드 코드의 다른 위치에서 사용할 수 있습니다.

레드 우드는 모든 성가신 일을 처리합니다. 

GraphQL 엔드 포인트를 생성하고 사용하는 것이 얼마나 쉬운 지 확인하십시오 

(우리는 import 문을 생략하거나 코드를 작고 정직하게 만드는 것을 부정하지 않았습니다!) :

export const schema = gql`

  type User {

    id: Int!

    name: String!

  }

  type Query {

    users: [User]

  }

`

// api/src/services/users/users.js

export const users = () => {

  return db.user.findMany()

}

// web/src/components/Users/Users.js

export const QUERY = gql`

  query USERS {

    users {

      id

      name

    }

  }

`

export const Success = ({ users }) => {

  return JSON.stringify(users)

}

Generators 

상용구를 반복적으로 제거하더라도 Redwood 파일을 시작하려면 약간의 코드가 필요하며 올바른 디렉토리에 작성해야 합니다. 

문제 없습니다. 컴퓨터가 그렇게하도록하십시오! 

Redwood에는 셀, 페이지, 레이아웃, 서비스 등을 생성하는 여러 생성기가 포함되어 있습니다. 

데이터베이스 테이블에서 엔드-투-엔드 CRUD 작업을 실행하는 데 필요한 모든 페이지를 만드는 스캐 폴드 생성기도 있습니다.

# Create a cell for Users

$ yarn rw generate cell Users

# Create a layout named Admin

$ yarn rw generate layout Admin

# Create an About page and set the URL to /about

$ yarn rw generate page About /about

# Read the DB schema and create the SDL file for the User table

$ yarn rw generate sdl User

# Create api/src/services/email/email.js and include CRUD functions

$ yarn rw generate service Email --crud

# Create the SDL, service, cells, pages and components to CRUD a User

$ yarn rw generate scaffold User

Forms 

React 앱에서 폼 작업은 성가신 일입니다. 

Redwood는 복잡성을 제거하고 일반 HTML 입력으로 자유롭게 작업 할 수 있지만 약간의 유효성 검사 및 오류 처리 기능이 제공됩니다. 

클라이언트 및 서버 측 오류를 자동으로 표시하고 다른 React 구성 요소처럼 스타일을 지정하십시오.

import { Form, Label, TextAreaField, FieldError, Submit } from "@redwoodjs/web"

export const Comment = () => {

  const onSubmit = (data) {

    console.info(`Submitted: ${data}`)

  }

  return (

    <Form onSubmit={onSubmit}>

      <Label name="comment" errorStyle={{ color: "red" }} />

      <TextAreaField

        name="comment"

        errorStyle={{ borderColor: "red" }}

        validation={{ required: true }}

      />

      <FieldError name="comment" errorStyle={{ color: "red" }} />

      <Submit>Send</Submit>

    </Form>

  )

}