sitelink1  
sitelink2  
sitelink3  
sitelink4  
sitelink5  
extra_vars6  

Web Service Server 에서 Web Service Clientfunction call 을 전달할 필요가 생겼다.

가령, 고객이 서비스 이용시 필요로 하는 기능에 대해 검색 등을 조회시
이에 대한 결과 이벤트를 위해 ui에서 onboarding 을 자동 실행하게 하면 사용자 편이성이 증대될 것을 기대했다.

 

이를 위한 방안은 현재까지 총 3가지이다.

  1. client javascript fetch api


    > 특징
        - ui 에서 javascript 가 주기적으로 server 에 order msg 가 있는지 확인한다. (Message Queue)
        - 자바스크립트에서 HTTP 요청을 보내는 표준 API
        - 비동기 방식으로 데이터를 가져오는 데 사용
    > 장점
        - script 에서 주기적으로 체크하는 로직만 있으면 되므로 구현이 간편하다.
        - 다양한 HTTP 메서드 지원
    > 단점
        - client 가 server 에 msg 존재 여부를 체크해야 하므로 미미하더라도 주기적인 네트웍 자원을 소비한다. (풀링 방식)
        - 실시간 데이터 전송에는 부적합
  2. pwa(progressive web app)


    > 특징
        - pwa 를 이용하여 server 의 order message 를 전달하고 이를 전달받아 client script 를 실행하게 한다.
        - 웹 애플리케이션을 네이티브 앱처럼 사용할 수 있도록 하는 기술
        - 서비스 워커를 통해 백그라운드 동작, 푸시 알림 등을 지원
        - 설치, 오프라인 사용 가능
    > 장점
        - 브라우저가 비활성화 상태여도 알림을 통해 브라우저를 오픈하고 페이지까지도 띄울 수 있다.
        - 웹 기술 기반으로 개발 비용 절감
        - 다양한 플랫폼 지원
        - 푸시 알림을 통한 실시간 알림 기능 제공
    > 단점
        - fcm 또는 web-push 등의 push server 를 구축하고 운영하는 수고가 있다.
        - 지원하는 브라우저에 제한이 있다. (iOS는 16.4버전 이후에나 푸시가 가능)
        - 서비스 워커 관리 복잡성
        - 실시간 데이터 스트리밍에는 부족
  3. websocket


    > 특징
        - websocket 으로 server 와 client 가 지속적으로 연결을 유지하며 server 가 client 에 즉각 request 한다.
        - 양방향 실시간 통신을 위한 프로토콜
        - 서버와 클라이언트 간의 지속적인 연결 유지
    > 장점
        - server 와 client 가 지속적으로 연결된 상태로 네트웍을 오픈하기 때문에 요청에 대한 즉각적인 응답이 가능하다.
        - 저지연, 고효율의 실시간 데이터 전송
        - 양방향 통신 지원
    > 단점
        - 지속적인 네트웍과 서버 자원을 사용
        - proxy server가 was 로 포워딩, ssl 등의 복합적인 서버 환경에 대해 환경 설정이 까다롭다. (복잡한 구현)
        - 브라우저 호환성 고려 필요
     

각 방식 비교 및 선택 기준

기능 PWA WebSocket JavaScript Fetch
실시간 데이터 전송 부분 지원 (푸시 알림) 지원 지원하지 않음
양방향 통신 부분 지원 지원 지원하지 않음
오프라인 기능 지원 지원하지 않음 지원하지 않음
개발 편의성 상대적으로 높음 낮음 높음
서버 부하 적음 높음 적음
  • 실시간성이 중요하고 양방향 통신이 필요한 경우: WebSocket이 가장 적합합니다.
  • 배경에서 동작하는 푸시 알림 기능이 필요한 경우: PWA가 적합합니다.
  • 간단한 데이터 가져오기가 필요하고 실시간성이 중요하지 않은 경우: JavaScript Fetch API가 적합합니다.

결론

