Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK

React로 빠르게 시작하기 - 웹 SDK

이 가이드에서 Atlas App Services 백엔드에 연결하고 익명 사용자를 인증하는 기본 React 웹 애플리케이션을 설정하는 방법을 설명합니다.

이 퀵스타트 가이드의 완성된 버전을 CodeSandbox에서 확인하실 수 있습니다. Realm 앱 ID를 붙여넣기만 하면 앱에 연결할 수 있습니다.

  • JavaScript CodeSandbox

  • TypeScript CodeSandbox

전제 조건

  • 이 가이드에서는 이미 Atlas App Services 백엔드를 생성하고 익명 인증을 활성화했다고 가정합니다.

  • 이 애플리케이션을 만들고 실행하려면 컴퓨터에 npm 이 설치되어 있어야 합니다.

  • create-react-app 문서에서는 npx 를 설치할 것을 create-react-app 권장합니다. 컴퓨터에 설치된 버전을 사용하는 대신 를 실행합니다.

절차

1

새 React 앱 설정

create-react-app을사용하여 새 애플리케이션 템플릿을 생성합니다.

npx create-react-app realm-web-react-quickstart
npx create-react-app realm-web-react-quickstart --template=typescript

새 앱으로 이동하여 realm-web 패키지를 설치합니다.

cd realm-web-react-quickstart
npm install --save realm-web
2

종속성 가져오기 & Realm 앱에 연결하기

Realm 웹 SDK에는 브라우저 애플리케이션에서 MongoDB Realm 애플리케이션에 연결하는 데 필요한 모든 것이 포함되어 있습니다. /src/App.js에서 다음 코드를 추가하여 웹 SDK를 가져옵니다.

import * as Realm from "realm-web";

이제 가져온 패키지를 사용하여 새 Realm.App을(를) 인스턴스화합니다. app 객체는 Realm 앱을 나타냅니다. 이를 사용하여 앱과 상호 작용하는 사용자를 인증하고 관리할 수 있습니다.

// Add your App ID
const app = new Realm.App({ id: APP_ID });
3

React 컴포넌트 생성

/src/App.js 다음 컴포넌트를 추가하여 지정된 사용자에 대한 세부 정보를 표시하고 사용자가 로그인할 수 있도록 합니다.

// Create a component that displays the given user's details
function UserDetail({ user }) {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
}
// Create a component that lets an anonymous user log in
function Login({ setUser }) {
  const loginAnonymous = async () => {
    const user = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
}
// Create a component that displays the given user's details
const UserDetail = ({ user }: { user: Realm.User }) => {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
};
// Create a component that lets an anonymous user log in
type LoginProps = {
  setUser: (user: Realm.User) => void;
};
const Login = ({ setUser }: LoginProps) => {
  const loginAnonymous = async () => {
    const user: Realm.User = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
};
4

App 구성 요소 만들기 및 내보내기

/src/App.js에서 현재 사용자를 로컬 상태에 저장하고 현재 사용자에 대한 세부 정보 또는 현재 인증된 사용자가 없는 경우 로그인 화면을 조건부로 렌더링하는 다음 구성 요소로 기존 App 구성 요소를 덮어씁니다.

const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState(app.currentUser);
  // If a user is logged in, show their details.
  // Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;
const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState<Realm.User | null>(app.currentUser);
  // If a user is logged in, show their details. Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;
5

앱 실행하기

이제 Realm 앱에 연결하고 로그인할 준비가 되었습니다! 변경 내용을 /src/App.js에 저장했는지 확인한 다음 프로젝트 루트에서 다음 명령을 실행합니다.

yarn start

이렇게 하면 애플리케이션을 제공하는 로컬 웹 서버가 시작됩니다. 성공하면 셸에 다음 출력이 표시되어야 합니다.

Compiled successfully!
You can now view realm-quickstart-web in the browser.
  Local:  http://localhost:3000

http://localhost: 를3000 엽니다. 브라우저에서 익명 사용자로 성공적으로 로그인할 수 있는지 테스트합니다.

요약

이 가이드를 성공적으로 완료했으면 App Services 백엔드에 연결하고 익명 사용자를 인증할 수 있는 React 애플리케이션이 생성되었을 것입니다.

다음

Atlas Device SDK Docs에 오신 것을 환영합니다