모든 개발자가 살면서 반복적으로 다음과 같은 상황을 직면합니다. 회사는 완전히 새로운 기능을 바탕으로 앞으로 나아가기를 원하고, 요구 사항 사이에 상당히 복잡한 컴포넌트가 숨겨져 있습니다. 예를 들어, 웹사이트 또는 캘린더 위젯에 정보를 표시할 수 있는 멋진 대시보드를 통해 사용자가 기존의 모든 온라인 캘린더의 이벤트에 등록할 수 있어야 합니다.

대부분의 경우 이러한 기능을 출시하려면 다음 3가지 방법이 있습니다.

• 직접 빌드합니다.
  완전히 새로운 컴포넌트인 경우 선택의 여지가 별로 없을 수 있습니다. 또는 (설문조사 위젯처럼) 코딩이 매우 간단한 경우 내부에서 빌드하는 것이 더 쉬울 수 있습니다. 하지만 관리가 복잡하고, 많은 지원, 유지 관리 및 주의가 필요한 경우라면 내부에서 코딩하는 것이 무의미할 수 있습니다.

• 오픈 소스 버전을 찾습니다.
  해당 기능을 필요로 한 사람이 이미 있었을 수 있기 때문에 필요한 도구가 GitHub에 있는 수많은 오픈 소스 프로젝트 중 하나로 이미 존재하고 있을 수 있습니다. 가장 비용 효율적인 솔루션이지만, 고려해야 할 옵션과 요인이 너무 많은 경우에는 꼭 맞는 도구를 찾기 어려울 수 있습니다. 또한 요구 사항과 사용 사례에 따라 나중에 숨겨진 비용이 드러나는 경우가 비일비재합니다.

• 상용 버전을 구입합니다.
  더 많은 비용이 드는 것처럼 보이지만 사용 사례에 따라 제품을 지원하는 지원 팀이 있어 많은 시간과 노력을 줄여 줍니다.

정답은 없습니다. 최적의 솔루션을 찾는다는 것은 사용 가능한 오픈 소스 및 상용 제품과 함께 요구 사항을 고려하는 것을 의미합니다.

즉, 현재 시장에 출시된 수많은 제품을 살펴봐야 한다는 것을 의미합니다. 일부 엔터프라이즈 수준 컴포넌트에는 수많은 추가 기능과 상당히 복잡한 API가 포함되어 있고 다른 일부는 특정 목적이나 프레임워크를 위해 구축된 오픈 소스 도구입니다.

프로젝트에 최적의 솔루션이 될 웹 컴포넌트를 결정하고 있는 중이라면 이 포스팅이 사용 가능한 수많은 옵션을 줄이는 데 도움이 될 것입니다. 오픈 소스 컴포넌트를 선택할 때 고려해야 할 중요한 요인을 살펴보고 상용 제품이 더 잘 맞는 경우에 대해 논의해 보겠습니다.

제품 지원

오픈 소스 프로젝트를 선택할 때 가장 중요한 요인 중 하나는 해당 프로젝트에 대한 활발한 커뮤니티가 있는지 확인하는 것입니다. 일반적으로, 개발자는 문제를 해결하기 위해 오픈 소스 프로젝트를 만들지만 시간이 부족하거나 다른 프로젝트를 맡았기 때문에 레포지토리를 버릴 수 있습니다.

중요한 업데이트가 없는 프로젝트를 선택하면 특정 브라우저에서는 더 이상 작동하지 않거나, 새로운 기능과 호환되지 않거나, 최악의 경우 패치되지 않은 보안 취약성이 포함되어 있을 수 있습니다.

오픈 소스 제품의 사용 여부를 평가할 때는 항상 레포지토리를 살펴보고 마지막 커밋 날짜를 확인해야 합니다. 몇 달 동안 활동한 흔적이 없으면 해당 프로젝트는 지원되지 않음을 잘 보여 주는 것입니다.

또한 수정 사항이 제대로 처리되었는지 확인하기 위해 프로젝트에 대해 승인된 풀 요청과 종결된 이슈를 검토할 가치가 있습니다.

프로젝트가 얼마나 오래되었는지 확인하는 것도 유용합니다. 경우에 따라 상당히 신기술이면 고려할 필요가 없는 요인이기도 합니다.(10년이 된 WebAssembly 오픈 소스 프로젝트는 많지 않습니다.).