각 방식의 특징과 장단점을 고려하여 프로젝트의 요구사항에 맞는 기술을 선택해야 합니다.

만약 실시간성과 양방향 통신이 모두 필요한 경우, WebSocket과 PWA를 함께 사용하는 하이브리드 방식을 고려할 수도 있습니다.

 

선택 시 고려해야 할 요소:

  • 실시간성: 얼마나 빠르게 데이터를 전달해야 하는가?
  • 데이터 양: 얼마나 많은 양의 데이터를 주고받아야 하는가?
  • 연결 상태: 네트워크 연결 상태가 불안정할 수 있는 환경인가?
  • 개발 환경: 어떤 기술 스택을 사용하고 있는가?
  • 유지보수: 어떤 방식으로 시스템을 유지보수할 것인가?

주의사항:

  • 브라우저 호환성: 각 기술의 브라우저 호환성을 확인하고, 필요에 따라 폴리필을 사용해야 합니다.
  • 보안: 데이터를 안전하게 전송하기 위해 적절한 보안 조치를 취해야 합니다.
  • 성능: 시스템의 성능을 고려하여 최적화해야 합니다.

추가적으로 고려해야 할 사항:

  • Server-Sent Events (SSE): WebSocket과 유사하지만 단방향 통신만 지원하는 기술입니다.
  • Long Polling: 일정 시간 간격으로 서버에 요청을 보내 새로운 데이터가 있는지 확인하는 방식입니다.
  • GraphQL: API를 통해 데이터를 가져오는 방식으로, 클라이언트에서 필요한 데이터만 요청할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

번호 제목 글쓴이 날짜 조회 수
공지 Software Development Trend (with Java) 황제낙엽 2024.01.19 592
152 SBOM(Software Bill of Materials) & FOSSLight 황제낙엽 2025.04.04 34
151 현재 유행하는 AI 들을 이용하는 방법 황제낙엽 2025.01.31 55
150 SAP GUI AI Agent를 생성했습니다. 황제낙엽 2025.01.12 65
149 프로그래밍에서 polling 의 의미 황제낙엽 2025.01.05 71
» [Gemini] server 에서 client 의 function call 를 위한 방안과 특징 황제낙엽 2025.01.03 53
147 Gretty 와 Jetty 에 대하여 황제낙엽 2024.11.01 115
146 naver(네이버) developers에서 제공하는 OAuth REST API 관련 링크 황제낙엽 2023.12.31 98
145 (bing) 소프트웨어의 일반적인 버전 관리 규칙 황제낙엽 2023.10.24 72
144 kakao(카카오) developers에서 제공하는 OAuth REST API 관련 링크 황제낙엽 2023.10.22 107
143 식품(상품) 바코드를 조회하여 제품 정보 획득하기 file 황제낙엽 2023.08.07 286
142 식약처(식품의약품안전처) 공공데이터 API 황제낙엽 2023.08.07 124
141 서비스 이용약관과 개인정보 처리방침 황제낙엽 2023.07.15 66
140 프로젝트 운영 관리 소프트웨어로 100% 자동화된 '데브옵스(DevOps)' 구축하기 (LG CNS) secret 황제낙엽 2023.07.12 65
139 개발자이기 전에 노동자로써의 삶에 대한 고찰 (지극히 개인적인 사설) 황제낙엽 2023.02.28 104
138 [SDC22 키노트 요약정리] 더 쉽게, 끊김 없이 매끄럽게! ‘캄 테크’ 향해 진화하는 미래의 집 황제낙엽 2022.12.24 133
137 변수 네이밍 표기법 종류 file 황제낙엽 2022.11.30 81
136 이미지에서 텍스트를 추출하는 OCR 방법들 file 황제낙엽 2022.09.23 110
135 지수(과학적 표기법, "E") 서식 지정자 (2) 황제낙엽 2021.07.06 139
134 REST API 제대로 알고 사용하기 황제낙엽 2021.06.02 130