[논문]RESTful API를 위한 SPA ViewModel 변환

조동일

doi:10.7472/jksii.2023.24.1.9

RESTful API를 위한 SPA ViewModel 변환
SPA ViewModel Transformation for RESTful API 원문보기

Journal of Internet Computing and Services = 인터넷정보학회논문지, v.24 no.1, 2023년, pp.9 - 15

조동일 (Division of R&D, TOMATOSYSTEM)

초록
AI-Helper

SPA(Single-Page Application)는 RESTful API와 통신을 위해 데이터의 변환을 필요로 한다. BFF(Backend for Frontend) 패턴은 이 변환을 서버에서 처리하고 있으나 통신 횟수를 증가시키고 개발과 배포를 어렵게 하는 문제가 있다. 본 연구에서는 SPA의 ViewModel과 RESTful API의 모델을 SPA에서 직접 매핑하는 아키텍처를 제안한다. 제안한 아키텍처는 RESTful API의 문서 모델인 OpenAPI 사양을 이용하여 RESTful API 모델과 ViewModel 간의 매핑 모델을 자동 생성한다. SPA의 통신 컴포넌트는 생성된 모델을 이용하여 RESTful API 데이터와 ViewModel을 자동 변환한다. 사례 연구를 통해 기존 BFF 방식과 비교한 결과 제안한 아키텍처는 BFF에 비해 높은 개발 생산성을 보였고 부하테스트 결과 BFF에 비해 약 6 %이상 낮은 서버 CPU 점유율을 기록하였다.

Abstract ▼ AI-Helper

Single-Page Application(SPA) requires data transformation for communication with RESTful API. The Backend for Frontend(BFF) pattern handles this transformation in the server, but there is some problem that increases the number of communication and makes development and distribution difficult. In this study, we propose an architecture that maps the ViewModel of SPA and the model of RESTful API directly in SPA. The proposed architecture automatically generates a mapping model between the RESTful API model and the ViewModel using the OpenAPI specification, which is the document model of the RESTful API. The data transfer component of SPA automatically converts RESTful API data and ViewModel using the created model. As a result of comparison with the existing BFF method through case study, the proposed architecture showed higher development productivity than BFF, and as a result of load tests, it recorded about 6% lower server CPU occupancy compared to BFF.

주제어

표/그림 (7)

그림 (그림 1) ViewModel Class Diagram (Figure 1) ViewModel Class Diagram
그림 (그림 2) DMM 개요 (Figure 2) DMM Overview
그림 (그림 3) 모델 매핑 프로세스 (Figure 3) Model Mapping Process
그림 (그림 4) ViewModel 계층관계 (Figure 4) ViewModel hierachical relationship
그림 (그림 5) ViewModel 생성 마법사 (Figure 5) ViewModel generation wizard
그림 (그림 6) Kubernetes Service SPA 사례 연구 (Figure 6) Kubernetes Service SPA case study
표 (표 1) CPU 시간(%) (Table 1) Total CPU Time(%)

AI 본문요약
AI-Helper

문제 정의

본 연구는 OAS(OpenAPI Specification)를 이용하여 SPA에서 RESTful API 모델과 SPA의 ViewModel을 직접 매핑하는 DMM(Direct Model Mapper) 아키텍처를 제안한다. DMM을 위해 본 연구에서는 ViewModel Map의 생성과 통신 컴포넌트의 자동변환을 지원하기 위한 일반화된 ViewModel을 제시하였고, OAS를 이용한 모델 간 매핑방법을 설계하였다.
본 연구에서는 RESTful API 모델을 SPA의 ViewModel과 별도의 데이터변환 없이 직접 매핑하는 DMM을 제안하였다. DMM은 개발툴에서 OAS를 이용해 RESTful API 모델과 SPA의 ViewModel 간의 매핑정보를 SPA 개발과정에서 정의한다.

가설 설정

본 연구에서는 RESTful API는 OAS에 맞춰 명세 되어 있다고 가정한다. 일반적으로 Java 언어에서는 소스코드에 Annotation을 추가하여 명세 되고 Swagger는 이 Annotation을 읽어 문서화한다.

