--- title: 실시간 데이터베이스 slug: docs-kr/platform/parse-server-live-query-example description: JavaScript에서 Parse 서버 라이브 쿼리를 설정하고 사용하는 방법을 알아보세요. 실시간 데이터 업데이트를 위한 기술적인 가이드입니다. image: https://www.back4app.com/_public/img/back4app-og.png createdAt: 2024-02-01T14:27:02.523Z --- # Parse Server 라이브 쿼리 사용 방법 ## 소개 라이브 쿼리는 **실시간 반응형 애플리케이션**에서 사용되도록 설계되었으며, 전통적인 쿼리 패러다임을 사용하는 것만으로는 응답 시간 증가 및 높은 네트워크와 서버 사용량과 같은 여러 문제를 일으킬 수 있습니다. 라이브 쿼리는 데이터베이스에서 오는 최신 데이터로 페이지를 지속적으로 업데이트해야 하는 경우에 사용해야 하며, 이는 종종 (하지만 이에 국한되지 않음) 온라인 게임, 메시징 클라이언트 및 공유 할 일 목록에서 발생합니다. 이 섹션에서는 Back4App을 통해 JavaScript 환경에서 Back4App의 라이브 쿼리를 사용하는 방법을 설명합니다. 이 튜토리얼에서는 예제로 **Todo 온라인 목록**을 라이브 쿼리를 사용하여 구축할 것입니다. 아래와 같이: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/kt59SWYYaqeQXSBhaNuwt_image.png" size="80" width="680" height="740" position="center" showCaption="false"} :::hint{type="info"} 전체 **Todo Online List** 프로젝트를 보려면 [실시간 쿼리 Todo List 프로젝트](https://github.com/igor-ribeiiro/OnlineTodoList). ::: :::hint{type="info"} Parse SDK에 대한 자세한 내용은 [JavaScript SDK API 참조](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) 및[ Parse 오픈 소스 문서(JavaScript SDK용)](https://docs.parseplatform.org/js/guide/#live-queries). ::: ## 필수 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - Back4App에 연결된 기본 JavaScript 앱 또는 [실시간 쿼리 Todo List 프로젝트](https://github.com/igor-ribeiiro/OnlineTodoList). - **참고: **우리의 [JavaScript 설치 Parse SDK](https://www.back4app.com/docs/javascript/parse-javascript-sdk) 튜토리얼에서 만든 앱을 사용하거나 [실시간 쿼리 Todo List 프로젝트](https://github.com/igor-ribeiiro/OnlineTodoList). - 충분한 [JavaScript Parse 쿼리에 대한 지식](https://docs.parseplatform.org/js/guide/#queries) (필수는 아님). ::: ## 1 - 실시간 쿼리 활성화 코딩을 시작하기 전에, 라이브 쿼리를 활성화하기 위해 데이터베이스에 클래스를 만들어야 합니다. 그렇게 하려면, [Back4App 웹사이트](https://www.back4app.com/),에서 앱을 찾아 `대시보드` > `클래스 만들기`, 아래와 같이 클릭하세요: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/EZk9j8BkQLq6JNVtTh7Yj_image.png) :::hint{type="info"} **참고: **여기서 이 클래스는 `메시지`라고 불릴 것입니다. ::: 이제 라이브 쿼리 기능을 활성화하려면, [Back4App 웹사이트](https://www.back4app.com/),에서 계정에 로그인하고, 앱을 찾아 `앱 설정` > `서버 설정`. “서버 URL 및 라이브 쿼리” 블록을 찾아 `설정`. “서버 URL 및 라이브 쿼리” 블록은 다음과 같습니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ujWY8spojft4dh-Vay9Yh_image.png" size="50" width="308" height="358" position="center" showCaption="false"} 그런 다음 아래와 같은 페이지에 도착하게 됩니다. 이 페이지에서는 `Back4App 서브도메인 활성화` 옵션, `라이브 쿼리 활성화` 옵션 및 라이브 쿼리를 활성화할 모든 클래스를 선택해야 합니다. 아래와 같이: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/oBKSK5CCjDiQV-Wstg9zy_image.png" size="60" width="461" height="514" position="center" showCaption="false"} :::hint{type="info"} 라이브 쿼리를 사용하려면 서브도메인을 활성화해야 합니다. 이는 라이브 서버로 작동할 것입니다. ::: ## 2 - 쿼리 구독하기 라이브 쿼리를 사용하려면 먼저 `LiveQueryClient`를 생성해야 합니다. 이 클라이언트는 웹소켓 연결을 관리합니다. 이를 위해 애플리케이션 ID, 검증을 위한 JavaScript 키, 그리고 이전 단계에서 설정한 도메인인 서버 URL을 제공해야 합니다. 다음은 `LiveQueryClient`: :::CodeblockTabs liveQueryClient.js ```javascript 1 var client = new Parse.LiveQueryClient({ 2 applicationId: 'Your app Id here', 3 serverURL: 'wss://' + 'Your domain here', // Example: 'wss://livequerytutorial.back4app.io' 4 javascriptKey: 'Your JavaScript key here' 5 }); 6 client.open(); ``` ::: 위에서 언급한 단계를 따르면, 구독하고자 하는 객체 유형에 대한 쿼리를 생성해야 합니다. 구독은 이벤트 발신기로, 쿼리를 만족하는 객체에 변화가 생길 때 이벤트를 발생시킵니다. 이 예제에서는 기본 쿼리를 만들고 `Todo` 객체에 대한 모든 변경 사항을 구독할 것입니다. :::hint{type="info"} 쿼리에 대한 자세한 내용은 [Parse 공식 쿼리 문서](https://docs.parseplatform.org/js/guide/#queries)를 참조하세요. ::: 다음은 `querySubscribe`: :::CodeblockTabs querySubscribe.js ```javascript 1 var query = new Parse.Query('Todo'); 2 query.ascending('createdAt').limit(5); 3 var subscription = client.subscribe(query); ``` ::: ## 3 - 이벤트 수신 설정이 완료되면, 이벤트가 발생할 때 앱이 수행할 작업을 코딩해야 합니다. 이 부분에서는 이러한 이벤트를 실제 예제로 수신하는 방법을 보여줄 것입니다. 이 **Todo 온라인 목록** 예제는 사용된 보일러플레이트 코드가 거의 없기 때문에 프로젝트의 지침으로 활용될 것입니다. 여기서 사용할 두 가지 주요 이벤트는 `create` 이벤트와 `delete` 이벤트입니다. 이벤트의 전체 목록은 [여기](http://docs.parseplatform.org/js/guide/#event-handling)에서 확인할 수 있습니다. ### 3.1 - 생성 이벤트 이 `createEvent`는 `ParseObject`가 생성되고 당신이 삽입한 쿼리 제약 조건을 충족할 때마다 발생합니다. 이 이벤트는 생성된 객체를 반환합니다. **Todo 온라인 목록** 예제에서 활동 배열은 `this.todos` 변수에 저장되며, 생성 이벤트가 발생할 때 데이터베이스의 새로운 객체를 이 배열에 추가할 것입니다. 다음은 `createEvent`에 대한 코드입니다: :::CodeblockTabs createEvent.js ```javascript 1 subscription.on('create', todo => { 2 this.todos.add(todo); 3 console.log('On create event'); 4 }); ``` ::: ### 3.2 - 삭제 이벤트 기존의 `ParseObject`가 데이터베이스에서 삭제될 때마다 이 이벤트가 발생하며, 삭제된 객체를 반환합니다. **Todo 온라인 목록** 예제에서는 데이터베이스에서 삭제될 때마다 목록에서 객체를 삭제해야 합니다. 삭제된 객체를 식별하기 위해 서버와 코드 간의 일치하는 ID를 찾아보세요. 다음은 `deleteEvent`에 대한 코드입니다: :::CodeblockTabs deleteEvent.js ```javascript 1 subscription.on('delete', todo => { 2 this.todos.forEach(t => { 3 if (t.id === todo.id) { 4 console.log('On delete event'); 5 this.todos.delete(t); 6 } 7 }); 8 }); ``` ::: ## 완료되었습니다! 이 시점에서, 당신은 실시간 반응형 애플리케이션을 만들기 위해 라이브 쿼리를 사용하는 방법을 알고 있습니다. 또한 Back4App을 사용하여 올바른 라이브 쿼리 설정을 수행하는 방법을 알고 있으며, 이를 앱에 구현하기 시작할 수 있습니다.