그러나 JavaScript 기반 스프레드시트 또는 차트 라이브러리와 같은 경우 프로젝트가 한 동안 활발하게 사용되어 웹 기술의 변화에 적응했는지 살펴보는 것도 유용합니다.

고려해야 할 또 다른 요인은 오픈 소스 프로젝트가 후원을 받았는지 여부입니다. 지원 수준은 프로젝트의 지속 가능성 여부를 결정하는 주요 요인이 될 수 있습니다.

어느 날 잠에서 깬 후, 기여자들의 시간과 리소스가 모두 고갈되어 버린 후 여러분의 프론트 엔드 생태계의 주요 부분이 버려졌다는 것을 발견하는 것보다 더 나쁜 일은 없습니다.

GitHub의 Insight 탭은 기여자 수, 커밋 빈도, 포크 수 등 프로젝트 상태에 대한 보다 자세한 정보를 제공합니다. 이는 제품이 활발하게 사용되고 지원을 받고 있음을 확인하는 데 도움이 됩니다.

문서

오픈 소스 프로젝트와 관련하여 자주 발생하는 또 다른 문제는 문서의 부족입니다. 많은 개발자들이 문서 작성보다 차라리 이 뽑는 것을 선호할 정도로 문서 작성을 싫어하기 때문에 중요한 설정 가이드 또는 API 가이드가 누락되거나 오래된 경우가 많습니다.

상용 제품에서 이와 같은 문제가 발생하는 경우가 있기는 하지만 일반적으로 제품을 판매하는 모든 회사는 개발자 문서가 정확하고 최신 상태인지 확인하기 위해 추가 작업을 합니다.

문서와 문서 날짜를 미리 확인하면 오픈 소스 솔루션에 필요한 지원이 제공되는지 확인하는 데 도움이 될 수 있습니다.

통합

오픈 소스 소프트웨어는 일반적으로 초기 비용이 들지 않지만 제품을 전체 솔루션에 통합하는 데 필요한 노동력을 고려해야 합니다. 예를 들어, 스프레드시트의 경우 정보를 가져와 기본 데이터 저장소에 저장해야 합니다.

즉, 백엔드가 툴이 예상하는 형식으로 데이터를 쿼리하고 직렬화하도록 설정되어 있는지 확인해야 하므로 상당한 시간과 노력이 필요합니다.

10년 전에는 JavaScript 컨트롤을 추가하는 것이 단순히 jQuery에 대한 참조를 포함하고 페이지에서 컨트롤을 구성하는 것을 의미했을 수 있습니다. 그러나 프론트엔드 개발의 복잡성, 다양한 프레임워크 (Angular, Blazor, Vue, ASP.NET, MVC 및 React 포함) , TypeScript와 같은 트랜스파일된 언어의 출현은 툴도 프론트엔드에 통합되어야 함을 의미합니다.

오픈 소스 도구의 사용을 고려할 때 해당 툴이 응용 프로그램과 얼마나 잘 통합될 수 있을지 살펴보십시오.

지원

모든 것이 여러분의 컴포넌트와 잘 작동하는 것처럼 보였는데 아무런 경고도 없이 고객이 즐겨 사용하는 웹 브라우저에서 갑작스럽게 작동하지 않는다고 불평하기 시작합니다. 누구에게 연락해야 할까요?

이것이 개발 팀에서 유료 제품을 선택하는 주된 이유일 것입니다. 결국 가장 중요한 것은 이메일, 채팅 또는 전화를 통해 여러분의 문제를 해결할 계약상의 의무를 진 고객 지원 시스템이 있다는 사실입니다. 물론 상용 제품은 다양한 수준의 유료 지원을 제공하기 때문에 제품을 구입할 때 응답 시간과 커뮤니케이션 방법을 살펴보는 것도 마찬가지로 중요합니다.

그러나 오픈 소스 소프트웨어를 사용하는 경우 문제를 직접 해결할 의사가 없다면 일반적으로 기여자가 문제를 살펴볼 때까지 기다려야 합니다. 프로젝트가 충분히 큰 경우에는 도움을 얻을 수 있는 상당한 규모의 온라인 커뮤니티가 있을 수 있습니다. jQuery와 같은 프로젝트는 Stack Overflow와 같은 사이트에서 수천 개의 질문에 대한 답변을 찾을 수 있지만 일반적으로 작은 컴포넌트 라이브러리의 경우는 상황이 다릅니다.