제안 방법

BFF와 DMM 간의 운영 성능을 비교하기 위해 단순 조회 화면에 대해 부하 테스트를 진행하였다. 테스트 시나리오는 다음과 같다.
본 연구는 OAS(OpenAPI Specification)를 이용하여 SPA에서 RESTful API 모델과 SPA의 ViewModel을 직접 매핑하는 DMM(Direct Model Mapper) 아키텍처를 제안한다. DMM을 위해 본 연구에서는 ViewModel Map의 생성과 통신 컴포넌트의 자동변환을 지원하기 위한 일반화된 ViewModel을 제시하였고, OAS를 이용한 모델 간 매핑방법을 설계하였다. RESTful API와 통신하는 SPA의 통신 컴포넌트는 ViewModel의 데이터를 매핑 모델을 이용하여 RESTful API 모델로 자동 변환한다.
RESTful API 모델과 SPA의 ViewModel 간의 변환을 개발영역에서 분리하고 RESTful API 모델을 그대로 사용할 수 있는 DMM의 특징은 BFF에 비하여 다음과 같은 이점을 제공한다.
SPA 개발자는 생성된 ViewModel을 이용하여 모델 간의 매핑을 고려하지 않고 SPA를 개발할 수 있다. RESTful API 서버와 통신은 SPA 통신 컴포넌트가 매핑정보와 ViewModel을 이용하여 RESTful API의 사양에 맞게 데이터를 변환하고 응답데이터를 해석하여 ViewModel에 매핑한다.
본 연구에서는 DMM으로 구현한 Kubernetes Service SPA를 BFF 방식으로 구현하여 개발편의성과 운영성능을 상호 비교하였다.
본 연구에서는 DMM을 설계 및 구현하였고 사례연구를 통해 기존 BFF 방식으로 구현된 애플리케이션과 비교하였다.
본 연구에서는 OAS를 이용하여 SPA ViewModel과 RESTful API의 서비스 모델의 매핑모델을 자동 생성한다.

대상 데이터

코드에서는 ViewModel vm2를 선택된 상위행의 rowId로 데이터 그룹을 전환한 후 vm2와 바인딩된 View인 grid2를 새로 그려 현재 노출해야 하는 데이터를 보여준다. View에서 데이터를 추가 또는 제거했을 때 현재 활성화된 데이터 그룹의 데이터가 추가되거나 제거된다.

이론/모형

DMM을 위해 본 연구에서는 ViewModel Map의 생성과 통신 컴포넌트의 자동변환을 지원하기 위한 일반화된 ViewModel을 제시하였고, OAS를 이용한 모델 간 매핑방법을 설계하였다. RESTful API와 통신하는 SPA의 통신 컴포넌트는 ViewModel의 데이터를 매핑 모델을 이용하여 RESTful API 모델로 자동 변환한다.
본 연구에서는 제안한 아키텍처를 검증하기 위해 Kubernetes SPA 구축에 적용하여 검증하였다.

성능/효과

DMM은 이런 변환 규칙이 SPA 개발과 분리된 ViewModel Mapper에 지정되고 별도의 컴파일이나 서버재구동 없이 SPA 개발 및 변경과 생명주기를 같이 하기때문에 변경에 유연하며 개발 편의성이 증대되고 개발생 산성에 유리하다는 것을 확인할 수 있었다.
모니터링 결과 표 1과 같이 BFF는 평균 28.75 %의 CPU 점유율을 기록한 반면 DMM은 22.33 %를 기록하여 DMM의 CPU 점유율이 약 6 % 적음을 확인할 수 있었다.
사례 연구 결과 제안한 DMM은 BFF에 비해 높은 개발 생산성과 변경 유연성을 제공하였다. 운영 성능 비교에서 제안한 DMM은 BFF에 비해 약 6 % 낮은 CPU 점유율을 기록하였고 더 적은 수의 서버 호출을 요구하여 서버 부담을 감소시키는 것을 확인할 수 있었다.
사례 연구 결과 제안한 DMM은 BFF에 비해 높은 개발 생산성과 변경 유연성을 제공하였다. 운영 성능 비교에서 제안한 DMM은 BFF에 비해 약 6 % 낮은 CPU 점유율을 기록하였고 더 적은 수의 서버 호출을 요구하여 서버 부담을 감소시키는 것을 확인할 수 있었다.
전체 테스트 시간은 BFF의 경우 약 4초 소요된 반면 DMM은 2초 이내에 테스트가 종료되었고 이는 DMM의 시나리오가 상대적으로 적어 그 만큼 서버에 부하를 적게 준다는 것을 확인할 수 있다.

