즉시 사용자 참여 유도: React SPA에 대화형 데모 삽입

천 마디 말보다 한 장의 사진이 더 가치가 있다면, 대화형 데모의 가치는 분명... 백만 달러일 것입니다.

앱의 목적을 이해하기 위해 유행어를 스크롤하는 것을 좋아하시나요? 아마도 그렇지 않을 것입니다. 그리고 나는 나의 최신 열정 프로젝트인 Wanna에 대해 그 모든 헛소리를 쓰고 싶지 않았습니다. 그래서 저는 더 흥미로운 솔루션을 추구했습니다. 사용자가 탐색할 수 있도록 자체 랜딩 페이지 내에 내 앱을 중첩시키는 것입니다!

이 gif는 263프레임이므로 263,000 단어의 가치가 있는 것 같아요

구현

React의 구성성 덕분에 거의 간단히 루트 앱 구성 요소를 렌더링하고 하루에 끝낼 수 있습니다.

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

그러나 몇 가지 문제에 직면하게 됩니다.

1. 데모 앱의 탐색은 실제 앱을 탐색합니다
2. 데모 앱은 실제 데이터를 검색하므로 실패하거나 제대로 표시되지 않을 수 있습니다
3. 사용자가 보고 있는 내용이 명확하지 않을 수 있습니다

이 문제를 해결해 보세요. React Router v6과 Apollo GraphQL을 사용하고 싶지만 기술에 관계없이 개념이 적용됩니다.

항해

데모 앱의 탐색을 실제 앱과 분리하기 위해 다른 탐색 제공자 내에 래핑합니다.

+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
+       // Hack to nest MemoryRouter inside BrowserRouter.
+       // https://github.com/remix-run/react-router/issues/7375
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}>
                <App />
+           </MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

Demo가 내부적으로 탐색하는 동안 브라우저가 동일한 페이지에 유지되도록 MemoryRouter를 사용합니다.

데이터

데모 앱에 가짜 데이터를 제공하기 위해 우리는 useState를 사용하여 클라이언트 앱 내에 가짜 "백엔드"를 유지하고 이를 모의 클라이언트 또는 서버(구현에 따라 다름)를 통해 제공합니다. 이는 나머지 앱 코드에 대한 최소한의 침해이며 수동 테스트를 위해 데모를 사용할 수도 있습니다. 빠르게 반복할 때 매우 편리합니다.

저는 mock-apollo-client를 사용했습니다. REST 또는 tRPC의 경우 nock와 같은 것을 사용할 수 있습니다. 자동화된 테스트를 위한 것이지만 여기에 꼭 필요한 것입니다.

먼저 요청 핸들러가 실제 백엔드를 모방하는 방식으로 데모 데이터를 쿼리하고 변경하는 모의 클라이언트를 만듭니다.

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

그런 다음 탐색에서와 마찬가지로 모의 클라이언트를 사용하여 새 공급자로 데모를 래핑합니다.

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <ApolloProvider client={demoClient}> 
            <UNSAFE_LocationContext.Provider value={null}>
                <MemoryRouter initialEntries={['/app']}>
                    <App />
                </MemoryRouter>
            </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

대신 모의 서버를 사용한 경우 해당 URL을 데모 앱의 실제 클라이언트에 삽입합니다.

비주얼

효과가 있어요! 이제 대화형 데모를 보고 있다는 것을 사용자에게 어떻게 분명히 알릴 수 있을까요?

Wanna는 모바일 우선이므로 휴대폰 프레임 내부에 데모를 렌더링하기로 결정했습니다. 내가 가장 좋아 보인다고 생각하는 장치(예: 데모 공간을 최대화하기 위한 최소 베젤)를 제공하기 때문에 devices.css를 사용했습니다. 하지만 단순화를 위해 여기서는 기본적으로 React를 지원하는 라이브러리인 React-device-frameset을 사용하겠습니다.

또한 확대/축소를 사용하여 데모 UI를 축소하고 페이지의 나머지 부분에 멋지게 중첩해 보겠습니다. Wanna에서는 를 사용할 때 이 확대/축소를 반전하고 설명해야 했습니다. visjs-html-nodes를 사용하여 초대 대상자 그래프를 그리지만 대부분은 "그냥 작동합니다".

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

위 내용은 즉시 사용자 참여 유도: React SPA에 대화형 데모 삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!