오픈 소스 솔루션을 선택하기 전에 지원 수준에 대한 정보와 해당 지원 수준이 적절한지 확인해야 합니다. 어느 정도의 응답을 기대할 수 있는지 알아보는 한 가지 방법은 레포지토리의 문제 탭을 살펴보는 것입니다. 각 문제가 개시된 후 종결될 때까지 시간이 오래 걸렸는지 확인해 보십시오.

UI

대부분의 개발자는 멋진 디자인의 UI(사용자 인터페이스)가 어떻게 사용자의 눈길을 끄는지 잘 알고 있습니다.

(전부는 아니지만) 많은 오픈 소스 컴포넌트는 외관이 상당히 표준적입니다. 일반적으로 몇 가지 기본 스타일, 사용자 정의 디자인을 통합하기 위한 방법, 경우에 따라서는 플러그인 테마 배열 등이 포함되지만 그게 전부입니다.

매력적인 UI를 만들거나 툴을 응용 프로그램의 기존 스타일에 통합하려면 광범위한 디자인을 제공하는 도구를 찾아야 합니다.

기능

프로젝트를 시작할 때 향후 어떤 유형의 추가 기능이 필요할 수 있는지 고려하는 것이 좋습니다. 이는 핵심 기능이 올바르게 작동하는지 확인하는 것을 최우선으로 여기는, 무급 기여자에게 의존하는 오픈 소스 프로젝트에서 특히 중요합니다.

기능의 복잡성이 증가할 가능성이 있고 훨씬 더 많은 고급 기능이 필요한 경우 보다 많은 기능을 제공하는 상용 제품을 선택하는 것이 좋습니다. 또한 기능이 이미 프로덕션 단계에 들어간 후 수정할 필요 없이 컴포넌트를 프로젝트에 바로 통합하는 것이 훨씬 더 쉽다는 사실도 염두에 두십시오.

적절한 솔루션 찾기

여러분의 제품 팀에서 회사 웹사이트에 포함된 스프레드시트라는 흥미로운 새 기능을 생각해 냈다고 가정해 보겠습니다. 이 스프레드시트는 지정된 주에 개인의 수면 질을 확인하는 데 도움이 됩니다.

해당 주의 각 요일에 사용자는 드롭다운 메뉴에서 날짜를 입력한 다음 침대에 누워 있었던 시간과 해당 요일의 밤에 수면을 취한 시간을 입력합니다. 다음 셀의 수식은 수면의 질을 0~100의 척도로 나타냅니다. 제품 팀에서는 두 개의 스프린트에서 프로젝트를 완료하기를 원했습니다.

목록을 지우는 첫 번째 방법은 직접 빌드하는 것입니다. 무모한 개발자만이 짧은 기간에 JavaScript 기반 스프레드시트 제품을 처음부터 구축할 것을 고려할 것입니다. 그러면 오픈 소스 제품 또는 상용 제품이라는 두 가지 선택지만 남습니다.

빠른 온라인 조사를 통해 광범위한 선택의 폭을 찾습니다. SheetJS와 같은 일부 옵션은 해결되지 않은 문제가 너무 많고 최근 커밋이 부족하기 때문에 빠르게 제외할 수 있습니다. Smart-Grid와 같은 기타 제품은 최근에 기여자의 활동이 있었지만 많은 프레임워크로 통합되지 않습니다. 그러나 일부 오픈 소스 후보들이 눈에 띄는데, 그 중에서도 강력한 기능 및 통합과 함께 잘 작성된 문서를 제공하는 Jspreadsheet CE 및 LuckySheet가 돋보입니다.

사용 가능한 도구를 몇 시간 동안 비교한 후 오픈 소스 Jspreadsheet 또는 GrapeCity의 상용 제품인 SpreadJS로 후보가 좁혀집니다.

Jspreadsheet

많은 오픈 소스 프로젝트와 달리 Jspreadsheet의 웹사이트 및 GitHub 문서는 꼼꼼하고 포괄적입니다. 해당 문서는 기본 설정, 데이터 구조를 제공하고, 수식, 이벤트 및 사용자 정의 스타일링 등 고급 기능을 더 자세히 다룹니다. 광범위한 예는 여러 사용 사례를 위한 코드를 보여 줍니다.

