제가 알기로는 지금까지 최초이자 유일하게'React JS'라이브러리를 둘러싸고 서버 응용 프로그램을 구축한 사람입니다. 이 글에서'React JS'를 사용해서 다음'노드 JS'서버를 만들어야 하는 이유를 설득하고 싶습니다.

왜?😳

그렇다면 왜 이성적인 사람이'React JS'라는 서버를 위해 클라이언트 사용자 인터페이스를 구축하는 라이브러리를 사용합니까?비록 모든 사람들이 UI를 위해'React JS'를 사용하고 있지만, 사실은'React JS'는 실제로 어느 곳에서든 사용할 수 있다. 그곳에서 당신의 목표는 반응적이고 구성 요소 기반의 데이터 트리를 구축하는 것이다. HTML 트리든'React native'와 같은 기본 UI 요소 트리든 심지어 "react-three-fiber" 을 사용하여 게임을 만들 수 있다.'React JS'는 모든 임무에 정말 적합하다.
본고의 나머지 부분에서 저는 "React JS"가 구성 요소 기반의 반응식 데이터 트리를 만드는 데 도움을 줄 수 있음을 발견했습니다. 이것은 "Node JS"서버를 구축하는 일부분입니다.

HTTP "REACT JS" 서버🙃

그래서 내가 나에게 다음과 같은 질문을 할 때:
React JS를 사용하여 서버를 만들 수 있는 곳은 어디입니까?
제 첫 번째 생각은 HTTP 서버입니다.
HTTP 서버는 일반적으로 HTTP 루트 트리로 구성되어 있고 반응성과 재사용 가능한 구성 요소와 결합하면 좋은 것을 만들 수 있다고 확신하기 때문에 나는 라이브러리를 개발하여 "React JS"기능을 사용하여 HTTP 서버를 구축하기로 결정했다.
몇 시간 안에 "@react-fullstack/server-express" 의 첫 번째 버전을 만들었습니다. 이것은 "Express JS"기반의 "React JS"HTTP 서버를 만드는 데 사용되는 라이브러리입니다.
하지만약 2개월 후, 나는 여전히 "React JS"가 HTTP 서버에 정말 적합한지 확실하지 않다.HTTP 서버는 일반적으로 여전히 매우 정적이기 때문에 빈번한 업데이트가 필요하지 않기 때문에 "React JS"는 반응적인 사상을 바탕으로 구축된 라이브러리가 "Express JS"를 단독으로 사용하는 것보다 더 좋은 선택이 아닐 수 있습니다.

루트로 돌아가기 - React JS를 사용하여 서버에 레이아웃 만들기😎

신속 면책 성명😅

당신들이 추측하기 전에, 나는 "React JS"의 서버 쪽 렌더링을 가리킨다. 나는 정말 없다. 내가 말한 것은 새로운 것들이다. 내가 설명하겠다.

서버 측 렌더링 - 클라이언트와 렌더링🤺

지난 몇 년 동안 사람들은 사이트를 구축할 때 두 가지 선택 중에서 선택해야 했다

서버 사이드 렌더링 - 클라이언트에게 업무 논리를 공개하지 않지만 사용자의 상호작용 능력과 속도를 제한하는 방법입니다.

클라이언트 렌더링 - 사용자의 상호작용 능력, 반응성과 속도를 확장하는 방법이지만 업무 논리를 클라이언트에게 노출시키고 클라이언트를 위해 서버 API를 구축하여 상호작용을 해야 합니다.

그러나 일부 사람과 응용 프로그램에 있어서 이 두 가지 옵션은 부족하다. 예를 들어 나에게 "web-desktop-environment" 이라는 프로젝트를 만들려고 할 때 이 두 가지 옵션은 모두 부족하다. 나는 나의 모든 업무 논리가 서버에서 실행되기를 희망하지만 클라이언트 "React JS"웹 응용 프로그램의 능력, 속도와 반응 능력이 여전히 필요하다.

솔루션😎

