TL;DR: Syncfusion JavaScript 쿼리 빌더를 사용하여 두 테이블을 조인하는 방법을 살펴보겠습니다. 이 블로그에서는 사용자 정의 JoinComponent를 생성하고 목록 상자와 드롭다운을 사용하여 WHERE, SELECT 및 JOIN 절을 구성하는 과정을 안내합니다. 이러한 단계를 통해 효율적인 쿼리 생성이 보장되므로 복잡한 데이터 소스를 쉽게 연결하고 관리할 수 있습니다. 전체 코드 예제는 Stackblitz 데모를 확인하세요.

Syncfusion JavaScript Query Builder는 쿼리를 생성하도록 설계된 대화형 UI 요소입니다. 풍부한 기능에는 복잡한 데이터 바인딩, 템플릿 작성, JSON 및 SQL 형식의 쿼리 가져오기 및 내보내기가 포함됩니다. 또한 데이터 관리자와 함께 사용할 수 있도록 쿼리를 조건자로 변환할 수 있습니다.

이 블로그에서는 JavaScript 쿼리 빌더 구성 요소를 사용하여 두 테이블을 조인하는 방법을 설명합니다. 여기서는 쿼리 작성기 구성 요소를 복잡한 데이터 바인딩 지원과 통합하여 두 개의 개별 테이블을 연결합니다. SQL WHERE 절에 대한 쿼리를 만들고, SELECT 절을 작성하기 위한 목록 상자와 조인 쿼리 구성을 간소화하기 위한 드롭다운 목록을 포함시킵니다.

참고: 계속하기 전에 JavaScript 쿼리 빌더 시작하기 설명서를 참조하세요.

JavaScript 쿼리 빌더를 사용하여 사용자 정의 구성 요소 만들기

조인 쿼리 생성을 용이하게 하고 매개변수 집합을 통해 유연성을 제공하기 위해 JoinComponent라는 사용자 정의 구성 요소를 만들어 보겠습니다. 이 구성 요소를 사용하면 사용자는 조인 쿼리를 구성하는 데 필수적인 요소 ID, 테이블의 데이터 소스, 테이블 이름, 왼쪽 및 오른쪽 피연산자를 지정할 수 있습니다.

이 JoinComponent 내에서 대화 상자 구성 요소 내에 JavaScript 쿼리 빌더를 통합합니다. 또한 사용자 경험을 향상하고 조인 작업 구성 및 실행 프로세스를 간소화하기 위해 ListBox 및 Dropdown List 구성 요소를 통합할 것입니다. 그 결과 조인 쿼리 생성을 단순화하는 다양하고 사용자 친화적인 구성 요소가 탄생했습니다.

이 Stackblitz 저장소에서 사용자 정의 JoinComponent를 생성하기 위한 코드 예제를 참조할 수 있습니다.

JavaScript 쿼리 빌더를 사용하여 두 테이블 조인

사용자정의 구성요소가 생성되면 다음 단계에 따라 두 테이블을 조인하세요.

1단계: WHERE 절 만들기

SQL WHERE 절은 지정된 조건에 따라 데이터베이스의 레코드를 필터링합니다.

이러한 맥락에서 JavaScript 쿼리 빌더 구성 요소는 WHERE 절의 값을 얻는 데 중요한 역할을 합니다. 복잡한 데이터 바인딩을 지원하여 두 테이블의 정보를 결합하여 규칙 및 SQL 쿼리를 생성할 수 있습니다. 이 기능은 열 지시문을 사용하여 복잡한 테이블을 지정하고 구성 요소 내에 구분 기호 속성을 포함함으로써 달성됩니다.

이러한 속성을 구성하면 쿼리 작성기가 두 개의 테이블로 렌더링되어 아래 제공된 코드 조각과 유사한 결과 조인 쿼리가 생성됩니다.

Employees.FirstName LIKE (“%Nancy%”)

2단계: SELECT 절 만들기

SQL의 SELECT 절은 하나 이상의 데이터베이스 테이블에서 검색하려는 열이나 표현식을 지정합니다. 이를 용이하게 하기 위해 목록 상자 구성 요소를 렌더링하여 왼쪽 및 오른쪽 테이블에서 필요한 열을 선택합니다.

3단계: JOIN 절 만들기

테이블 조인에는 관련 열을 기반으로 두 개 이상의 테이블에서 행을 결합하는 작업이 포함됩니다. 여러 테이블에 분산된 데이터를 검색하고 해당 테이블의 관련 정보를 결합하는 결과 집합을 생성합니다.

테이블 조인의 주요 측면은 다음과 같습니다.