또한 Jspreadsheet에는 jQuery와 같은 오래된 라이브러리에서 React, Vue 및 Angular와 같은 첨단 라이브러리까지 다양한 프론트엔드 통합이 있습니다. 간단한 npm install jexcel 명령(jexcel은 제품의 이전 이름임)을 실행한 다음 보기 페이지에 컴포넌트를 추가하고 TypeScript 코드 숨김에 참조를 추가하여 해당 컴포넌트를 프로젝트에 신속하게 통합할 수 있습니다.

//this adds the Jspreadsheet Element  
@ViewChild('spreadsheet') spreadsheet: ElementRef;  
  <!--Jspreadsheet component markup-->  
<div #spreadsheet></div>

또한 데이터를 간단하게 추가할 수 있습니다. 첫 번째 단계는 스프레드시트 콘텐츠를 정의하는 것으로, 먼저 요일 및 데이터를 저장할 배열을 만드는 것입니다.

public daysOfTheWeek=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];  
public JSpreadsheetData=[];

다음으로 데이터 배열을 반복하고 스프레드시트의 각 속성에 대해 기본값을 추가하여 데이터를 만듭니다.

//set up the data arrays for each, day and add the default date,  
// hours in bed and hours slept  
this.daysOfTheWeek.forEach((day:string,index:number)=>{  
this.JSpreadsheetData.push(  
        [day,'01/01/2021',0,0]  
    );  
  });

그런 다음 행을 정의하고, 데이터에 전달한 후 jexcel 기능을 실행하여 스프레드시트를 인스턴스화할 수 있습니다. 이 구문은 간단한 선언적 JSON 형식을 사용하고 데이터 형식 지정 옵션(날짜에 대한 달력 옵션은 기본 datepicker 요소를 제공함)과 일부 스타일 지정(최대 차원 속성으로 표시됨)을 제공합니다.

jexcel(this.spreadsheet.nativeElement, {  
    data: this.JSpreadsheetData,  
      columns: [  
        { title: 'Day', width: 300 },  
        { title: 'Date', width: 300, type: 'calendar', options: { format:'DD/MM/YYYY', time:0 } },  
        { title: 'HoursInBed', width: 80,type: 'numeric' },  
        { title: 'HoursAsleep', width: 100,type: 'numeric' },  
    ],  
    minDimensions: [10, 10]  
  });  

마지막 단계는 계산 (수면 시간/침대에 누워 있는 시간) * 100을 사용하여 ‘수면 효율성’을 계산하기 위한 수식을 추가하는 것입니다. 열 배열에 다른 항목을 추가하여 쉽게 구현할 수 있습니다.

{ title:'Sleep Efficiency', type: 'text', width:'100' }

그 다음에 Excel과 유사한 수식 구문을 사용하여 데이터 배열에 수식을 추가합니다.

[day,'01/01/2021',0,0,`=(D${index+1}/C${index+1})*100`]

결과로 생성된 스프레드시트는 보기에 나쁘지 않지만 딱딱해 보입니다. 기능은 의도한 대로 수행되지만 고객에게 직접 노출되는 웹사이트의 기능이 아닌 내부 관리 도구처럼 보입니다. 물론, 시간 및 리소스가 있다는 가정하에 뛰어난 디자이너라면 이 문제를 쉽게 해결할 수 있습니다.

누락된 기능 중 하나는 즉시 사용 가능한 Excel 스타일 기능입니다. 예를 들어, 위 수식에는 0으로 나누기 오류가 표시되고, 우리는 기본값을 표시하는 ERRORIF 함수를 선호합니다. Jspreadsheet를 사용하면 고유한 기능을 만들 수 있지만, 이 오류 기능과 같은 기능을 사용할 수는 없습니다.

그러나 프로젝트에 매우 간단한 내장 스프레드시트만 있으면 된다고 가정하면 Jspreadsheet는 탁월한 선택입니다.

SpreadJS

SpreadJS 구현은 조금 더 복잡할 수 있지만 유용한 비디오 자습서와 대화형 데모를 포함한 문서가 잘 마련되어 있습니다.