"@react-fullstack/fullstack" 은 세 번째 옵션으로 클라이언트 응용 프로그램의 속도와 반응성으로 전체 스택인'React-JS'응용 프로그램을 구축하는 데 사용되지만 업무 논리가 드러나지 않고 클라이언트 렌더링처럼 서버 API를 구축할 필요가 없습니다.

근데 어떻게 하지?👩‍🏫

"@react-fullstack/fullstack" 의 목표를 실현하는 방식은'서버 사이드 실행'이라고 불리는 기술이다. 서버 사이드 실행에서 사용자가 사이트에 방문할 때마다 서버는'사용자 세션'을 만듭니다.'사용자 세션'의 목표는 클라이언트 웹에서 프로그램 사용자에게 어떤 보기 레이아웃, 보기에 포함되어야 할 데이터, 그리고 서버가 어떤 클라이언트 이벤트를 들어야 하는지 알려주는 것입니다."사용자 세션"은 클라이언트에서 서버까지의 이벤트와 서버 비즈니스 논리의 조합에 따라 백엔드에서 나온 새로운 보기와 데이터를 사용하여 업데이트됩니다.

고객은요?🤔

"@react-fullstack/fullstack" 에서 모든 클라이언트는 사실상 클라이언트가 지원하는 레이아웃 보기(기본적으로 "React JS"구성 요소)의 집합이다. 예를 들어 보기는'로그인 스크린'과'메인 스크린'을 지원할 수 있기 때문에 서버는 클라이언트에게'로그인 스크린'을 언제 렌더링해야 하는지,'메인 스크린'을 렌더링해야 하는지, 마지막으로 어떤 데이터(도구)를 전달해야 하는지를 알려야 한다.서버는 이렇게 할 수 있습니다. 예를 들어 로그인 화면에서 로그인 이벤트를 정탐합니다. 이 이벤트가 터치되면 클라이언트에게 로그인 사용자에 대한 새로운 데이터 (구성 요소 도구) 를 포함하는'메인 화면'을 표시합니다.

코드 예제👨‍💻

서버부터 시작하겠습니다.
주의: 이 코드는 "@react-fullstack/fullstack" 을 사용하여 응용 프로그램을 실제로 구축하는 추상적인 버전입니다. 더 진실한 코드 예시를 찾고 있다면, here을 찾을 수 있습니다.

// internal query for getting posts data
import { getPosts } from "./internalServerQueries";

// "user session" App
const Session = () => {
    // state hook for user log-in state
    const [isLoggedIn, logIn] = useState(false);
    return isLoggedIn ?
                /*
                    "LoginScreen" is the view the client should render,
                    "header" is some data that got fetched from the server
                    and "onLogIn" in an event the server should listen to
                */
               <LoginScreen header={"hello! please log-in"} onLogIn={() => logIn(true)} /> :
                /*
                    "HomeScreen" is the view the client should render,
                    "posts" is some data that got fetched from the server
                    and "onLogOut" in an event the server should listen to
                */
               <HomeScreen posts={getPosts} onLogOut={() => logIn(false)} />
}
// the main server "App"
const App = () => {
    return <Server>
            {
            // on each "user session" run the Session component
                () => <Session />
            }
            </Server>
}

마지막 한마디

"@react-fullstack/fullstack" 및 "@react-fullstack/server-express" 은 아직 초기 단계이지만 "React JS"라이브러리를 사용하여 HTTP 서버 또는 전체 스택 응용 프로그램을 만들고 싶다면 here을 보십시오.

시무엘 히즈미 / 반응 풀 스택

전체 스택 React 응용 프로그램을 만드는 데 사용되는 패키지

반응 풀 스택

"React-Fullstack"은 React 기반의 Fullstack 응용 프로그램을 만드는 라이브러리의 집합입니다!
"React-Fullstack"주요 패키지는

Fullstack 또는 npm i @react-fullstack/fullstack

express server npm i @react-fullstack/server-express

View on GitHub
읽어 주셔서 감사합니다. 질문이나 건의가 있으면 저를 찾거나 찾아주세요.