• 관련 열: 테이블 조인은 테이블 간의 관계를 설정하는 열을 사용합니다. 일반적으로 이러한 열은 기본 키와 외래 키를 나타냅니다. 기본 키는 테이블의 각 행을 식별하고, 외래 키는 다른 테이블의 기본 키를 참조하여 두 테이블 간의 링크를 생성합니다.
• 조인 유형: 내부, 왼쪽, 오른쪽 및 완전 외부 조인을 포함하여 다양한 유형의 조인이 있습니다.
• 조인 조건: 조인 조건은 서로 다른 테이블의 행을 결합하기 위한 기준을 지정합니다. 일반적으로 =, , , > 등과 같은 연산자를 사용하여 관련 열을 비교하는 작업이 포함됩니다. 여러 열 또는 복잡한 표현식이 포함됩니다.

조인 작업을 수행하려면 관계형 열, 조인 유형 및 조인 조건이 필요합니다. 이를 용이하게 하기 위해 드롭다운 목록 구성 요소를 렌더링하여 왼쪽 및 오른쪽 피연산자를 선택합니다. 조인 유형 드롭다운 목록은 다양한 조인 유형에 대한 옵션을 제공합니다. , INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN 등이 있습니다. 마지막으로 연산자 드롭다운 목록을 사용하면 두 피연산자를 연결하기 위한 조건을 지정할 수 있습니다.

다음 이미지를 참고하세요.

4단계: 사용자 정의 구성요소를 앱에 통합

맞춤형 JoinComponent를 앱에 통합하려면 이를 가져와서 렌더링하는 동안 div 요소 내에 배치하세요. 필수 속성을 제공하여 구성 요소를 필요에 맞게 조정하고 앱의 사용자 인터페이스에 대한 통합을 간소화할 수 있습니다.

필터 버튼을 클릭하면 쿼리 작성기 구성 요소가 표시되어 사용자가 쿼리를 구성할 수 있습니다. 이후 복사 버튼을 클릭하면 생성된 쿼리가 클립보드에 복사됩니다.

HTML 페이지에서 사용자 정의 구성 요소를 렌더링하려면 다음 코드 예제를 참조하세요.

커스텀 컴포넌트를 렌더링하려면 다음 Typescript 코드를 참조하세요.

import { JoinComponent } from './JoinComponent';

let ordersData = [
  { "OrderID": 10248, "CustomerID": 9, "EmployeeID": 5,"OrderDate": "7/4/1996","ShipperID": 3},
  { "OrderID": 10249, "CustomerID": 81, "EmployeeID": 6,"OrderDate": "7/5/1996","ShipperID": 1}
];

let employeesData = [
  { "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "BirthDate": "12/8/1968"},
  { "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "BirthDate": "2/19/1952 "},
  { "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "BirthDate": "8/30/1963"},
  { "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "BirthDate": "9/19/1958"},
  { "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven", "BirthDate": "3/4/1955"},
  { "EmployeeID": 6, "LastName": "Suyama", "FirstName": "Michael", "BirthDate": "7/2/1963"}
];

let comp: JoinComponent = new JoinComponent(
          'join', // component ID
          ordersData, // left table
          employeesData, // right table
          'Orders', // left table name
          'Employees', // right table name
          'EmployeeID’, // left operand
          'EmployeeID' // right operand
);

쿼리 작성기 및 조인 구성 요소 사용자 인터페이스를 표시하는 다음 이미지를 참조하세요.

샘플 조인 쿼리는 다음과 같으며, 이 링크를 사용하여 이 쿼리를 직접 확인할 수 있습니다.

SELECT Orders.OrderID, Orders.OrderDate, Employees.EmployeeID FROM (Orders INNER JOIN Employees ON (Orders.EmployeeID = Employees.EmployeeID)) WHERE(Employees.FirstName LIKE ('%Nancy%'))

참조

자세한 내용은 Stackblitz의 JavaScript 쿼리 빌더를 사용하여 두 테이블을 조인하는 전체 코드 예제를 참조하세요.

결론

읽어주셔서 감사합니다! 이 블로그에서는 Syncfusion JavaScript Query Builder를 사용하여 두 테이블을 조인하는 방법을 살펴보았습니다. 비슷한 결과를 얻으려면 다음 단계를 따르세요. 아래 댓글에 의견이나 질문을 자유롭게 공유해 주세요.

기존 고객인 경우 라이선스 및 다운로드 페이지에서 최신 버전의 Essential Studio를 다운로드할 수 있습니다. Syncfusion을 처음 사용하는 경우 30일 무료 평가판을 사용해 모든 기능을 살펴보세요.

지원 포럼, 지원 포털 또는 피드백 포털을 통해 문의하실 수 있습니다. 우리는 귀하의 성공을 돕기 위해 왔습니다!

관련 블로그

• 무단 JavaScript 실행으로부터 웹 앱을 보호하는 5가지 기술
• JavaScript 파일 관리자에서 플랫 JSON 데이터를 쉽게 렌더링
• DataManager를 사용하여 JavaScript 컨트롤을 손쉽게 동기화
• 생산성 최적화: Salesforce와 JavaScript 스케줄러 통합