또한 SpeadJS는 많은 프론트엔드 라이브러리 및 프레임워크와 통합됩니다. 좋은 점 중 하나는 라이브러리별 데모 섹션으로, 주어진 통합에서 (이 경우에는 Angular) 기능의 실제 코드 예제가 포함되어 있습니다. 이렇게 하면 드롭다운과 수식을 훨씬 쉽게 추가할 수 있습니다. 다시, 첫 번째 단계로 npm을 실행하여 라이브러리를 설치합니다.

데이터 구조 빌드는 Jspreadsheet와 상당히 유사하고 해당 주의 각 요일에 대한 객체로 구성된 배열을 만드는 것을 포함합니다.

this.daysOfTheWeek.forEach((day:string,index:number)=>{  
​
    this.SpreadJsData.push(  
      {  
        Day: day,  
        HoursInBed:0,  
        HoursAsleep:0,  
      }  
    );    
});

그러나 이때, 두 라이브러리의 차이점이 드러납니다. SpreadJS에서는 훨씬 많은 디자인 및 기능 옵션을 제공합니다. 예를 들어, 날짜 선택기를 추가하는 것은 Jspreadsheet(열을 달력 유형으로 선언하여 간단하게 표시됨)에서만큼 간단하지 않지만 SpreadJS는 달력 모양과 표시할 요소(예: 시간)에 대한 추가 사용자 정의를 제공했습니다.

let style = new GC.Spread.Sheets.Style();  
  style.cellButtons = [  
      {  
          imageType: GC.Spread.Sheets.ButtonImageType.dropdown,  
          command: "openDateTimePicker",  
          useButtonStyle: true,  
      }  
  ];  
  style.dropDowns = [  
      {  
          type: GC.Spread.Sheets.DropDownType.dateTimePicker,  
            option: {  
              showTime: true,  
            }  
      }  
    ];  
spread.commandManager().execute({ cmd: "openDateTimePicker", row: i, col: 1, sheetName: "Sheet1" });

또한 광범위한 기능은 스프레드시트에 ERRORIF와 같은 고급 수식을 쉽게 추가할 수 있음을 의미합니다.

sheet.setFormula(i,4,`=IFERROR(((D${i+1}/C${i+1})*100),0)`)

이러한 유형의 기본 제공 기능에서 Excel 스타일 사용 사례에 이르기까지 고급 기능이 필요한 모든 응용 프로그램의 경우 많은 옵션이 있는 라이브러리를 사용하면 시간을 크게 절약할 수 있으며, 개발자의 골칫거리도 줄어듭니다.

또한, SpreadJS와 같은 상용 제품은 UI(사용자 인터페이스)에서 뚜렷한 이점이 있습니다. 기본 버전은 추가 스타일을 지정하지 않은 상용 스프레드시트 제품처럼 보이는데, 이것은 전문적으로 보이고 싶은데 스타일링에는 시간을 더 들이고 싶지 않다면, 상용 제품이 확실히 적합하다는 것을 의미합니다.이 프로젝트의 전체 코드는 GitHub에서 찾을 수 있습니다.

다음 단계

결국 오픈 소스 컴포넌트와 상용 컴포넌트 중 하나를 선택하는 것이 항상 쉬운 것은 아닙니다. 요구 사항, 사용자, 가능한 기능 개발 계획과 당연히 예산을 고려해야 합니다.

많은 경우 상용 제품의 강력한 기능, 뛰어난 UI, 안정적인 지원은 비용을 투자할 가치가 있습니다. 그러나 요즘 사용할 수 있는 뛰어난 오픈 소스 소프트웨어는 최종 선택을 하기 전에 항상 최소한 오픈 소스 옵션을 확인하고 비교할 만한 가치가 있습니다.

이제 오픈 소스와 상용 스프레드시트를 응용 프로그램에 통합하는 방법과 오픈 소스와 상용 컴포넌트 중에서 결정할 때 고려해야 할 몇 가지 사항을 살펴보았으므로 여러분의 다음 프로젝트에 어떤 옵션이 가장 적합한지 결정할 수 있을 것입니다. SpreadJS에 대해 자세히 알아보거나 무료 평가판을 다운로드하여 다음에 개발할 여러분의 멋진 앱에 SpreadJS의 강력한 기능을 실험해 보십시오.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