참고문헌 (14)

HM Adrian, N Scholz, and F Matthes. "A Model-driven？Approach for Generating RESTful Web Services in？Single-Page Applications.", Proceedings of the 6th？International Conference on Model-Driven Engineering？and Software Development, pp.480-487, 2018.？https://doi.org/10.5220/0006608204800487
J Freeman, J Jarvi and G Foust. "HotDrink: a library？for web user interfaces." ACM SIGPLAN Notices Vol？48, No.3, pp.80-83, 2012.？https://doi.org/10.1145/2480361.2371413

상세보기
J Munro, "Knockout. js: building dynamic client-side？web applications", O'Reilly Media, Inc., pp.3, 2014.
Model-view-viewmodel？https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
A Pavlenko, N Askarbekuly, S Megha and M Mazzara,？"Micro-frontends: application of microservices to web？front-ends", Journal of Internet Services and？Information Security (JISIS), Vol.10, No.2, pp. 49-66,？2020.？http://doi.org/10.22667/JISIS.2020.05.31.049
S Newman, "Building Microservices", pp.41-47,？O'Reilly Media, 2015.
K Brown and B Woolf, "Implementation patterns for？microservices architectures", Proceedings of the 23rd？Conference on Pattern Languages of ProgramsOctober,？No.7, pp.1-35, 2016.？https://dl.acm.org/doi/10.5555/3158161.3158170
V Atlidakis, P Godefroid and M Polishchuk. "RESTler:？Stateful REST API Fuzzing", 2019 IEEE/ACM 41st？International Conference on Software Engineering？(ICSE), pp.748-758, 2019.？https://doi.org/10.1109/ICSE.2019.00083
E Viglianisi, M Dallago and M Ceccato,？"RESTTESTGEN: Automated Black-Box Testing of？RESTful APIs", 2020 IEEE 13th International？Conference on Software Testing, Validation and？Verification (ICST), pp.142-152, 2020.？https://doi.org/10.1109/ICST46399.2020.00024
https://swagger.io/specification/
H Wu, L Xu, X Niu and C Nie, "Combinatorial？Testing of RESTful APIs." ACM/IEEE International？Conference on Software Engineering (ICSE),？pp.426-437, 2022.？https://doi.org/10.1145/3510003.3510151
JC Alonso, A Martin-Lopez, S Segura, JM Garcia？and A Ruiz-Cortes, "Automated generation of？realistic test inputs for web APIs", Proceedings of？the 29th ACM Joint Meeting on European Software？Engineering Conference and Symposium on the？Foundations of Software Engineering, pp.1666-1668,？2021. https://doi.org/10.1145/3468264.3473491
P Godefroid, BY Huang and M Polishchuk,？"Intelligent REST API data fuzzing", Proceedings of？the 28th ACM Joint Meeting on European Software？Engineering Conference and Symposium on the？Foundations of Software Engineering, pp.725-736,？2020. https://doi.org/10.1145/3368089.3409719
S Karlsson, A Causevic and D Sundmark,？"QuickREST: Property-based test generation of？OpenAPI-described RESTful APIs.", 2020 IEEE 13th？International Conference on Software Testing,？Validation and Verification (ICST), pp.131-141,？2020.？https://doi.org/10.1109/ICST46399.2020.00023

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증